JavaScript 이벤트 루프와 프로미스 처리 방식
AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

이벤트 루프가 프로미스를 어떻게 처리하는가?

카테고리

프로그래밍/소프트웨어 개발

서브카테고리

웹 개발

대상자

JavaScript 개발자, 비동기 프로그래밍 개념 이해가 필요한 중급자

핵심 요약

  • 이벤트 루프(Event Loop)는 동기 코드와 비동기 작업(프로미스, setTimeout 등)의 실행 순서를 조절
  • 프로미스의 .then()마이크로태스크 큐(Microtask Queue)에 등록되어 Call Stack이 비워진 후 실행됨
  • setTimeout매크로태스크 큐(Macrotask Queue)에 등록되어 마이크로태스크보다 우선순위가 낮음

섹션별 세부 요약

1. 프로미스의 동작 원리

  • Promise.resolve()는 비동기 작업을 시뮬레이션
  • .then()마이크로태스크 큐에 등록되어 즉시 실행되지 않음
  • console.log("Start")console.log("End")Promise.then()의 순서로 실행됨

2. 이벤트 루프의 구성 요소

  • Call Stack: 동기 코드 실행
  • Web APIs: setTimeout, DOM 등 비동기 작업 처리
  • Callback Queue: 마이크로태스크와 매크로태스크 처리
  • Microtask Queue: .then()queueMicrotask() 등 마이크로태스크 저장

3. 마이크로태스크 vs 매크로태스크 우선순위

  • setTimeout(..., 0)매크로태스크로 처리되어 마이크로태스크보다 뒤에 실행
  • Promise.then()마이크로태스크로 처리되어 즉시 실행
  • 예제: console.log("Start")console.log("End")Promise.then()setTimeout

4. 실무 적용 사례

  • 비동기 작업의 순서를 제어하기 위해 마이크로태스크를 활용
  • Promise.resolve().then()Call Stack이 비워진 후 실행됨
  • setTimeout매크로태스크로 처리되므로 마이크로태스크보다 늦게 실행

결론

  • 프로미스의 .then()은 마이크로태스크 큐에 등록되어 즉시 실행되지 않음
  • 이벤트 루프의 우선순위를 이해하면 비동기 코드의 실행 순서를 예측 가능
  • 실무에서 마이크로태스크를 활용해 동기/비동기 작업을 효율적으로 처리해야 함