JavaScript Event Loop

1️⃣ 싱글 스레드 구조

• 자바스크립트는 단일 Call Stack으로 동작
• 한 번에 하나의 작업만 실행 가능

---

2️⃣ Call Stack

• 함수 호출 → Call Stack에 push
• 실행 완료 → pop
• 순차적으로 동작 (동기 처리)

---

3️⃣ Web APIs & 비동기 작업

• setTimeout, DOM, AJAX, fetch 등은 브라우저(Web APIs)가 처리
• 완료 후 Callback Queue / Microtask Queue에 콜백 등록

---

4️⃣ Event Loop

• Call Stack이 비면, Queue에서 콜백을 가져와 실행
• Microtask Queue → Macrotask Queue 순서로 처리

---

5️⃣ Microtask & Macrotask

Microtask	Promise.then, MutationObserver	Call Stack 종료 직후 실행
Macrotask	setTimeout, setInterval, DOM 이벤트	Microtask 모두 처리 후 실행

 

✔️ 포인트 정리:

1. 싱글 스레드 & Call Stack
2. 비동기 작업 → Web API + 큐에 등록
3. Event Loop → Call Stack 비면 큐에서 처리
4. Microtask 우선 → 그 다음 Macrotask