JavaScript 이벤트 루프 이해
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- JavaScript 개발자 및 웹 프론트엔드/백엔드 개발자
- 비동기 프로그래밍, 이벤트 루프 메커니즘 이해가 필요한 중급 이상 개발자
setTimeout
,Promise
,fetch
등 비동기 API 사용자
핵심 요약
- JavaScript는 단일 스레드로 동작하지만, 비동기 작업은
Web APIs
를 통해 처리 Microtasks
(Promise
,MutationObserver
)는Macrotasks
(setTimeout
,setInterval
)보다 이벤트 루프에서 우선순위가 높음- 이벤트 루프(
Event Loop
)는call stack
이 비어 있을 때callback queue
에서 작업을 순차적으로 처리
섹션별 세부 요약
- call stack과 동기 작업
call stack
은 동기 코드(줄 단위 실행)를 처리setTimeout
,fetch
등 비동기 코드는call stack
이 아닌Web APIs
에서 실행
- Web APIs와 비동기 처리
- 브라우저가 제공하는
Web APIs
는setTimeout
,fetch
,Promise
등 비동기 작업을 처리 - 작업 완료 시 콜백은
callback queue
에 추가
- Microtasks와 Macrotasks의 우선순위
Microtasks
(Promise
,queueMicrotask
)는Macrotasks
(setTimeout
, UI 렌더링)보다 높은 우선순위- 이벤트 루프는
Microtasks
를 먼저 처리
- 이벤트 루프 동작 방식
- 이벤트 루프는
call stack
이 비었을 때callback queue
에서 작업을call stack
으로 이동 Microtasks
는Macrotasks
보다 먼저 처리
결론
- 비동기 작업은
Promise
및async/await
사용을 권장 Microtasks
우선순위를 고려해MutationObserver
나queueMicrotask
를 사용할 경우, UI 렌더링보다 빠르게 실행됨- 이벤트 루프 이해는 비동기 코드 성능 최적화에 핵심