🔄 07. 이벤트 루프 — JS가 멈추지 않는 이유, 비동기가 작동하는 진짜 원리

🎯 이 섹션을 읽고 나면:

• 콜 스택, 웹 API, 태스크 큐, 마이크로태스크 큐의 관계를 그림으로 설명할 수 있다.
• setTimeout(fn, 0)이 왜 즉시 실행되지 않는지 이유를 안다.
• Promise .then이 setTimeout보다 먼저 실행되는 이유를 설명할 수 있다.

📋 목차

• 📌 이 문서를 읽기 전에
• 🤔 1. 왜 알아야 하는가?
• 🏗️ 2. JS 런타임 아키텍처
  • 단일 스레드의 비밀
  • 콜 스택 (Call Stack)
  • 웹 API & 태스크 큐
  • 마이크로태스크 큐 (Microtask Queue)
• 🔄 3. 이벤트 루프의 동작 순서
  • 실행 우선순위
  • 렌더링 타이밍
• 💼 4. 실무 패턴 및 함정
• 📝 마무리 퀴즈
• 🐣 영철이의 퇴근 일기
• 🔗 더 알아보기

📌 이 문서를 읽기 전에

⏱️ 예상 읽기 시간: 18분(전체) / 핵심 파트만: 11분

🗺️ 이 문서의 흐름
[단일 스레드의 현실] → [콜스택 + 큐 구조] → [마이크로 vs 매크로 태스크] → [실무 적용]

🎯 이 문서를 다 읽으면 할 수 있는 것

• setTimeout(fn, 0) 콜백이 Promise .then보다 나중에 실행되는 이유를 설명한다.
• 긴 동기 작업이 UI를 멈추게 하는 이유와 해결책을 안다.
• queueMicrotask를 언제 쓰는지 이해한다.

🗺️ 이 문서의 배경 세계관: '영수네 커뮤니티'

🐣 영철: "영호 님, 이상한 버그가 있어요. 검색 결과 5천 개를 DOM에 한 번에 렌더링하는 코드를 실행했더니... 브라우저가 완전히 얼어버렸어요! 스크롤도 안 되고, 클릭도 안 되고, 몇 초 지나서야 결과가 뿌려지는데 — 이 동안 유저가 아무것도 못 해요. JavaScript가 싱글 스레드라서 그런 건가요?"

🦁 영호: "정확해. JS는 싱글 스레드야. 무거운 동기 작업이 콜 스택을 차지하면 이벤트 루프가 다른 일을 처리 못 해 — 클릭, 스크롤, 렌더링 전부 멈춰. 이게 이벤트 루프의 작동 방식을 모르면 만나는 대표적인 UX 재앙이야. 오늘 이벤트 루프 내부 구조를 이해하면, 브라우저를 멈추지 않는 코드를 짤 수 있게 돼."

🤔 1. 왜 알아야 하는가?

영숙 님의 UX 이슈 제보가 이 모든 공부의 시작이었다. "버튼 누르면 화면이 3초 동안 얼어요." 그 원인 하나를 파고들면 JS 런타임 전체가 보인다.

JS는 싱글 스레드 다. 한 번에 하나의 작업만 실행할 수 있다. 그런데 어떻게:

• HTTP 요청을 하면서도 화면이 멈추지 않는가?
• 타이머가 만료되면 자동으로 콜백이 실행되는가?
• 클릭, 스크롤 이벤트가 다른 코드와 동시에 처리되는가?

이 모든 것이 이벤트 루프(Event Loop) 가 관리하는 비동기 처리 메커니즘 덕분이다.

🏗️ 2. JS 런타임 아키텍처

단일 스레드의 비밀

┌─────────────────────────────────────────────────────────────┐
│                     JS 런타임 (브라우저)                       │
│                                                              │
│  ┌──────────────┐   ┌──────────────────────────────────┐    │
│  │   JS 엔진    │   │           Web APIs               │    │
│  │  (V8 등)     │   │  (setTimeout, fetch, DOM events) │    │
│  │              │   │                                  │    │
│  │  ┌────────┐  │   │  비동기 작업을 JS 스레드 밖에서   │    │
│  │  │콜 스택 │  │   │  처리 → 완료 시 큐에 콜백 추가   │    │
│  │  └────────┘  │   └──────────────────────────────────┘    │
│  │              │                    │                       │
│  │  ┌────────┐  │   ┌────────────────▼──────────────────┐   │
│  │  │  힙    │  │   │          태스크 큐 (Macro)         │   │
│  │  │(메모리)│  │   │  setTimeout, setInterval, I/O     │   │
│  │  └────────┘  │   └───────────────────────────────────┘   │
│  └──────────────┘                   │                       │
│         ▲                ┌──────────▼──────────────────┐    │
│         │                │      마이크로태스크 큐        │    │
│         │                │  Promise.then, queueMicrotask│    │
│         │                └─────────────────────────────┘    │
│         │                           │                       │
│         └──── 이벤트 루프가 중재 ────┘                       │
└─────────────────────────────────────────────────────────────┘

콜 스택 (Call Stack)

함수가 실행될 때마다 차곡차곡 쌓이는 공간입니다. 영철이가 게시글 2,000개를 한 번에 화면에 그리려다 브라우저를 멈추게 했던 상황을 콜 스택의 관점에서 이해해 보겠습니다.

function a() { b(); }
function b() { c(); }
function c() { console.log("실행!"); }
 
a();
 
// 콜 스택 변화:
// [GEC] → [GEC, a] → [GEC, a, b] → [GEC, a, b, c]
// "실행!" 출력
// [GEC, a, b, c] → [GEC, a, b] → [GEC, a] → [GEC] → []
// 스택이 비워지면 이벤트 루프가 큐를 확인

웹 API & 태스크 큐

setTimeout이나 fetch 같은 작업은 JS 엔진 밖에서 처리됩니다. 작업이 끝나면 콜백 함수들이 '줄'을 서서 기다리는데, 이곳이 바로 태스크 큐입니다.

console.log("동기 1");
 
setTimeout(() => {
  console.log("타이머 콜백"); // 태스크 큐 → 콜 스택이 빌 때 실행
}, 0);
 
console.log("동기 2");
 
// 출력 순서:
// "동기 1"  — 콜 스택에서 즉시
// "동기 2"  — 콜 스택에서 즉시
// "타이머 콜백" — 콜 스택이 비워진 후 태스크 큐에서

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

Promise.then, queueMicrotask, MutationObserver는 마이크로태스크 큐 에 들어간다. 이 큐는 태스크 큐보다 우선순위가 높다.

🔄 3. 이벤트 루프의 동작 순서

실행 우선순위

이벤트 루프는 정해진 순서에 따라 큐를 확인합니다. 특히 마이크로태스크 큐는 '특권층'과 같아서, 일반 태스크 큐보다 먼저, 그리고 완전히 비워질 때까지 처리됩니다.

1. 콜 스택의 동기 코드 실행
2. 콜 스택이 비어지면:
   2-1. 마이크로태스크 큐 전부 소진 (하나씩 꺼내 실행)
        └ 마이크로태스크에서 새 마이크로태스크 추가돼도 전부 처리
   2-2. 렌더링 업데이트 (필요 시, 브라우저)
   2-3. 태스크 큐에서 태스크 하나 꺼내 실행
   2-4. 다시 2-1부터 반복

// 실행 순서 예측 연습
console.log("1️⃣ 동기");
 
setTimeout(() => console.log("4️⃣ 태스크 큐 (setTimeout)"), 0);
 
Promise.resolve()
  .then(() => console.log("3️⃣ 마이크로태스크 (Promise.then)"))
  .then(() => console.log("3️⃣-2 마이크로태스크 (두 번째 then)"));
 
console.log("2️⃣ 동기");
 
// 출력:
// 1️⃣ 동기
// 2️⃣ 동기
// 3️⃣ 마이크로태스크 (Promise.then)   ← 태스크 큐보다 먼저!
// 3️⃣-2 마이크로태스크 (두 번째 then)  ← 마이크로태스크 큐가 빌 때까지
// 4️⃣ 태스크 큐 (setTimeout)          ← 마이크로태스크 다 끝난 후

렌더링 타이밍

브라우저가 화면을 그리는 것도 하나의 '태스크'입니다. 콜 스택이 바쁘면 이 소중한 렌더링 작업조차 뒤로 밀리게 됩니다.

// 영수네 커뮤니티 — 왜 DOM 업데이트가 한 번에 반영되는가?
 
const list = document.getElementById("post-list");
 
// 이 루프는 동기적으로 실행되는 동안 DOM을 100번 조작하지만
// 화면에는 단 한 번만 렌더링된다
for (let i = 0; i < 100; i++) {
  const item = document.createElement("li");
  item.textContent = `게시글 ${i}`;
  list.appendChild(item);
}
// 콜 스택이 비워진 후, 이벤트 루프가 렌더링 업데이트 단계에서 한 번에 반영
 
// ❌ 왜 긴 루프는 UI를 멈추는가?
for (let i = 0; i < 10_000_000; i++) {
  // 10만 번 반복 — 콜 스택이 오랫동안 차있음
  // 이벤트 루프가 렌더링, 클릭, 스크롤을 처리 못함 → UI 멈춤
}

💼 4. 실무 패턴 및 함정

영숙 디자이너의 피드백을 받은 영호 리드 님이 영철이에게 전수한 비법입니다. "영철 님, 무거운 작업을 한꺼번에 하려 하지 말고, 중간중간 숨 쉴 틈(이벤트 루프 제어권)을 줘야 해요."

// ✅ 무거운 작업을 나눠 실행 — UI 멈춤 방지
 
// ❌ 한 번에 처리 — UI 블로킹
function renderAllPosts(posts) {
  posts.forEach((post) => {
    const el = createPostElement(post);
    container.appendChild(el);
  });
}
 
// ✅ 청크 단위 + setTimeout으로 이벤트 루프에 양보
function renderPostsInChunks(posts, chunkSize = 50) {
  let index = 0;
 
  function renderChunk() {
    const chunk = posts.slice(index, index + chunkSize);
    chunk.forEach((post) => {
      const el = createPostElement(post);
      container.appendChild(el);
    });
    index += chunkSize;
 
    if (index < posts.length) {
      setTimeout(renderChunk, 0); // 이벤트 루프에 제어권 반환 → 렌더링 + 이벤트 처리 가능
    }
  }
 
  renderChunk();
}
 
// ✅ requestAnimationFrame — 렌더링 직전에 실행 (애니메이션에 최적)
function animate() {
  // 매 프레임(16ms)마다 실행
  updateAnimation();
  requestAnimationFrame(animate); // 다음 프레임 예약
}
requestAnimationFrame(animate);
 
// ✅ queueMicrotask — Promise 오버헤드 없이 마이크로태스크 큐에 추가
queueMicrotask(() => {
  console.log("마이크로태스크로 실행");
});
// Promise.resolve().then(fn)과 동일하지만 더 명시적이고 가벼움

setTimeout(fn, 0) 패턴의 실제 의미:

setTimeout(fn, 0)은 "지금 당장"이 아니라 "현재 실행 중인 동기 코드와 마이크로태스크가 전부 끝난 뒤, 다음 렌더링 이후에" 실행한다는 의미다. UI 업데이트나 DOM 읽기 작업을 현재 렌더링 이후로 미룰 때 유용하다.

📝 마무리 퀴즈

Q1. 아래 코드의 출력 순서를 정확히 예측하라.

console.log("A");
 
setTimeout(() => console.log("B"), 0);
 
Promise.resolve().then(() => {
  console.log("C");
  setTimeout(() => console.log("D"), 0);
});
 
console.log("E");

✅ 정답: A, E, C, B, D

💡 상세 해설:

• A: 동기 코드 즉시 실행
• setTimeout B: 태스크 큐에 추가 (0ms 후 큐에 들어감)
• Promise.resolve().then(...): 마이크로태스크 큐에 콜백 추가
• E: 동기 코드 즉시 실행
• 콜 스택이 빔 → 마이크로태스크 큐 처리:
  • C 출력, 그리고 setTimeout D가 태스크 큐에 추가됨
• 마이크로태스크 큐가 빔 → 렌더링 → 태스크 큐 처리:
  • B 출력 (먼저 등록된 setTimeout)
  • 다시 마이크로태스크 큐 처리(없음) → 렌더링 → D 출력
• 📌 핵심 기억법: "동기 → 마이크로태스크 전부 → 렌더링 → 태스크 하나 → 다시 마이크로태스크"

Q2. 긴 동기 루프가 UI를 멈추는 이유와 해결책은?

✅ 정답: 콜 스택이 비워지지 않아 이벤트 루프가 렌더링과 이벤트 처리를 못 한다. setTimeout(fn, 0) 청크 분할 또는 requestAnimationFrame으로 처리를 나눠야 한다.

💡 상세 해설:

• 이벤트 루프는 콜 스택이 완전히 비어야만 다음 작업(렌더링, 이벤트 처리)을 수행한다.
• 10만 번 반복하는 루프가 실행 중이면, 그 동안 클릭, 스크롤, 화면 업데이트 전부 차단된다.
• 해결책 1: setTimeout(fn, 0)으로 청크 분할 — 매 청크 후 이벤트 루프에 제어권 반환
• 해결책 2: requestAnimationFrame — 프레임 단위로 분할
• 해결책 3: Web Worker — 별도 스레드에서 무거운 연산 처리 (UI 스레드에 영향 없음)
• 📌 핵심 기억법: "긴 동기 작업은 이벤트 루프를 굶긴다. 중간중간 setTimeout(0)으로 먹이를 줘라."

Q3. 영철이의 테스트 타임 — 영숙 디자이너의 UX 리뷰

영숙 님이 걱정스러운 목소리로 말합니다. "영철 님, 검색 결과가 뜰 때 화면이 0.5초 정도 뚝뚝 끊겨 보여요. 클릭도 잘 안 먹히는 것 같고요. 이거 개선할 방법이 있을까요?"

영철이의 코드: 검색 결과 2000개를 루프로 DOM에 직접 추가. 어떻게 UX를 개선해야 하는가?

✅ 정답: 청크 단위 렌더링 + setTimeout(fn, 0)으로 이벤트 루프에 주기적으로 제어권을 양보하거나, 가상 스크롤(Virtual Scroll)을 도입한다.

💡 상세 해설:

// ✅ 청크 분할 렌더링
function renderResults(results) {
  const CHUNK_SIZE = 50;
  let index = 0;
 
  function renderNext() {
    const end = Math.min(index + CHUNK_SIZE, results.length);
    for (; index < end; index++) {
      appendItem(results[index]);
    }
    if (index < results.length) {
      requestAnimationFrame(renderNext); // 다음 프레임에 이어서
    }
  }
 
  renderNext();
}

• 매 50개 렌더링 후 requestAnimationFrame으로 제어권 반환 → 중간중간 화면이 업데이트되어 사용자는 점진적으로 내용을 볼 수 있음
• 가상 스크롤: 화면에 보이는 항목만 DOM에 유지 (react-window, tanstack-virtual 등) — 2000개를 한 번에 DOM에 넣지 않는 근본적 해결책
• 📌 핵심 기억법: "DOM에 한 번에 2000개 넣는 건 폭탄 투하다. 프레임 단위로 나눠 넣거나, 가상 스크롤로 보이는 것만 렌더링해라."

🐣 영철이의 퇴근 일기

오늘 이벤트 루프 배우면서 진짜로 "아, JS가 이렇게 굴러가는구나!" 하는 느낌이 들었다. 그동안 비동기가 '어떻게 돌아가는지'를 감으로만 알았는데, 오늘은 콜 스택 → 마이크로태스크 큐 → 태스크 큐 순서가 머릿속에 그려졌다.

검색 결과 2000개 렌더링 버그... 사실 저거 내가 만든 코드야. 영숙 님이 UX 리뷰에서 잡아줘서 민망했는데, 이제 왜 UI가 멈췄는지 이해가 된다. 이번 주에 requestAnimationFrame 써서 수정할 거다.

💡 오늘의 교훈: "자바스크립트는 싱글 스레드지만, 이벤트 루프 덕분에 우리에게 쾌적한 비동기 환경을 선사합니다. 콜 스택을 너무 오래 독점하여 이벤트 루프를 굶기지 마세요. 무거운 작업은 잘게 나누는 것이 진정한 시니어의 미덕입니다."

퇴근하고 한강 산책하면서 머릿속으로 실행 순서 시뮬레이션 해봤다. 이제 setTimeout(fn, 0)이 왜 "즉시"가 아닌지 완전히 이해됐다. 오늘은 뿌듯하게 잘 수 있을 것 같다.

🔗 더 알아보기

• MDN — Event loop
• Jake Archibald — Tasks, microtasks, queues and schedules
• Philip Roberts — What the heck is the event loop anyway? (JSConf EU)