AI Store에서 AI코딩으로 만들어진 앱을 만나보세요!
지금 바로 방문하기

JavaScript 이벤트 루프 이해

카테고리

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

서브카테고리

웹 개발

대상자

  • JavaScript 개발자 및 웹 프론트엔드/백엔드 개발자
  • 비동기 프로그래밍, 이벤트 루프 메커니즘 이해가 필요한 중급 이상 개발자
  • setTimeout, Promise, fetch 등 비동기 API 사용자

핵심 요약

  • JavaScript는 단일 스레드로 동작하지만, 비동기 작업은 Web APIs를 통해 처리
  • Microtasks(Promise, MutationObserver)는 Macrotasks(setTimeout, setInterval)보다 이벤트 루프에서 우선순위가 높음
  • 이벤트 루프(Event Loop)는 call stack이 비어 있을 때 callback queue에서 작업을 순차적으로 처리

섹션별 세부 요약

  1. call stack과 동기 작업
  • call stack은 동기 코드(줄 단위 실행)를 처리
  • setTimeout, fetch 등 비동기 코드는 call stack이 아닌 Web APIs에서 실행
  1. Web APIs와 비동기 처리
  • 브라우저가 제공하는 Web APIssetTimeout, fetch, Promise 등 비동기 작업을 처리
  • 작업 완료 시 콜백은 callback queue에 추가
  1. Microtasks와 Macrotasks의 우선순위
  • Microtasks(Promise, queueMicrotask)는 Macrotasks(setTimeout, UI 렌더링)보다 높은 우선순위
  • 이벤트 루프는 Microtasks를 먼저 처리
  1. 이벤트 루프 동작 방식
  • 이벤트 루프는 call stack이 비었을 때 callback queue에서 작업을 call stack으로 이동
  • MicrotasksMacrotasks보다 먼저 처리

결론

  • 비동기 작업은 Promiseasync/await 사용을 권장
  • Microtasks 우선순위를 고려해 MutationObserverqueueMicrotask를 사용할 경우, UI 렌더링보다 빠르게 실행됨
  • 이벤트 루프 이해는 비동기 코드 성능 최적화에 핵심