이벤트 루프와 태스크 큐 설명

 

 

 

이벤트 루프(Event Loop)와 태스크 큐(Task Queue)는 JavaScript가 싱글 스레드 언어임에도 불구하고 비동기 작업을 가능하게 하는 핵심 개념이다

JavaScript의 실행 환경인 웹 브라우저나 Node.js에서는 이벤트 루프를 사용하여 비동기 콜백, 이벤트, 타이머 등을 관리한다

 

이벤트 루프(Event Loop)

이벤트 루프는 콜 스택(Call Stack), 태스크 큐(Task Queue), 마이크로태스크 큐(Microtask Queue) 등 여러 가지 컴포넌트를 순회하며, 실행할 태스크가 있는지 반복적으로 확인한다

이벤트 루프의 주요 목적은 콜 스택이 비어 있을 때, 태스크 큐나 마이크로태스크 큐에 있는 작업을 콜 스택으로 옮겨 실행하는 것

 

태스크 큐(Task Queue)

태스크 큐(또는 이벤트 큐)는 비동기 작업의 콜백 함수를 순서대로 보관하는 대기열이다

예를 들어, setTimeout, setInterval, DOM 이벤트 처리기 등록에 의한 콜백 함수들이 이곳에 추가된다

이벤트 루프는 콜 스택이 비었을 때 태스크 큐의 첫 번째 콜백을 콜 스택으로 이동시켜 실행한다

 

마이크로태스크 큐(Microtask Queue)

마이크로태스크 큐는 자바스크립트에서 비동기 작업을 관리하는 메커니즘 중 하나다

프로미스(Promise)의 .then(), .catch(), .finally() 메서드 콜백이나 MutationObserver 콜백 같은 마이크로태스크를 보관하는 대기열이다

마이크로태스크 큐에 들어간 작업들은 현재 실행 중인 태스크(Task)가 완료되고 호출 스택(Call Stack)이 비어있을 때 즉시 실행된다

따라서 마이크로태스크 큐에 있는 모든 작업이 순차적으로 실행될 때까지,

이벤트 루프는 다음 태스크로 넘어가지 않는다

마이크로태스크 큐는 현재 실행 중인 작업이 끝나자마자 바로 처리되어야 하는 중요한 비동기 작업들을 순차적으로 실행하기 위한 대기열로, 자바스크립트가 비동기 작업을 효율적으로 관리하고, 애플리케이션의 동작을 부드럽게 만드는 데 기여한다

 

이벤트 루프의 동작 과정

• 콜 스택 확인
  • 콜 스택에 실행 중인 실행 컨텍스트(함수 호출 등)가 있는지 확인
• 마이크로태스크 큐 확인
  • 콜 스택이 비어 있으면, 마이크로태스크 큐에 있는 모든 태스크를 순서대로 실행
• 태스크 큐 확인
  • 마이크로태스크 큐가 비었으면, 태스크 큐에서 하나의 태스크를 콜 스택으로 옮겨 실행
  • 태스크 큐에 남아 있는 다른 태스크들은 다음 사이클에서 처리됨
• 렌더링
  • 필요한 경우, 웹 브라우저는 화면을 렌더링(이 단계는 브라우저 환경에서만 적용됨)

 

이벤트 루프와 태스크 큐의 개념을 이해하는 것은 JavaScript의 비동기 프로그래밍을 다룰 때 매우 중요하다

이를 통해 애플리케이션의 성능을 최적화하고, 예기치 않은 동작을 방지할 수 있다