이벤트루프

1. 이벤트 루프란?

• 싱글 스레드 자바스크립트 엔진이
  비동기 작업을 처리할 수 있게 해 주는 스케줄러
• 호출 스택(Call Stack) ⇄ 태스크 큐(Task Queue) 사이를 순환
• 스택이 비어 있을 때 대기 중인 콜백을 꺼내 실행

---

2. 주요 구성 요소

1. 호출 스택(Call Stack)

   • 실행 중인 함수들이 쌓이는 곳

2. 마이크로태스크 큐(Microtask Queue)

   • 우선순위가 높은 콜백 대기열
   • Promise.then(), queueMicrotask(), MutationObserver

3. 매크로태스크 큐(Macrotask Queue)

   • 일반 비동기 콜백 대기열
   • setTimeout(), setInterval(), I/O 콜백, UI 이벤트

4. 이벤트 루프(Event Loop)

   • 스택이 비면 마이크로태스크 → 매크로태스크 순으로 처리
   • 이 과정을 반복하며 비동기 작업을 스케줄링

---

3. 실행 흐름

1. 콜 스택에 실행 중인 코드가 있으면 계속 실행
2. 스택이 비어 있으면
   1). 마이크로태스크 큐를 모두 처리
   2). 매크로태스크 큐에서 하나 꺼내 처리
3. 다시 1번으로 돌아가 반복

포인트!

• 마이크로태스크는 매크로태스크보다 우선 실행
• 브라우저는 렌더링 직전에도 마이크로태스크를 비웁니다

---

4. 실행 순서 예시

console.log('A');

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

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

console.log('E');

1. A 출력

2. setTimeout 콜백 → 매크로태스크 큐 등록

3. Promise.then 콜백 → 마이크로태스크 큐 등록

4. E 출력

5. 스택이 비면

   • 마이크로태스크 처리 → C, D

   • 매크로태스크 처리 → B

---

• 과도한 동기 작업은 UI 프리징을 유발할 수 있음
• 마이크로태스크를 지나치게 많이 등록하면 매크로태스크 실행이 지연될 수 있음