커밋과 푸시 사이

HTML select 박스의 값을 가져오는 여러 가지 방법이 있습니다. 다음은 가장 일반적인 방법들입니다:

1. JavaScript를 사용하여 선택된 옵션의 값을 가져오기:

<select id="mySelect">
  <option value="option1">옵션 1</option>
  <option value="option2">옵션 2</option>
  <option value="option3">옵션 3</option>
</select>

<button onclick="getSelectedValue()">값 가져오기</button>

<script>
function getSelectedValue() {
  var selectBox = document.getElementById("mySelect");
  var selectedValue = selectBox.value;
  alert(selectedValue);
}
</script>

위의 코드에서 `getSelectedValue()` 함수는 `getElementById`를 사용하여 select 박스 요소를 가져온 다음, `value` 속성을 사용하여 선택된 값을 가져옵니다.

2. JavaScript를 사용하여 선택된 옵션의 텍스트 가져오기:

<select id="mySelect">
  <option value="option1">옵션 1</option>
  <option value="option2">옵션 2</option>
  <option value="option3">옵션 3</option>
</select>

<button onclick="getSelectedText()">텍스트 가져오기</button>

<script>
function getSelectedText() {
  var selectBox = document.getElementById("mySelect");
  var selectedText = selectBox.options[selectBox.selectedIndex].text;
  alert(selectedText);
}
</script>

이 코드에서 `getSelectedText()` 함수는 `options` 속성을 사용하여 선택된 옵션 요소의 배열을 가져온 다음, `selectedIndex` 속성을 사용하여 현재 선택된 인덱스를 가져와 해당 인덱스의 텍스트를 가져옵니다.

3. jQuery를 사용하여 선택된 값 가져오기:

<select id="mySelect">
  <option value="option1">옵션 1</option>
  <option value="option2">옵션 2</option>
  <option value="option3">옵션 3</option>
</select>

<button id="getValueButton">값 가져오기</button>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$("#getValueButton").click(function() {
  var selectedValue = $("#mySelect").val();
  alert(selectedValue);
});
</script>

이 코드는 jQuery 라이브러리를 사용하여 select 박스에서 선택된 값을 가져옵니다. `val()` 함수를 사용하여 선택된 값을 가져옵니다.

코드 변경시 사용자가 강력 새로고침 (ctrl + F5) 을 해주면 좋겠지만, 원하는대로 행동해주지 않는 것이 사용자다.

브라우저는 주소+파라미터를 기반으로 캐시하므로 js?timestamp 방식으로 요청을 받아 처리하면 코드 수정사항을 바로 반영시킬 수 가 있다.

이것을 "cache busting" 이라고 한다.

https://www.curtiscode.dev/post/front-end-dev/what-is-cache-busting/

javascript 비동기 검색중 yield라는 키워드를 발견하였다. 코드 실행을 보류 할 수 있는 능력을 가진 독특한 키워드이다.

yield는 generator function과 같이 사용해야하는데, 사용법은 다음과 같다.

function*으로 함수를 정의하고, 이 함수 내에 포함되어 있는 property 중에 next()를 차례로 호출함으로써, 함수 내에 코딩해둔 yield를 차례로 실행시키는 것이고, 아래 3가지 키워드를 사용해서 코드가 만들어진다.

function* : function 뒤에 astrok(*)를 붙이면, 이를 generator function이라고 불리는 함수형태가 된다. 이 함수는 비동기처리를 할 수 있는 함수로서 내부에서 yield라는 키워드를 사용해서 코딩을 하면, 해당 라인까지만 코드를 실행하고 뒷부분은 다시 실행을 요청할 때까지 실행하지 않게함으로써 마치 함수가 실행 중에 특정부분에서 일시 정지된 것처럼 동작함으로써, 비동기 처리를 하도록 만들 수가 있다.

yield : generator function 안에 yield 키워드를 사용한 곳들을 기준으로 코드가 잘려서 실행하게 된다고 볼 수 있다. 만약에, yield문을 만날때까지 특정 처리를 수행했다면, 함수는 잠깐 잘린 상태로 정지해있다가 다시 이 함수로 접근했을 때(=next함수를 호출했을 때) 멈췄던 부분부터 실행을 이어서 하고 다음 yield문을 만날때까지 쭈욱 실행이 되는 것이다. 이러한 구조로 인해 yield를 기준으로 처리가 나눠진 곳들을 실행시키는 명령을 외부로 넘기는 형태가 만들어지게 되는 것이다. 따라서, generator function을 호출하는 외부 함수(=caller)에서 next()를 실행시킬 때마다 yield로 나눠진 곳들이 하나씩 실행하게 되는 것이다.

next() : generator function에서 반환한 데이터를 generator라고 부르는데, generator의 next 함수를 실행하면 { value, done } 이라는 데이터를 반환한다. 참고로, next()를 실행하는 이유는 generator는 반복구조인 iterator를 사용하는 구조이기 때문이다.

sample code

function* call() { 
    console.log('execute joker 1'); 
    yield 10; 
    console.log('execute joker 2'); 
    yield (20 + 20); 
    console.log('execute joker 3'); 
    yield (30 * 3); 
} 

// call style 1
let gen = call(); 
console.log(gen.next()); 
console.log(gen.next()); 
console.log(gen.next()); 
console.log(gen.next());

// call style 2
for(let result of call()) { 
    console.log(result); 
}

sample code output

execute joker 1
{
    value:10,
    done:false
}
execute joker 2
{
    value:40,
    done:false
}
execute joker 3
{
    value:90,
    done:false
}
{
    value:undefined,
    done:true
}
execute joker 1
10
execute joker 2
40
execute joker 3
90

참고

Mozila Generator.prototype.next() link

Mozila yield* link