이벤트 루프

정의

프로그램의 이벤트나 메시지를 대기하다가 디스패치(효율적으로 처리)하는 프로그래밍 구조체

• 작업의 동시 처리 혹은 우선순위 설정을 제어하는 관리자 역할을 수행한다.
• 콜 스택과 콜백 큐를 모니터링하며, 콜 스택이 비어있을 때 콜백 큐에 대기 중인 콜백 함수를 가져와 실행한다.

구성 요소

• 콜 스택(Call Stack) → 자바스크립트 코드를 실행
• 힙(Heap) → 동적으로 생성된 객체가 저장되는 메모리 공간
• 웹 API(Web APIs) → 비동기 작업을 처리하는 브라우저의 API 모음
  • setTimeout, fetch, addEventListener. 등
• 콜백 큐(Callback Queue) → 비동기 작업이 완료되면 콜백 함수가 대기하는 큐
• 태스크 큐(Task Queue, Macrotask Queue) → 앞의 웹 API의 콜백 함수가 들어가는 큐
  • 렌더링 사이클과 함께 돌아감
• 마이크로태스크 큐 → Promise.then, process.nextTick, MutationObserver 등의 콜백 함수가 들어간다.
  • 렌더링 전에 모두 처리됨

동작 과정

1. 동기 작업 실행 → 콜 스택에 쌓인 동기 작업을 순차적으로 실행
2. 비동기 작업 처리 → 비동기 함수 호출 시, 해당 작업은 웹 API에서 처리되고, 완료된 콜백 함수는 콜백 큐에 적재
3. 이벤트 루프 작동 → 이벤트 루프는 콜 스택이 비어있는지 확인한 후, 비어있다면 콜백 큐에서 대기 중인 콜백 함수를 콜 스택으로 옮겨 실행
4. 마이크로태스크 우선 처리 → 마이크로태스크를 우선적으로 처리하고, 태스크 큐를 처리

예제 코드를

console.log("Start");
 
setTimeout(() => {
  console.log("Timeout");
}, 0);
 
Promise.resolve().then(() => {
  console.log("Promise");
});
 
console.log("End");

1. 동기 작업 실행
   • console.log("Start") 실행 → Start 출력
   • console.log("End") 실행 → End 출력
2. 이벤트 루프 작동
   • 마이크로태스크 큐 확인 → console.log("Promise") 실행 → Promise 출력
   • 매크로태스크 큐 확인 → console.log("Timeout") 실행 → Timeout 출력

async function A() {
  console.log("A");
  await delay(2000);
  console.log("B");
}
 
async function delay(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}
 
A();
setTimeout(() => console.log("C"), 0);

1. 동기 작업 실행
   • A() 함수가 호출되며 console.log("A") 실행 → A 출력
2. await delay(2000) 실행
   • delay 함수는 Promise 를 반환하고, console.log("B") 는 마이크로태스크 큐에 등록
3. setTimeout(..., 0) 실행
   • 콜백(console.log("C"))이 태스크 큐에 등록
4. 콜 스택이 비면 이벤트 루프가 큐를 확인
   • 먼저 마이크로태스크 큐 확인 → 없음
   • 매크로태스크 큐 확인 → console.log("C") 실행 → C 출력
5. 2초 뒤 delay 함수의 반환값인 Promise 가 Fulfilled 상태가 되어 console.log("B") 마이크로태스크 큐에 등록
   • 이벤트 루프가 마이크로태스크 큐 실행 → B 출력