JavaScript의 `queueMicrotask()`: 이벤트 루프의 우선순위 제어 및 비동기 동작 심층 분석

핵심 기술: queueMicrotask()는 JavaScript의 이벤트 루프 메커니즘에서 현재 동기 코드 블록이 완료된 직후, 다른 렌더링이나 타이머 콜백(setTimeout, setInterval)보다 우선적으로 실행될 콜백 함수를 예약하는 강력한 메서드입니다.

기술적 세부사항:
* queueMicrotask(callback)는 지정된 callback 함수를 마이크로태스크 큐(Microtask Queue)에 등록합니다.
* 이벤트 루프의 일반적인 흐름은 다음과 같습니다:
1. 현재 동기 코드 실행 (콜 스택 비우기)
2. 마이크로태스크 큐 처리: 큐에 있는 모든 마이크로태스크 실행 (새로 추가된 마이크로태스크 포함).
3. (선택적) UI 렌더링 업데이트
4. 매크로태스크 큐 처리: 큐에서 하나의 태스크(setTimeout, setInterval, I/O, 사용자 입력 등)를 가져와 실행.
5. 2단계로 돌아가 반복.
* queueMicrotask(), Promise .then/.catch/.finally 콜백은 setTimeout과 같은 매크로태스크보다 높은 우선순위를 가집니다.
* setTimeout(callback, 0)과 달리, queueMicrotask()는 다음 매크로태스크나 렌더링 전에 즉시 실행될 수 있어 미세한 제어가 가능합니다.

개발 임팩트:
* 코드 블록 완료 직후, 브라우저 렌더링이나 다른 매크로태스크를 방해하지 않고 정리(cleanup) 또는 후속 작업(follow-up actions)을 즉시 수행할 수 있습니다.
* Promise 콜백과 동일한 타이밍 시맨틱으로 작업을 예약하여 일관성을 유지할 수 있습니다.
* 프레임워크나 라이브러리 내부에서 상태 변경 후 브라우저 리페인트 전에 업데이트나 반응을 예약하는 데 유용합니다.

예제 코드 분석:

console.log('Start');
setTimeout(() => { console.log('setTimeout (Macrotask)'); }, 0);
queueMicrotask(() => { console.log('queueMicrotask (Microtask)'); });
Promise.resolve().then(() => { console.log('Promise.then (Microtask)'); });
console.log('End');

위 코드의 실행 순서는 다음과 같습니다:
1. Start 출력
2. setTimeout이 매크로태스크 큐에 등록
3. queueMicrotask가 마이크로태스크 큐에 등록
4. Promise.resolve().then이 마이크로태스크 큐에 등록
5. End 출력
6. 콜 스택이 비워지면, 이벤트 루프는 마이크로태스크 큐를 처리합니다.
7. queueMicrotask 콜백 실행 (queueMicrotask (Microtask) 출력)
8. Promise.then 콜백 실행 (Promise.then (Microtask) 출력)
9. 마이크로태스크 큐가 비워지면, 이벤트 루프는 매크로태스크 큐에서 setTimeout 콜백을 가져와 실행합니다.
10. setTimeout 콜백 실행 (setTimeout (Macrotask) 출력)

결과: Start, End, queueMicrotask (Microtask), Promise.then (Microtask), setTimeout (Macrotask) 순으로 출력됩니다.