자바스크립트 이벤트 루프 완전 정복

자바스크립트의 심장, 이벤트 루프

🔄 이벤트 루프란?

자바스크립트는 싱글 스레드 언어입니다. 동시에 여러 작업을 처리하는 게 아닌, **한 번에 하나의 작업만 수행**합니다. 하지만 비동기 처리(예: setTimeout, fetch)는 어떻게 가능한 걸까요? 바로 **이벤트 루프(Event Loop)** 덕분입니다.

---

📦 콜 스택과 태스크 큐

// 동기 작업: 콜 스택(Stack)에서 실행
// 비동기 작업: Web API → 태스크 큐(Queue)로 대기

- **콜 스택(Call Stack)**: 실행 중인 함수들이 쌓이는 구조. - **Web API**: 브라우저가 제공하는 비동기 처리 영역 (setTimeout, DOM 이벤트 등) - **태스크 큐(Task Queue)**: 비동기 콜백들이 대기하는 곳.

---

🚀 실행 순서 예시

console.log("1");

setTimeout(() => {
  console.log("2");
}, 0);

console.log("3");

**결과:** 1 → 3 → 2 비동기 작업(setTimeout)은 Web API에서 대기한 후, 콜 스택이 비면 큐로 들어가 실행됩니다.

---

⏳ 마이크로태스크 vs 매크로태스크

- **마이크로태스크(Microtask)**: Promise.then, MutationObserver 등 - **매크로태스크(Macrotask)**: setTimeout, setInterval 등

console.log("Start");

setTimeout(() => {
  console.log("Timeout");
}, 0);

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");

**실행 순서:** Start → End → Promise → Timeout

---

🎯 요약

- 자바스크립트는 싱글 스레드 언어이지만 이벤트 루프를 통해 비동기를 처리함 - 비동기 처리의 핵심은 **콜 스택 → Web API → 태스크 큐 → 이벤트 루프 순환** - Promise는 setTimeout보다 먼저 실행됨 (마이크로태스크 > 매크로태스크)