setTimeout vs Promise.then vs queueMicrotask

브라우저/Node.js 런타임에서 비동기 코드의 실행 순서를 정확히 이해하는 것은 디버깅과 성능 최적화의 출발점입니다. 특히 마이크로태스크 큐는 렌더링 타이밍과 상태 일관성에 직접적인 영향을 주므로, 실무에서 정확한 모델을 갖추는 것이 중요합니다.

핵심 개념 정리

• Call Stack: 자바스크립트가 함수를 동기적으로 실행하는 스택.
• Web APIs(환경): 타이머, DOM, Fetch 등 비동기 작업이 대기하는 영역.
• Task Queue(매크로태스크 큐): setTimeout, setInterval, setImmediate(Node) 등이 들어가는 큐.
• Microtask Queue(마이크로태스크 큐): Promise.then/catch/finally, queueMicrotask, MutationObserver 등이 들어가는 큐.
• Event Loop 규칙(중요):
  1) 콜스택이 빌 때까지 동기 코드 실행
  2) Microtask Queue를 “완전히” 비울 때까지 실행
  3) 그 다음 Task Queue에서 작업 1개를 실행(그리고 다시 2로)

요약하면, “마이크로태스크는 같은 틱에서 모두 비워진 뒤에야 다음 매크로태스크로 넘어간다”가 핵심입니다.

예제 코드

아래 코드는 test.js와 동일합니다.

setTimeout(() => {
    console.log('A');
}, 0);

console.log('B');

Promise.resolve().then(() => {
    console.log('C');
});

queueMicrotask(() => {
    console.log('D');
});

console.log('E');

기대 출력(브라우저 기준)

B
E
C
D
A

단계별 실행 타임라인

1) setTimeout(..., 0) 등록 → Web APIs로 타이머 위임 → 만료 후 Task Queue에 콜백(A) 대기

2) 동기 코드 실행: console.log('B')

3) Promise.resolve().then(...) → Microtask Queue에 콜백(C) 등록

4) queueMicrotask(...) → Microtask Queue에 콜백(D) 등록

5) 동기 코드 실행: console.log('E')

6) 콜스택이 비면 Event Loop가 Microtask Queue를 “모두” 비움 → C → D

7) 다음 틱에서 Task Queue의 A 실행 → console.log('A')

정리: 동기(B, E) → 마이크로태스크(C, D) → 매크로태스크(A)

마이크로태스크 내부 순서는 “등록된 순서”입니다. 위 코드에서는 Promise.then이 먼저, queueMicrotask가 나중에 등록되어 C → D 순으로 실행됩니다.

비교 표: 어떤 큐로 가는가, 언제 실행되는가

실무 팁과 주의사항

• 마이크로태스크 “고갈” 규칙을 이용해 일관성 보장
  • 동일 틱 내 후처리는 queueMicrotask가 가장 명확합니다.
• 과도한 마이크로태스크 생성은 이벤트 루프 기아를 유발
  • 무한 재귀적 마이크로태스크는 렌더링을 막습니다. 반드시 종료 조건을 두세요.
• Promise.then vs queueMicrotask
  • 둘 다 마이크로태스크이지만, 체인 작성과 에러 핸들링이 필요하면 Promise가 편리합니다. 아주 경량 후처리는 queueMicrotask가 적합합니다.
• 브라우저 vs Node.js 차이 인지
  • Node.js에서는 process.nextTick이 마이크로태스크보다 우선 실행되어 기아를 유발하기 쉽습니다. 범용적으로는 queueMicrotask/setImmediate 사용을 권장합니다.
• 테스트에서 플러시하기
  • 마이크로태스크만 비우고 싶다면 await Promise.resolve()로 한 틱을 양보하는 패턴을 사용할 수 있습니다.

변형 실험으로 개념 고정

1) 타이머 내부의 마이크로태스크는 “다음 매크로태스크 안”에서 먼저 비워집니다.

setTimeout(() => {
    console.log('A1');
    queueMicrotask(() => console.log('A2')); // 같은 틱에서 A2가 A1 바로 뒤에 실행
}, 0);

console.log('B1');

예상: B1 → (다음 틱) A1 → A2

2) 등록 순서가 곧 마이크로태스크 실행 순서입니다.

queueMicrotask(() => console.log('M1'));
Promise.resolve().then(() => console.log('M2'));
queueMicrotask(() => console.log('M3'));

예상: M1 → M2 → M3

결론

• 상태 정합이 중요한 “동 틱 내 후처리”는 queueMicrotask로, 체인/에러 전파가 필요하면 Promise로.
• 렌더 이후로 미루고 싶다면 setTimeout(0)이 아니라, 의도에 맞는 API(requestAnimationFrame, requestIdleCallback)를 고려하세요.
• Node.js에서는 process.nextTick 남용을 지양하고 queueMicrotask/setImmediate를 선택하세요.

핵심 공식: 동기(B/E) → 마이크로태스크(C/D 전체 소진) → 매크로태스크(A). 이 규칙으로 대부분의 실행 순서를 안정적으로 예측할 수 있습니다.