자바스크립트/Node.js 이벤트 루프: 싱글 스레드 비동기성의 심장을 해부하다

개념 소개: 이벤트 루프, 왜 중요할까요?

자바스크립트는 흔히 "싱글 스레드(Single Thread)" 언어라고 불립니다. 이는 한 번에 하나의 작업만 수행할 수 있다는 의미입니다. 그렇다면 어떻게 자바스크립트는 사용자의 입력, 네트워크 요청, 파일 읽기 같은 시간이 오래 걸리는 비동기 작업을 UI가 멈추지 않고 매끄럽게 처리할 수 있을까요? 이 마법 같은 비밀의 중심에 바로 **이벤트 루프(Event Loop)**가 있습니다.

이벤트 루프는 자바스크립트의 동시성(Concurrency) 모델을 구현하는 핵심 메커니즘입니다. 웹 브라우저 환경에서 사용자의 클릭에 반응하고, 애니메이션을 부드럽게 재생하며, 동시에 서버에서 데이터를 가져오는 등의 작업을 가능하게 합니다. Node.js 환경에서는 수많은 동시 요청을 단일 스레드에서 효율적으로 처리하여 높은 성능을 달성하는 기반이 됩니다.

이벤트 루프의 탄생 배경은 웹 브라우저의 특성에서 찾아볼 수 있습니다. 만약 브라우저가 네트워크 요청과 같은 비동기 작업을 동기적으로 처리했다면, 요청이 완료될 때까지 UI는 완전히 멈춰버렸을 겁니다. 이는 사용자 경험에 치명적이죠. 이러한 문제를 해결하고, Node.js가 고성능 I/O 처리에 특화된 플랫폼으로 성장하는 데 이벤트 루프는 결정적인 역할을 했습니다.

이벤트 루프를 이해하는 것은 단순히 기술적인 지식을 넘어섭니다. async/await, Promise 같은 비동기 문법이 내부적으로 어떻게 동작하는지 깊이 있게 파악할 수 있게 해주고, 성능 저하의 원인을 찾아내거나 최적화된 코드를 작성하는 데 필수적인 통찰력을 제공합니다.

핵심 원리 설명: 이벤트 루프의 춤

이벤트 루프의 작동 원리를 이해하려면 몇 가지 핵심 구성 요소를 알아야 합니다. 마치 잘 짜인 무대 위에서 각자의 역할을 수행하는 배우들과 같습니다.

비유: 식당의 단 한 명의 웨이터

이벤트 루프 시스템을 이해하기 위해 한 식당을 상상해봅시다. 이 식당에는 주문을 받고 음식을 서빙하는 **웨이터(메인 스레드)**가 단 한 명뿐입니다.

웨이터의 메모지 (콜 스택, Call Stack): 웨이터가 현재 처리해야 할 주문 목록입니다. 가장 최근 주문이 맨 위에 쌓이고, 완료되면 제거됩니다.
주방, 바텐더, 은행 등 외부 서비스 (웹 API / Node.js API): 시간이 오래 걸리는 작업을 처리하는 곳입니다. 예를 들어, 음식을 만들거나(네트워크 요청), 음료를 제조하거나(파일 I/O), 돈을 계산하는(타이머) 등의 일을 합니다. 웨이터는 여기에 주문을 넘기고 다른 일을 합니다.
대기 중인 주문표 (콜백 큐, Callback Queue): 주방 등에서 작업이 완료되면, 웨이터에게 전달할 "완료된 주문표"가 쌓이는 곳입니다. 고객에게 음식을 가져다주거나 계산서를 전달하는 등의 후속 조치 요청이 여기에 쌓입니다. 이 큐는 두 종류로 나뉩니다:
- VIP 주문표 (마이크로태스크 큐, Microtask Queue): Promise의 .then(), async/await의 결과 처리, MutationObserver 같은 아주 중요한, 즉시 처리해야 할 주문표입니다.
- 일반 주문표 (매크로태스크 큐, Macrotask Queue): setTimeout, setInterval, 사용자 인터랙션(클릭, 키보드 입력), I/O 작업 완료 콜백 등 일반적인 주문표입니다.
주문표 확인 담당자 (이벤트 루프, Event Loop): 이 식당의 핵심 조율자입니다. 웨이터가 현재 할 일이 없는지(콜 스택이 비었는지) 계속 확인합니다. 웨이터가 한가하면, VIP 주문표 큐를 먼저 확인하고, 거기에 할 일이 없으면 일반 주문표 큐를 확인하여 가장 오래된 주문표를 웨이터의 메모지(콜 스택)로 넘겨줍니다.

이벤트 루프의 작동 과정:

초기 실행: 자바스크립트 코드가 실행되면, 함수 호출은 콜 스택에 차례대로 쌓입니다.
비동기 작업 위임: setTimeout, fetch, readFile 등과 같은 비동기 함수가 호출되면, 이 함수 자체는 콜 스택에서 실행된 후 제거됩니다. 하지만 실제 시간이 오래 걸리는 작업(타이머 대기, 네트워크 요청, 파일 읽기)은 웹 API (브라우저) 또는 Node.js API (Node.js 런타임)로 위임됩니다.
콜백 대기: 위임된 비동기 작업이 완료되면, 그 결과와 함께 실행될 콜백 함수는 즉시 콜 스택으로 가지 않고, 콜백 큐로 이동하여 대기합니다. 이때 마이크로태스크 큐에 들어갈지, 매크로태스크 큐에 들어갈지가 결정됩니다. Promise 관련 콜백은 마이크로태스크 큐로, setTimeout 등은 매크로태스크 큐로 들어갑니다.
이벤트 루프의 확인: 이벤트 루프는 콜 스택이 비어있는지 지속적으로 확인합니다. (콜 스택이 비어있다는 것은 웨이터가 현재 처리할 동기 작업이 없다는 의미입니다.)
콜백 실행: 콜 스택이 비면, 이벤트 루프는 먼저 **마이크로태스크 큐**에 있는 모든 콜백 함수를 콜 스택으로 옮겨 실행합니다. 마이크로태스크 큐가 완전히 비워질 때까지 이 과정을 반복합니다.
다음 틱: 마이크로태스크 큐까지 비워지면, 이벤트 루프는 **매크로태스크 큐**에서 가장 오래된 콜백 함수 하나를 콜 스택으로 옮겨 실행합니다.
반복: 이 과정(콜 스택 비우기 -> 마이크로태스크 큐 비우기 -> 매크로태스크 큐에서 하나 가져와 실행)이 계속 반복됩니다. 이를 "이벤트 루프의 틱(tick)"이라고 부릅니다.

핵심 요약: 자바스크립트는 싱글 스레드이지만, 이벤트 루프와 비동기 API 덕분에 동시성을 흉내 내어 블로킹 없이 작업을 처리합니다. 특히 마이크로태스크 큐는 매크로태스크 큐보다 높은 우선순위를 가지며, 매크로태스크가 한 번 실행될 때마다 마이크로태스크 큐는 완전히 비워집니다.

코드 예제 2개

예제 1: `setTimeout`과 `Promise`의 우선순위

이 예제는 setTimeout (매크로태스크)과 Promise.then (마이크로태스크)의 실행 순서 차이를 보여줍니다.

console.log('1. 스크립트 시작'); // 동기 코드

setTimeout(() => {
  console.log('4. setTimeout 콜백 (매크로태스크)');
}, 0); // 0ms 지연, 매크로태스크 큐로 이동

Promise.resolve().then(() => {
  console.log('3. Promise.then 콜백 (마이크로태스크)');
}); // 마이크로태스크 큐로 이동

console.log('2. 스크립트 끝'); // 동기 코드

// 예상 출력 순서:
// 1. 스크립트 시작
// 2. 스크립트 끝
// 3. Promise.then 콜백 (마이크로태스크)
// 4. setTimeout 콜백 (매크로태스크)

설명:

'1. 스크립트 시작'은 동기 코드이므로 즉시 콜 스택에서 실행됩니다.
setTimeout은 웹 API로 위임되고, 콜백 함수는 매크로태스크 큐로 이동합니다.
Promise.resolve().then()은 마이크로태스크 큐로 콜백 함수를 이동시킵니다.
'2. 스크립트 끝'은 동기 코드이므로 즉시 콜 스택에서 실행됩니다.
이제 콜 스택이 비었으므로 이벤트 루프가 작동합니다. 마이크로태스크 큐에 있는 Promise.then 콜백이 먼저 콜 스택으로 옮겨져 실행됩니다.
마이크로태스크 큐가 비워지면, 이벤트 루프는 매크로태스크 큐에서 setTimeout 콜백을 가져와 콜 스택으로 옮겨 실행합니다.

예제 2: Node.js의 `process.nextTick`과 `setImmediate`

Node.js 환경에서는 브라우저와는 조금 다른 이벤트 루프 단계가 존재하며, process.nextTick과 setImmediate는 이러한 단계를 이해하는 데 중요한 역할을 합니다.

console.log('1. 스크립트 시작');

setTimeout(() => {
  console.log('5. setTimeout 콜백 (timers 단계)');
}, 0);

setImmediate(() => {
  console.log('6. setImmediate 콜백 (check 단계)');
});

Promise.resolve().then(() => {
  console.log('3. Promise.then 콜백 (마이크로태스크)');
});

process.nextTick(() => {
  console.log('2. process.nextTick 콜백 (현재 작업 완료 후 즉시)');
});

console.log('4. 스크립트 끝');

// 예상 출력 순서 (Node.js 환경):
// 1. 스크립트 시작
// 2. process.nextTick 콜백 (현재 콜 스택이 비워진 직후, 마이크로태스크보다 먼저)
// 3. Promise.then 콜백 (마이크로태스크)
// 4. 스크립트 끝
// 5. setTimeout 콜백 (timers 단계)
// 6. setImmediate 콜백 (check 단계)

설명:

process.nextTick 콜백은 현재 콜 스택의 작업이 완료된 직후, 즉 이벤트 루프가 다음 틱으로 넘어가기 전에 실행됩니다. 이는 마이크로태스크 큐의 콜백보다도 우선합니다.
Promise.then 콜백은 process.nextTick 다음으로, 마이크로태스크 큐에서 실행됩니다.
setTimeout 콜백은 timers 단계에서 실행됩니다.
setImmediate 콜백은 check 단계에서 실행됩니다. timers 단계 다음에 check 단계가 오므로, setTimeout 다음에 실행될 가능성이 높습니다. (단, setTimeout의 지연 시간이 0이라도 실제 지연이 발생할 수 있으므로, 항상 setImmediate가 나중에 실행되는 것은 아니지만, 일반적으로 timers 단계 다음에 check 단계가 옵니다.)

이 예제는 Node.js의 이벤트 루프가 timers, pending callbacks, idle, prepare, poll, check, close callbacks 등의 여러 단계를 가지고 있으며, 각 단계마다 특정 종류의 콜백을 처리한다는 것을 보여줍니다.

실무 적용 사례

이벤트 루프에 대한 이해는 단순히 이론에 그치지 않고, 실제 애플리케이션 개발에서 다음과 같은 중요한 영향을 미칩니다.

UI 응답성 유지 (브라우저): 웹 애플리케이션에서 복잡한 계산이나 대용량 데이터 처리와 같은 시간이 오래 걸리는 작업을 메인 스레드에서 직접 수행하면 UI가 멈추는 "버벅임" 현상이 발생합니다. 이벤트 루프를 이해하면 이러한 작업을 Web Workers로 오프로드하거나, setTimeout(..., 0)을 사용하여 작업을 작은 청크로 분할하고 이벤트 루프에게 UI 업데이트 기회를 주어 응답성을 유지할 수 있습니다.
Node.js 서버 성능 최적화: Node.js는 단일 스레드에서 비동기 I/O를 통해 높은 처리량을 달성합니다. 개발자가 실수로 데이터베이스 쿼리나 파일 시스템 접근 같은 I/O 작업을 동기적으로 처리하거나, CPU를 많이 사용하는 작업을 메인 스레드에서 블로킹하면 서버 전체의 성능이 저하될 수 있습니다. 이벤트 루프의 원리를 알아야 비동기 API를 올바르게 활용하고, cluster 모듈이나 외부 워커 프로세스를 통해 CPU 바운드 작업을 효율적으로 분산할 수 있습니다.
애니메이션 및 게임 개발: 웹 기반 애니메이션이나 게임에서 requestAnimationFrame은 브라우저의 화면 재생 빈도에 맞춰 콜백을 실행하도록 예약하여 부드러운 애니메이션을 구현하는 데 사용됩니다. 이는 이벤트 루프가 다음 프레임을 그릴 준비가 되었을 때 콜백을 실행하도록 스케줄링하는 메커니즘을 활용하는 것입니다.
스트리밍 데이터 처리: Node.js에서 파일 스트리밍이나 네트워크 스트리밍을 처리할 때, Readable 및 Writable 스트림은 이벤트 기반으로 동작합니다. 데이터가 준비되면 data 이벤트가 발생하고, 이는 이벤트 루프를 통해 처리됩니다. 이를 통해 메모리 오버헤드 없이 대용량 데이터를 효율적으로 처리할 수 있습니다.

자주 하는 실수와 해결법

실수 1: 이벤트 루프 블로킹 (Blocking the Event Loop)

문제: 자바스크립트는 싱글 스레드이기 때문에, 콜 스택에서 시간이 오래 걸리는 동기 작업을 수행하면 이벤트 루프가 다음 콜백 큐의 작업을 가져올 수 없게 됩니다. 이는 UI를 멈추게 하거나(브라우저), 서버의 모든 요청 처리를 지연시켜(Node.js) 애플리케이션의 응답성을 심각하게 저하시킵니다.

// 브라우저 환경에서 10억 번 반복하는 무거운 작업
function blockEventLoop() {
  let i = 0;
  while (i < 1000000000) { // 10억 번 반복
    i++;
  }
  console.log('무거운 작업 완료');
}

console.log('시작');
blockEventLoop(); // 이 함수가 실행되는 동안 UI는 멈춥니다.
console.log('끝');
// '끝'이 출력되기 전까지 화면 클릭, 스크롤 등 모든 UI 상호작용이 멈춥니다.

해결법:

작업 분할: 무거운 작업을 작은 단위로 쪼개 setTimeout(..., 0)이나 setImmediate (Node.js)를 사용하여 비동기적으로 실행합니다. 이는 이벤트 루프에게 중간에 다른 작업을 처리할 기회를 줍니다.
Web Workers (브라우저): CPU 집약적인 작업을 메인 스레드와 완전히 분리된 별도의 스레드에서 실행합니다. 작업이 완료되면 postMessage로 결과를 메인 스레드에 전달합니다.
비동기 API 사용: 파일 I/O, 네트워크 요청 등은 항상 비동기 API를 사용합니다.
Node.js Cluster 모듈: Node.js 서버에서 CPU 바운드 작업을 처리할 때는 cluster 모듈을 사용하여 여러 코어에서 애플리케이션 인스턴스를 실행하고 로드를 분산합니다.

// 작업 분할 예시 (브라우저/Node.js)
function nonBlockingWork(count) {
  let i = 0;
  function doChunk() {
    const start = Date.now();
    while (i < count && Date.now() - start < 50) { // 50ms 이내로 작업
      i++;
    }
    if (i < count) {
      console.log(`${i}까지 처리, 다음 청크 예약`);
      setTimeout(doChunk, 0); // 이벤트 루프에게 제어권 양보
    } else {
      console.log('무거운 작업 완료');
    }
  }
  doChunk();
}

console.log('시작');
nonBlockingWork(1000000000); // UI 블로킹 없이 진행됩니다.
console.log('끝');

실수 2: Microtask/Macrotask 우선순위 혼동

문제: setTimeout 콜백이 Promise.then 콜백보다 먼저 실행될 것이라고 오해하는 경우가 많습니다. 특히 지연 시간이 0ms인 setTimeout의 경우 더욱 그렇습니다.

setTimeout(() => console.log('setTimeout'), 0);
Promise.resolve().then(() => console.log('Promise'));
// 많은 초급 개발자들이 'setTimeout'이 먼저 나올 것이라고 생각합니다.
// 실제 출력: Promise, setTimeout

해결법:

우선순위 명확히 이해: 이벤트 루프는 콜 스택이 비면 먼저 마이크로태스크 큐의 모든 작업을 처리하고, 그 후에 매크로태스크 큐에서 하나의 작업을 가져와 처리한다는 것을 기억해야 합니다. Promise.then, async/await의 await 다음 부분은 마이크로태스크로 처리됩니다.
Node.js의 process.nextTick: process.nextTick은 마이크로태스크보다도 높은 우선순위를 가지며 현재 실행 중인 콜 스택이 비워진 직후 바로 실행됩니다.

실수 3: 무한 루프 또는 과도한 재귀

문제: 자바스크립트 코드 내에서 무한 루프를 만들거나, 종료 조건 없는 재귀 함수를 호출하면 콜 스택이 계속 쌓여 "Maximum call stack size exceeded" 오류(스택 오버플로우)가 발생하거나, 이벤트 루프가 블로킹됩니다.

// 무한 재귀 (스택 오버플로우 발생)
function infiniteRecursion() {
  infiniteRecursion();
}
// infiniteRecursion();

// 무한 루프 (이벤트 루프 블로킹)
while (true) {
  // 아무것도 하지 않음, CPU 100% 사용
}

해결법:

종료 조건 명시: 재귀 함수에는 반드시 명확한 종료 조건이 있어야 합니다.
비동기 재귀: 재귀 호출 사이에 setTimeout이나 Promise를 사용하여 이벤트 루프에게 제어권을 양보하고 콜 스택을 비워줄 기회를 줍니다.
반복문 최적화: 무한 루프가 발생하지 않도록 반복문의 조건을 신중하게 설계합니다.

더 공부할 리소스 추천

이벤트 루프는 자바스크립트 개발자라면 반드시 깊이 있게 이해해야 할 주제입니다. 다음 리소스들을 통해 더 심층적인 지식을 얻을 수 있습니다.

Philip Roberts: "What the heck is the event loop anyway?" (YouTube): 이벤트 루프를 가장 쉽고 재미있게 설명해주는 고전적인 발표 영상입니다. 시각적인 자료와 비유를 통해 핵심 개념을 명확히 전달합니다. (2014년 영상이지만, 핵심 원리는 여전히 유효합니다.)
- https://www.youtube.com/watch?v=8aGhZQkoFbQ
MDN Web Docs: Concurrency model and the Event Loop: Mozilla 개발자 네트워크의 공식 문서로, 브라우저 환경에서의 이벤트 루프와 동시성 모델에 대해 상세하게 설명합니다.
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/EventLoop
Node.js 공식 문서: The Node.js Event Loop, Timers, and process.nextTick(): Node.js 환경의 이벤트 루프는 브라우저와는 다른 단계들을 가집니다. 이 문서는 Node.js의 각 이벤트 루프 단계와 process.nextTick, setImmediate 등의 동작 방식을 상세히 설명합니다.
- https://nodejs.org/en/docs/guides/event-loop-timers-and-nexttick
"You Don't Know JS Yet" (Async & Performance): Kyle Simpson의 명저 시리즈 중 비동기 프로그래밍과 성능에 관한 책입니다. 이벤트 루프를 포함한 자바스크립트의 비동기 메커니즘을 깊이 있게 다룹니다.

이벤트 루프를 완전히 이해하는 것은 자바스크립트 개발자로서 한 단계 더 성장하는 중요한 전환점이 될 것입니다. 꾸준히 학습하고 실제 코드에 적용해보면서 그 진정한 힘을 느껴보시길 바랍니다.

개념 소개: 이벤트 루프, 왜 중요할까요?

핵심 원리 설명: 이벤트 루프의 춤

코드 예제 2개

예제 1: `setTimeout`과 `Promise`의 우선순위

예제 2: Node.js의 `process.nextTick`과 `setImmediate`

실무 적용 사례

자주 하는 실수와 해결법

실수 1: 이벤트 루프 블로킹 (Blocking the Event Loop)

실수 2: Microtask/Macrotask 우선순위 혼동

실수 3: 무한 루프 또는 과도한 재귀

더 공부할 리소스 추천

비동기 프로그래밍 오해 바로잡기: `async/await`는 멀티스레딩이 아닙니다

웹소켓(WebSocket) 작동 원리: 실시간 양방향 통신의 비밀을 파헤치다

개념 소개: 이벤트 루프, 왜 중요할까요?

핵심 원리 설명: 이벤트 루프의 춤

코드 예제 2개

예제 1: setTimeout과 Promise의 우선순위

예제 2: Node.js의 process.nextTick과 setImmediate

실무 적용 사례

자주 하는 실수와 해결법

실수 1: 이벤트 루프 블로킹 (Blocking the Event Loop)

실수 2: Microtask/Macrotask 우선순위 혼동

실수 3: 무한 루프 또는 과도한 재귀

더 공부할 리소스 추천

비동기 프로그래밍 오해 바로잡기: `async/await`는 멀티스레딩이 아닙니다

웹소켓(WebSocket) 작동 원리: 실시간 양방향 통신의 비밀을 파헤치다

예제 1: `setTimeout`과 `Promise`의 우선순위

예제 2: Node.js의 `process.nextTick`과 `setImmediate`