자바스크립트 이벤트 루프 완벽 이해하기

자바스크립트의 이벤트 루프란?

자바스크립트는 싱글 스레드(single-thread) 언어다. 즉, 한 번에 하나의 작업만 처리할 수 있다. 하지만 setTimeout, Promise, fetch 같은 비동기 작업도 잘 처리하는데, 그 비밀은 바로 이벤트 루프(Event Loop)에 있다.

---

1️⃣ 콜 스택(Call Stack)

자바스크립트는 모든 실행 코드를 콜 스택이라는 자료구조에 쌓아 실행한다.

function hello() {
  console.log("Hello");
}

function greeting() {
  hello();
}

greeting();

이 코드는 다음 순서로 콜 스택에 쌓였다가 빠진다:

1. greeting() 호출 → 스택에 추가
2. hello() 호출 → 스택에 추가
3. console.log() 실행 → 출력 후 제거
4. hello() 제거 → greeting() 제거

---

2️⃣ 웹 API / 백그라운드

브라우저나 Node.js 환경은 비동기 작업을 자체적으로 처리할 수 있는 백그라운드 API를 제공한다.

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

출력 결과는?

Start
End
Timeout

setTimeout은 콜 스택에서 바로 실행되지 않고 백그라운드(Web API)에 등록됨.

---

3️⃣ 이벤트 큐(Event Queue)

백그라운드에서 완료된 작업은 이벤트 큐에 들어간다. 콜 스택이 비워졌을 때 이벤트 큐에 있는 작업을 하나씩 실행한다.

---

4️⃣ 이벤트 루프(Event Loop)

이벤트 루프는 끊임없이 콜 스택과 이벤트 큐를 감시하며, 콜 스택이 비어있으면 이벤트 큐에서 작업을 꺼내 실행시킨다.

[콜 스택 비어있음] → [이벤트 큐에 작업 있음] → [콜 스택에 푸시해서 실행]

---

🔁 마이크로태스크 큐 (Microtask Queue)

Promise.then, async/await 등의 작업은 마이크로태스크 큐에 들어간다. 이 큐는 이벤트 큐보다 우선 처리된다.

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

출력 결과:

Start
End
Promise

---

✅ 요약

• 콜 스택: 실행 중인 작업이 쌓이는 곳
• 웹 API/백그라운드: 비동기 작업을 처리
• 이벤트 큐: 비동기 작업 완료 시 대기하는 큐
• 이벤트 루프: 스택이 비면 큐에서 작업을 가져옴
• 마이크로태스크 큐: Promise 등 빠른 처리 우선 순위 큐

---