이벤트 루프 (Event Loop)

이벤트 루프 (Event Loop)

이벤트 루프는 자바스크립트의 실행 모델에서 비동기 작업을 효율적으로 처리하기 위한 핵심 메커니즘이며, 자바스크립트는 싱글 스레드 기반 언어로 한 번에 하나의 작업만 실행할 수 있지만, 이벤트 루프 덕분에 비동기 작업을 효과적으로 관리하고, UI를 렌더링하면서도 중단 없이 프로그램을 실행할 수 있다.

 

구성 요소

콜 스택 (Call Stack)

• 함수 호출이 쌓이고, 실행이 끝나면 제거되는 LIFO(Last In, First Out) 구조
• 현재 실행 중인 작업이 위치하며, 동기 코드는 콜 스택에 쌓였다가 순서대로 실행된다.

태스크 큐 (Task Queue)

• 비동기 작업의 콜백 함수가 대기하는 곳
• 태스크 큐에는 매크로태스크와 마이크로태스크라는 두 가지 종류가 있으며, 이벤트 루프는 태스크 큐에서 작업을 하나씩 꺼내 콜 스택이 비어 있는 경우 실행한다.

웹 API

• 타이머, DOM 이벤트, AJAX 요청 등 브라우저가 제공하는 API
• 비동기 작업을 처리한 후 결과(콜백 함수)를 태스크 큐에 전달한다.

 

작동 원리

1. 콜 스택 확인
   • 콜 스택에 작업이 남아 있다면 이를 실행하고, 콜 스택이 비어 있으면 다음 단계를 진행한다.
2. 마이크로태스크 큐 처리
   • 마이크로태스크 큐에 작업이 있다면 모두 처리하며, 마이크로태스크는 매크로태스크보다 우선순위가 높다.
3. 매크로태스크 큐 처리
   • 마이크로태스크 큐가 비어 있는 경우, 매크로태스크 큐에서 작업 하나를 가져와 처리한다.

 

태스크 큐의 종류

1. 매크로태스크 (Macro Task)
   • setTimeout이나 이벤트 리스너 같은 주요 비동기 작업이 등록되는 큐
   • 이벤트 루프는 매크로태스크 큐에서 작업을 하나씩 꺼내어 처리한다.
2. 마이크로태스크 (Micro Task)
   • Promise의 .then과 .catch같은 높은 우선순위 작업이 등록되는 큐
   • 이벤트 루프는 매크로태스크를 실행하기 직전에 마이크로태스크 큐의 모든 작업을 완료한다.

 

실행 순서

console.log("Start"); // 1

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

Promise.resolve()
  .then(() => {
    console.log("Promise 1"); // 3
  })
  .then(() => {
    console.log("Promise 2"); // 4
  });

console.log("End"); // 2

 

1. "Start" 출력 → 동기 코드 실행
2. "End" 출력 → 동기 코드 실행 완료
3. Promise 1 출력 → 마이크로태스크 큐의 작업 실행
4. Promise 2 출력 → 마이크로태스크 큐의 나머지 작업 실행
5. setTimeout 출력 → 매크로태스크 실행

 

이벤트 루프 장점

1. 비동기 처리
   이벤트 루프를 통해 네트워크 요청, 타이머, 사용자 입력 등의 비동기 작업을 동기 코드와 함께 효율적으로 처리할 수 있다.
2. UI 렌더링 최적화
   브라우저의 렌더링 주기와 조화를 이루어 사용자 경험을 방해하지 않도록 설계할 수 있다.
3. 비동기 코드의 순서 보장
   태스크 큐의 규칙에 따라 작업이 순서대로 실행되므로 개발자가 실행 흐름을 예측할 수 있다.

 

자주 하는 실수

• 마이크로태스크와 매크로태스크의 우선순위를 오해
  예를 들어, setTimeout보다 Promise 콜백이 먼저 실행된다는 사실을 잊고 코드 작성
• 블로킹 코드 작성
  긴 동기 작업이 콜 스택을 차지하면 이벤트 루프가 다음 작업을 진행하지 못함