2026-02-20

이벤트 루프(Event Loop)

이벤트 루프란

자바스크립트가 싱글 스레드 환경에서 비동기 작업을 처리하기 위한 실행 순서 관리 메커니즘

• 자바스크립트는 한 번에 하나의 코드만 실행할 수 있다.
• DOM 이벤트 처리, fetch 네트워크 요청, setTimeout, Promise, async/await 등
• → 비동기 로직을 관리 (같은 작업을 동시에 사용하는 것처럼)
• ⇒ 이걸 가능하게 만드는 구조 = 이벤트 루프

왜 필요한가?

• 자바스크립트는 싱글 스레드다.
  • 한 번에 하나의 작업만 수행 가능
  • 오래 걸리는 작업이 있으면 전체가 멈춘다

하지만 브라우저에는

• Web API (타이머, 네트워크, DOM 이벤트)가 따로 존재
• 비동기 작업은 Web API가 처리하고,
• 완료되면 대기열에 넣는다.
• ⇒ 이벤트 루프는 그 대기열을 관리하는 역할

이벤트 루프의 구성 요소

!https://miro.medium.com/1%2AeFvdHDgxCM6C20Zt80I7Jg.png

!https://miro.medium.com/1%2AVxTsolp7kKaoCuF1bHKavw.png

!https://miro.medium.com/1%2AXVqPA2z1dTHJWm2TwIAsBw.gif

• Call Stack
  • 현재 실행 중인 코드가 쌓이는 공간
  • 동기 코드 실행
• Web APIs
  • 브라우저가 관리하는 비동기 작업 영역
  • setTimeout, fetch, DOM 이벤트 등
• Task Queue (Macrotask Queue)
  • setTimeout
  • setInterval
  • DOM 이벤트
• Microtask Queue
  • Promise.then
  • async/await
  • queueMicrotask
• Event Loop
  • Stack이 비어 있는지 확인
  • 큐에 있는 작업을 Stack으로 이동

실행 순서

1. Call Stack 실행
2. Stack이 비면
3. Microtask Queue 먼저 처리
4. Microtask가 모두 끝나면
5. Task Queue 처리

예제로 이해하기

console.log("1");

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

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

console.log("4");

실행 순서:

1
4
3
2

• 동기 코드 먼저 실행
• Microtask(Promise) 먼저 처리
• 그 다음 Macrotask(setTimeout)

async/await와 이벤트 루프

async function test() {
  console.log("A");
  await Promise.resolve();
  console.log("B");
}

• await는 Promise를 기다림
• 그 다음 코드는 Microtask로 등록됨
• await는 스레드를 멈추는 게 아니라
• Promise 기반 비동기 처리

이벤트 전파와의 차이

⇒ 완전히 다른 개념

요약

• JS는 싱글 스레드 언어
• 이벤트루프는 JS 비동기 처리를 위해 사용하는 메커니즘
• 콜스택과 테스트 큐 관리
• 콜 스택이 비어있을때 태스크 큐에서 콜백함수를 꺼내와 콜 스택에 쌓아 실행, 콜백함수를 비동기 처리하는데 사용

참고자료

• https://inpa.tistory.com/entry/%F0%9F%94%84-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9D%B4%EB%B2%A4%ED%8A%B8-%EB%A3%A8%ED%94%84-%EA%B5%AC%EC%A1%B0-%EB%8F%99%EC%9E%91-%EC%9B%90%EB%A6%AC
• https://yozm.wishket.com/magazine/detail/3393/
• https://yong-nyong.tistory.com/71