Event Loop(이벤트 루프)란 ?

박하늘·2025년 8월 29일

출처 : https://wikidocs.net/251900

Event Loop(이벤트 루프)란 ?

자바스크립트의 동시성(concurrency) 과 비동기 처리가 어떻게 동작하는지 이해하는 핵심 개념

1️⃣ 자바스크립트의 싱글스레드 특성

반면 Java나 Python과 같은 언어는 멀티 스레드를 지원하여 여러 작업을 동시에 수행가능

자바스크립트는 기본적으로 한 번에 하나의 작업만 실행
즉, 한 순간에 하나의 코드 블록만 처리할 수 있으며 다른 작업은 대기
그런데 웹 브라우저나 Node.js 환경에서는 비동기 작업(예: setTimeout, 이벤트 핸들러, 네트워크 요청)을 동시에 처리하는 것처럼 보입니다.

🪽 이것을 가능하게 하는 것이 이벤트 루프

2️⃣ 주요 개념

(1) Call Stack (호출 스택)

•	현재 실행 중이거나 실행될 함수들이 쌓이는 공간.
•	동기적인 코드는 여기서 바로 처리됩니다.

function a() { console.log("a"); }
function b() { a(); }
b();
// 실행 순서: b → a → console.log

(2) Web APIs (브라우저 환경) / Node APIs

•	타이머, DOM 이벤트, fetch 같은 비동기 작업은 자바스크립트 엔진이 직접 실행하지 않고 브라우저/Node의 API에 맡깁니다.
•	예: setTimeout, addEventListener, fetch

(3) Task Queue (Callback Queue, Macrotask Queue)

•	API에서 완료된 작업의 콜백들이 대기하는 줄.
•	대표적인 작업: setTimeout, setInterval, setImmediate(Node)

(4) Microtask Queue

•	우선순위가 높은 큐.
•	대표적인 작업: Promise.then, process.nextTick(Node)
•	이벤트 루프는 매번 Call Stack이 비면, 먼저 Microtask Queue를 전부 비운 뒤 Task Queue를 확인합니다.

3️⃣ 기본 동작 흐름

Call Stack : 자바스크립트 함수 호출이 쌓이는 스택입니다.
Web APIs : 타이머, 네트워크 요청 등을 처리하는 브라우저의 API입니다.
Callback Queue : 비동기 작업이 완료되면 해당 콜백 함수가 이 큐에 추가됩니다.
Event Loop : 호출 스택이 비어 있을 때 콜백 큐에서 콜백 함수를 꺼내 호출 스택에 추가하여 실행합니다.

4️⃣ 예제

[ 1 ] 첫 번째 예제

console.log("Start"); // 1. 호출 스택에 추가되어 실행

setTimeout(function() {
  console.log("Timeout callback"); // 3. Web API에서 처리 후 콜백 큐에 추가
}, 1000);

console.log("End"); // 2. 호출 스택에 추가되어 실행

// 4. 1초 후, 콜백 큐에서 호출 스택으로 이동하여 실행

⏩️ ...

Start 출력 (호출 스택에 추가 후 즉시 실행)
setTimeout 호출 (호출 스택에 추가 후 Web API로 넘김)
End 출력 (호출 스택에 추가 후 즉시 실행)
1초 후, setTimeout 콜백이 콜백 큐에 추가됨
호출 스택이 비어 있으면 콜백 큐에서 콜백을 꺼내 실행
Timeout callback 출력

✴︎ 출력 순서 ✴︎
Start
End
Timeout callback

[ 2 ] 두 번째 예제

console.log("start");

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

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

console.log("end");

⏩️ ...

console.log("start") → 동기 → "start" 출력
setTimeout(...) → Web API에 위임 → 콜백은 태스크 큐로 이동 (나중 실행)
Promise.resolve().then(...) → 콜백은 마이크로태스크 큐에 저장 (태스크 큐보다 우선 실행)
console.log("end") → 동기 → "end" 출력
스택이 비면 이벤트 루프가 마이크로태스크 큐 확인 → "promise" 실행
그다음 태스크 큐 실행 → "timeout" 실행

✴︎ 출력 순서 ✴︎
start
end
promise
timeout

5️⃣ 핵심 요약

자바스크립트는 싱글 스레드이지만, 이벤트 루프 구조 덕분에 비동기처럼 보이는 작업이 가능하다.
순서 규칙: Call Stack → Microtask Queue → Task Queue
Promise(마이크로태스크)가 setTimeout(매크로태스크)보다 항상 먼저 실행된다.

🪽 추가 면접 예시 질문

자바스크립트는 싱글 스레드 언어인데 비동기 처리는 어떻게 가능한가요?
이벤트 루프, 콜 스택, 태스크 큐(Microtask 포함) 중심으로 설명해주세요.

자바스크립트는 엔진 자체가 싱글 스레드라 한 번에 하나의 작업만 처리합니다.
하지만 브라우저/Node 환경에서 제공하는 Web APIs가 비동기 작업을 처리하고, 완료된 콜백을 큐에 넣습니다.
이벤트 루프는 콜 스택이 빌 때마다 Microtask Queue → Task Queue 순서로 작업을 가져와 실행합니다.
따라서 자바스크립트는 싱글 스레드임에도 비동기 처리가 가능하고, 동시에 여러 일이 일어나는 것처럼 동작할 수 있습니다.