JavaScript는 싱글 스레드이지만, 이벤트 루프가 비동기 작업 완료 콜백을 Call Stack에 다시 올려 실행한다.

🧩 구성 요소

• Call Stack: 지금 실행 중인 함수 스택. LIFO.
• Heap: 객체가 할당되는 메모리 공간.
• Web APIs: setTimeout, fetch, DOM 이벤트 등 (브라우저/Node가 제공).
• Macrotask Queue (Task Queue): setTimeout, I/O, UI 렌더링 이벤트 콜백.
• Microtask Queue: Promise.then, queueMicrotask, MutationObserver 콜백.

🔄 동작

1. Call Stack의 동기 코드를 끝까지 실행
2. Microtask Queue를 전부 drain (Promise.then 등)
3. (브라우저) 필요 시 렌더링 한 프레임 처리
4. Macrotask Queue에서 하나 꺼내 실행
5. 2번으로 돌아가 반복

console.log('1');

setTimeout(() => console.log('2'), 0);

Promise.resolve().then(() => console.log('3'));

console.log('4');
// 1 → 4 → 3 → 2

💡 같이 알아둘 것

• async/await은 문법적으로 동기처럼 보이지만, await 이후 코드는 Microtask로 실행된다.
• 무거운 Microtask 체인은 Macrotask, 렌더링을 굶길(starve) 수 있다.
• Node.js는 브라우저와 큐 이름, 단계가 조금 다르다. (process.nextTick 등)

🔗 참고 자료

• JavaScript execution model (MDN) — Call Stack, Job Queue, 이벤트 루프 모델을 설명한다.
• Using microtasks with queueMicrotask() (MDN) — Microtask와 Task의 우선순위, 실행 타이밍을 다룬다.
• In depth: Microtasks and the runtime (MDN) — 이벤트 루프 한 바퀴에서 task, microtask, 렌더링 순서를 깊게 본다.
• HTML Living Standard — Event loops (WHATWG) — 브라우저 이벤트 루프의 공식 명세다.