매일 메일 CS : 이벤트 루프

kimsnmyng·2024년 12월 16일

Front-End CS

목록 보기

5/79

출처: 매일 메일

자바스크립트의 이벤트 루프와 태스크 큐

자바스크립트의 이벤트 루프는 자바스크립트가 싱글 스레드 기반 언어임에도 불구하고 비동기 작업을 처리할 수 있게 해주는 중요한 메커니즘이다.

자바스크립트는 기본적으로 한 번에 하나의 작업만 처리할 수 있다. 하지만 이벤트 루프가 콜 스택(Call Stack)과 태스크 큐(Task Queue)를 관리하면서 비동기 작업이 완료되면 그 결과를 처리할 수 있게 도와준다.

콜 스택: 현재 실행 중인 코드들이 쌓이는 곳이다.
태스크 큐: 비동기 작업이 완료되면 그 결과를 대기시키는 곳이다.

이벤트 루프의 동작 원리

이벤트 루프의 동작을 설명하기 위해 간단한 예로 setTimeout(callback, 0)을 들어보자.

자바스크립트 코드에서 setTimeout(callback, 0)을 호출하면, 이 콜백 함수는 바로 실행되는 것이 아니라 웹 API에 의해 타이머가 설정된다.
타이머가 0밀리초 후에 만료되면 콜백 함수가 태스크 큐에 추가된다.
그 후, 콜 스택이 비어 있는 시점에 이벤트 루프가 태스크 큐에서 대기 중인 callback을 꺼내서 실행한다.

따라서 setTimeout(callback, 0)을 호출해도 현재 실행 중인 모든 동기 작업들이 완료된 후에야 그 콜백이 실행된다. 이 때문에 setTimeout(callback, 0)을 사용하면 코드의 실행을 다음 이벤트 루프 사이클로 미룰 수 있다.

태스크 큐의 종류

태스크 큐는 크게 매크로태스크 큐(Macro Task Queue)와 마이크로태스크 큐(Micro Task Queue)로 나뉜다.

매크로태스크 큐

매크로태스크 큐에는 setTimeout, setInterval 같은 일반적인 비동기 작업들이 대기한다.
이벤트 루프는 콜 스택과 마이크로태스크 큐의 작업을 모두 처리한 후, 매크로태스크 큐에서 하나씩 작업을 처리한다.

마이크로태스크 큐

마이크로태스크 큐에는 Promise.then()과 같이 중요도가 높은 작업들이 대기한다.
마이크로태스크 큐는 매크로태스크 큐보다 우선순위가 높다.
이벤트 루프는 콜 스택이 비어있는 시점에 매크로태스크를 실행하기 이전에 마이크로태스크 큐에 있는 모든 작업들을 먼저 처리한다.

이벤트 루프의 중요성

이벤트 루프 덕분에 자바스크립트는 UI 업데이트나 사용자 입력 처리를 수행하면서도, 비동기 작업을 블로킹 없이 병렬적으로 처리할 수 있다.

추가 설명: 태스크 처리 순서

자바스크립트 엔진은 먼저 콜 스택에서 현재 실행 중인 동기 코드를 모두 처리한다.
이후, 마이크로태스크 큐에 대기 중인 모든 작업들을 순서대로 처리한다.
마지막으로, 매크로태스크 큐에서 하나의 작업을 꺼내서 처리한다.
위 과정을 반복하며 이벤트 루프가 계속 순환한다.

주요 예제


console.log('Start');
setTimeout(() => {
console.log('Macro Task');
}, 0);
Promise.resolve().then(() => {
console.log('Micro Task');
});
console.log('End');