[Quiz] 이벤트 루프 (Event Loop) 문제

이벤트 루프(Event Loop)의 개념을 설명하고, 아래 코드가 실행될 때 콘솔에 출력되는 순서를 예측해보세요.

console.log("A");
setTimeout(() => console.log("B"), 0);
Promise.resolve().then(() => console.log("C"));
console.log("D");

 

✅ 정답 : "A", "D", "C", "B"
- 코드가 실행이 되고 "A" 가 처음 실행되어 콘솔에 찍힘.

- WebAPI에서 "B" 가 실행되고 task queue로 이동
- 자체적 비동기인 Promise는 microtask queue로 이동
- 마지막 코드가 실행되고 "D" 가 콘솔에 찍힘.
- 우선순위가 microtask queue가 우선이므로 "C" 가 콘솔에 찍히고
- 그 다음 task queue 인 "B" 가 콘솔에 찍히게 됨.


이벤트 루프의 개념 : 자바스크립트의 비동기 처리 방식을 담당하는 핵심 개념

동작방식
1. 콜 스택 (Call Stack)
- LIFO (Last In, First Out) 구조
2. 웹 API (또는 백그라운드 작업)
- setTimeout(), fetch(), addEventListener() 같은 비동기 함수는 Web API나 Node.js 백그라운드에서 실행
3. Task Queue & Microtask Queue
- 비동기 작업이 완료되면 Task Queue 또는 Microtask Queue 에 콜백 함수가 추가됨
- Microtask Queue(우선순위 높음) -> Task Queue(우선순위 낮음)
4. 이벤트 루프 (Event Loop)
- 콜 스택이 비어 있을 때, 태스크 큐에서 작업을 꺼내 실행