개발자 강화/프론트엔드

🌟[매일메일] 자바스크립트의 Event Loop와 테스트 큐란? (FE.250122/241218)

suyeonshim 2025. 1. 28. 00:05

 Javascript는 싱글 스레드 언어.

  • 한 번에 한 작업만 처리할 수 있는 단일 콜 스택을 가짐. (원래 동기적 언어)
  • 브라우저나 Node.js 환경이 제공하는 비동기 처리 매커니즘을 활용해 여러 작업을 동시에 수행 가능함.
    • 브라우저: 자바스크립트 엔진은 setTimeout, fetch 등을 WebAPI에 넘겨 비동기 처리. 완료 시 테스크 큐로 이동. 
    • Node.js: 이벤트 루프가 콜 스택이 비어있는 지 확인하고 테스트 큐에서 대기중인 작업을 콜 스택으로 옮겨 실행.
    • 콜 스택: 현재 실행 중인 코드가 쌓임, 테스크 큐: 비동기 작업이 완료되면 그 결과를 대기시키는 곳
  • 이벤트 루프 덕에 UI 업데이트나 사용자 입력 처리를 수행하면서도, 비동기 작업을 블로킹 없이 병렬적 처리 가능함.
  • setTimeout(callback,0) 예시
    • 자바스크립트에서 setTimeout(callback, 0) 호출
    • webAPI에 의해 타이머가 설정되고, 타이머가 0ms 후 만료되면 callback 함수가 태스크 큐에 추가
    • 콜 스택이 비어있는 시점에 이벤트 루프가 태스크 큐에서 대기 중인 callback을 꺼내서 실행
    • 따라서, 현재 실행 중인 모든 동기 작업이 완료된 후에 callback 함수가 실행됨.
    • setTimeout을 사용하면 대기 시간을 0ms로 설정하더라도, 코드 실행을 다음 이벤트 루프 사이클로 미룰 수 있음. 

 

테스크 큐의 종류.

  • Macro(매크로) 테스크 큐: 일반적인 비동기 작업의 콜백이 저장되는 큐
    • setTimeout, setInterval, I/O 작업, 이벤트 핸들러 등 작업 완료 후 매크로 테스트 큐에 콜백을 대기시킴.
    • 이벤트 루프 한 번의 반복마다 하나의 테스크만 처리됨. UI 업데이트나 다른 작업과 균형있게 진행 됨. 
    • 매크로 테스크 하나 처리 후, 다른 매크로 시작하기 전에 큐에 쌓인 마이크로 테스크 전부 처리
    • 매크로테스크 스케줄링 하기: 지연시간이 0인 setTimeout(f) 사용하기
      • 계산이 복잡한 큰 태스크 하나를 여러 개로 쪼갤 수 있음.
      • 중간중간 사용자 이벤트에 반응하거나, 작업 진척 상태를 화면에 표시해줄 수 있음.
  • Micro(마이크로) 테스크 큐: 더 높은 우선순위가 필요한 비동기 작업들이 대기하는 큐
    • Promise.then(), MutationObserver 등 비동기 콜백이 저장됨
    • 이벤트 루프는 매크로 테스크 실행 전 마이크로 테스크 큐가 비어있는지 먼저 확인하고 매크로로 넘어감.
    • 마이크로테스크 스케줄링 하기: queueMicrotask(f) 사용하기
      • 마이크로테스크 전체가 처리되는 동안 UI 변화나 네트워크 이벤트 핸들링이 일어나지 않음.
      • 렌더링이나 네트워크 요청 작업은 마이크로 테스크가 전부 처리되고 난 직후 처리됨.
      • 함수 비동기적으로 처리할 때 어플리케이션 상태의 일관성이 보장됨.

Event Loop란 무엇인가?

  • task가 들어오길 기다렸다가, task가 들어오면 처리하고, 처리할 게 없으면 잠드는 루프.
  • 과정
    • 매크로테스크 큐에서 가장 오래된 테스크를 꺼내 실행함.
    • 모든 마이크로 테스크를 실행해 큐를 비움. (오래된 것부터 처리함)
    • 렌더링 할 것이 있으면 처리함.
    • 매크로테스크 큐가 비어있으면 새로운 매크로 테스크가 나타날 때까지 기다림.
    • 새로운 매크로테스크가 나타나면 다시 첫 번째 과정으로 돌아가서 반복함.

 

 

출처

[1] 매일메일. 250122. 자바스크립트는 싱글 스레드 언어인데 어떻게 동시에 여러 작업들을 수행하나요? 57번. https://maeil-mail.kr

[2] 자바스크립트 공식 문서. 이벤트 루프와 매크로테스크, 마이크로 테스크 https://ko.javascript.info/event-loop

[3] 매일메일. 241224. 이벤트 루프에 대해서 설명해주세요. 15번. https://maeil-mail.kr