이벤트 루프가 프로미스를 어떻게 처리하는가?
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
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()
은 마이크로태스크 큐에 등록되어 즉시 실행되지 않음 - 이벤트 루프의 우선순위를 이해하면 비동기 코드의 실행 순서를 예측 가능
- 실무에서 마이크로태스크를 활용해 동기/비동기 작업을 효율적으로 처리해야 함