자바스크립트 이벤트 루프

싱글 스레드 언어인 자바스크립트가 어떻게 비동기를 처리할 수 있을까?
그 중심에는 바로 이벤트 루프가 있습니다.

---

이벤트 루프란?

자바스크립트는 기본적으로 싱글 스레드(single-thread) 언어입니다.
즉, 한 번에 하나의 작업만 실행할 수 있습니다.

그런데 우리는 자바스크립트로

• setTimeout 같은 비동기 함수
• Promise
• fetch 같은 비동기 I/O 요청
• 사용자 이벤트 처리
  등을 자유롭게 사용합니다.

🤔 어떻게 동시적으로 처리할 수 있는 것처럼 보일까요?

바로 이벤트 루프(Event Loop) 덕분입니다.

이벤트 루프의 기본 구성 요소

자바스크립트의 비동기 처리는 이벤트 루프가 중심이 되어 아래 3가지 요소가 협력합니다.

구성 요소	설명
Call Stack (콜 스택)	현재 실행 중인 함수들의 스택
Web API (브라우저 또는 Node API)	비동기 작업 처리 (타이머, 이벤트, AJAX 등)
Task Queue (태스크 큐)	완료된 비동기 콜백이 대기하는 큐 (매크로/마이크로로 나뉨)

예시: setTimeout(callback, 0) 은 즉시 실행되지 않는다.

console.log('1');

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

console.log('3');

실행 결과는

1
3
2

이유

1. console.log('1') → 즉시 실행
2. setTimeout(...) → Web API에 위임, 타이머(0ms) 시작
3. console.log('3') → 즉시 실행
4. 콜 스택이 비게 되면
   → 이벤트 루프가 태스크 큐(Task Queue) 에서 대기 중인 콜백 꺼내 실행

✅ 0ms는 “즉시 실행”이 아니라
→ “다음 이벤트 루프 사이클에 실행해줘”라는 의미입니다.

이벤트 루프 흐름 정리

1. Call Stack이 비어있는지 확인
2. Microtask Queue가 비어있지 않다면 → 모두 처리
3. 그 후 Macrotask Queue에서 하나 꺼내 실행
4. 1번으로 다시 반복

---

태스크 큐 종류

1) 매크로태스크 큐 (Macrotask Queue)

일반적인 비동기 작업이 들어가는 큐

예시

• setTimeout(),
• setInterval(),
• setImmediate() (Node.js),
• MessageChannel

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

더 빠르게, 더 우선적으로 처리해야 할 작업이 들어감

예시

• Promise.then(),
• catch(),
• finally()
• queueMicrotask()

마이크로 vs 매크로 우선순위

항상 마이크로태스크 큐가 먼저 처리됩니다!

console.log('start');

setTimeout(() => {
  console.log('🌐 Macrotask: setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('📦 Microtask: Promise');
});

console.log('end');

실행 결과

start
end
📦 Microtask: Promise
🌐 Macrotask: setTimeout

---

실제 예제: 순서 예측

console.log('A');

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

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

console.log('D');

예상 순서?

A
D
C  ← 마이크로태스크
B  ← 매크로태스크

동기 이벤트 추가
setTimeout Loop 실행

기타

Q. setTimeout(..., 0)은 왜 0인데 바로 실행되지 않는지

“0ms 후에 실행해줘”라는 뜻일 뿐
→ 현재 실행 중인 동기 코드들이 모두 끝나고 나서 실행됨

Q. 마이크로태스크 큐가 많으면 어떻게 되나요?

이벤트 루프는 마이크로태스크 큐가 비어야만 매크로태스크를 처리하므로,
→ 마이크로태스크가 너무 많으면 UI 렌더링 등 이벤트 처리가 지연될 수 있습니다.

요약

개념	설명
콜 스택	현재 실행 중인 함수들이 쌓이는 공간
웹 API	비동기 작업을 브라우저가 대신 처리
마이크로태스크 큐	Promise 등 빠르게 처리해야 할 작업이 대기
매크로태스크 큐	setTimeout, setInterval 등 일반 비동기 작업이 대기
이벤트 루프	콜 스택과 큐를 오가며 실행 타이밍을 조절하는 메커니즘

💬 마무리

자바스크립트의 이벤트 루프는 비동기 처리를 가능하게 하는 핵심 개념입니다.

이 구조를 이해하면

• setTimeout과 Promise의 실행 순서 차이
• 렌더링 전에 코드 실행 순서를 조절하는 방법
• 성능 개선을 위한 큐 제어 방법

등 다양한 상황에서 응용할 수 있어요.

클로저, 콜백, Promise, async/await 등 모든 비동기 코드의 기반은 이벤트 루프입니다.