1. 이벤트 루프(Event Loop)
이벤트 루프는 JavaScript의 비동기 동작의 핵심입니다. JavaScript는 단일 스레드로 동작하는 언어이기 때문에, 한 번에 하나의 작업만을 처리할 수 있습니다. 그렇다면 어떻게 비동기 작업들을 관리하고 실행할까요? 바로 이벤트 루프를 통해 가능합니다.
이벤트 루프의 주된 역할은 실행 스택이 비어있는지 확인하고, 태스크 큐에 있는 작업을 실행 스택으로 가져와 실행하는 것입니다.
2. 매크로 태스크(Macrotask)와 마이크로 태스크(Microtask)
태스크 큐는 크게 두 부류로 나누어집니다: 매크로 태스크 큐와 마이크로 태스크 큐.
- 매크로 태스크(Macrotask)
예시: setTimeout, setInterval, setImmediate, UI 렌더링 등
이벤트 루프는 매크로 태스크 큐에 있는 첫 번째 작업을 가져와 실행하고, 그 작업이 완료되면 다음 작업으로 넘어갑니다.
- 마이크로 태스크(Microtask)
예시: Promise, MutationObserver, process.nextTick (Node.js 환경)
매크로 태스크 하나가 완료되면, 그 후 모든 마이크로 태스크가 실행됩니다. 즉, 모든 마이크로 태스크가 완료될 때까지 다음 매크로 태스크로 넘어가지 않습니다.
3. 작동 원리
- 실행 스택이 비었을 때, 이벤트 루프는 마이크로 태스크 큐에 있는 모든 작업을 순차적으로 실행합니다.
- 모든 마이크로 태스크가 완료된 후, 이벤트 루프는 매크로 태스크 큐에서 첫 번째 작업을 가져와 실행합니다. 해당 매크로 태스크가 완료되면, 위의 과정을 반복합니다.
4. 이벤트 루프의 작동 원리 예제
아래는 setTimeout과 Promise를 사용한 간단한 코드입니다.
console.log('Script 시작');
setTimeout(function() {
console.log('setTimeout 실행');
}, 0);
Promise.resolve().then(function() {
console.log('Promise 실행');
});
console.log('Script 종료');
출력결과 :
Script 시작
Script 종료
Promise 실행
setTimeout 실행
- console.log('Script 시작');이 실행 스택에 먼저 들어가 출력됩니다.
- setTimeout의 콜백은 0ms 지연으로 매크로 태스크 큐에 등록됩니다.
- Promise.resolve().then()의 콜백은 마이크로 태스크 큐에 등록됩니다.
- console.log('Script 종료');가 실행되어 출력됩니다.
- 현재 실행 스택이 비어 있으므로, 이벤트 루프는 큐를 확인합니다.
여기서 마이크로 태스크 큐에 먼저 들어간 Promise의 콜백이 먼저 실행되어 "Promise 실행"이 출력됩니다. - 마이크로 태스크 큐가 비면, 매크로 태스크 큐에서 setTimeout의 콜백이 실행되어 "setTimeout 실행"이 출력됩니다.
이렇게 이벤트 루프는 매크로와 마이크로 태스크 큐의 작업들을 순차적으로 실행하며, JavaScript 코드는 비동기적으로 동작하게 됩니다.
결론
JavaScript의 이벤트 루프는 복잡한 비동기 작업을 단순화하여, 개발자들이 효율적인 코드를 작성할 수 있도록 돕습니다. 매크로 태스크와 마이크로 태스크의 개념을 이해하면 JavaScript의 동작 원리를 더 깊게 파악할 수 있으므로, 비동기 코드의 동작을 정확히 예측하고 최적화하는 데 도움이 됩니다.
REFERENCE
1. https://2014.jsconf.eu/speakers/philip-roberts-what-the-heck-is-the-event-loop-anyway.html
2. https://developer.mozilla.org/ko/docs/Web/JavaScript/EventLoop
