[JavaScript 문법] 27일차: 이벤트 루프와 태스크 큐

이벤트 루프란?

이벤트 루프(Event Loop)는 JavaScript의 비동기 작업을 처리하는 메커니즘입니다. JavaScript는 싱글 스레드로 동작하지만, 이벤트 루프를 통해 비동기 작업을 효율적으로 관리하고 실행할 수 있습니다.

이벤트 루프의 동작 원리

이벤트 루프는 콜 스택(Call Stack)과 태스크 큐(Task Queue)를 지속적으로 감시하면서, 콜 스택이 비어 있을 때 태스크 큐에서 작업을 가져와 실행합니다. 이 과정을 반복하여 비동기 작업을 처리합니다.

기본 흐름

1. 콜 스택: 현재 실행 중인 함수가 쌓이는 스택입니다.
2. 태스크 큐: 비동기 작업의 콜백 함수가 대기하는 큐입니다.
3. 이벤트 루프: 콜 스택이 비어 있을 때 태스크 큐에서 작업을 가져와 실행합니다.

예제

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);

console.log('End');

이 예제에서 출력 순서는 다음과 같습니다:

1. 'Start'
2. 'End'
3. 'Timeout'

마이크로태스크와 매크로태스크

이벤트 루프는 두 가지 태스크 큐를 사용합니다: 마이크로태스크 큐(Microtask Queue)와 매크로태스크 큐(Macrotask Queue).

마이크로태스크

마이크로태스크는 프로미스의 then 핸들러, MutationObserver 콜백 등과 같은 작업을 포함합니다. 마이크로태스크는 매크로태스크보다 높은 우선순위를 가지며, 이벤트 루프는 콜 스택이 비어 있을 때마다 마이크로태스크 큐를 먼저 비웁니다.

예제

console.log('Start');

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');

이 예제에서 출력 순서는 다음과 같습니다:

1. 'Start'
2. 'End'
3. 'Promise'

매크로태스크

매크로태스크는 setTimeout, setInterval, setImmediate, I/O, UI 렌더링 등과 같은 작업을 포함합니다. 매크로태스크는 마이크로태스크보다 낮은 우선순위를 가집니다.

예제

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');

이 예제에서 출력 순서는 다음과 같습니다:

1. 'Start'
2. 'End'
3. 'Promise'
4. 'Timeout'

이벤트 루프의 동작 예제

예제 1

console.log('Start');

setTimeout(() => {
  console.log('Timeout 1');
}, 0);

setTimeout(() => {
  console.log('Timeout 2');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise 1');
}).then(() => {
  console.log('Promise 2');
});

console.log('End');

이 예제에서 출력 순서는 다음과 같습니다:

1. 'Start'
2. 'End'
3. 'Promise 1'
4. 'Promise 2'
5. 'Timeout 1'
6. 'Timeout 2'

예제 2

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 0);

Promise.resolve().then(() => {
  console.log('Promise');
});

console.log('End');

function blockingOperation() {
  for (let i = 0; i < 1000000000; i++) {}
}

blockingOperation();

이 예제에서 출력 순서는 다음과 같습니다:

1. 'Start'
2. 'End'
3. (blockingOperation 실행 완료 후) 'Promise'
4. 'Timeout'

결론

이벤트 루프는 JavaScript의 비동기 작업을 처리하는 핵심 메커니즘입니다. 이번 글에서는 이벤트 루프의 동작 원리, 마이크로태스크와 매크로태스크의 차이점, 그리고 이벤트 루프의 동작 예제에 대해 배웠습니다. 다음 글에서는 AJAX와 Fetch API에 대해 알아보겠습니다.

다음 글에서 만나요!