[ JS ] 이벤트 루프( Event Loop )에 대하여

Event Loop에 대한 내용입니다.

이벤트 루프는 자바스크립트를 비롯한 비블록킹 I/O 연산을 포함한 여러 프로그래밍 언어에서 기본적인 개념으로, 주요 실행 스레드를 차단하지 않고 타이머, 네트워크 요청, 사용자 인터렉션 등의 비동기 연산을 효율적으로 처리할 수 있도록 하는 런타임 환경의 중요한 부분입니다.

 

자바스크립트에서 이벤트 루프가 작동하는 방식

• 메인 쓰레드( Main Thread ): 자바스크립트는 싱글 쓰레드이므로 한 번에 하나의 작업만 실행할 수 있습니다. 메인 쓰레드는 자바스크립트 프로그램에서 사용자가 작성한 코드를 실행하는 역할을 합니다.
• 콜 스택( Call Stack ): 콜 스택은 현재 실행 중인 함수나 작업을 추적하는 데이터 구조입니다. 함수가 호출되면 콜 스택에 푸시되고 완료되면 스택에서 제거됩니다. 이 스택은 함수가 호출되고 실행되는 순서를 추적하는데 사용됩니다.
• 콜백 큐( Callback Queue ): 콜백 큐는 콜 스택이 비어 있을 때 실행하기 위해 함수와 작업이 배치되는 큐입니다. 콜백은 타이머, 네트워크 요청 및 사용자 상호 작용과 같은 비동기 작업에서 발생하는 경우가 많습니다.
• 이벤트 루프( Event Loop ): 이벤트 루프는 콜 스택과 콜백 큐를 모니터링하는 연속적인 프로세스입니다. 콜 스택이 비어 있는지 확인합니다. 비어 있으면 이벤트 루프가 콜백 큐에서 첫 번째 함수나 작업을 가져와 실행하기 위해 콜 스택에 푸시합니다.

 

이벤트 루프 예제

console.log("시작");

setTimeout(function () {
  console.log("setTimeout 중간");
}, 0)

console.log("끝");

 

위 내용은 아래와 같습니다.

1. 먼저 시작과 끝은 동기 작업이기 때문에 먼저 콘솔에 기록됩니다.
2. setTimeout은 비동기 작업이기 때문에 아무리 0초의 지연이 있어도 동기 코드가 모두 실행된 후 콜백 큐에 배치가 됩니다.
3. 이벤트 루프는 콜 스택을 검사하여 비어 있는 것을 확인한 다음 큐에서 콜 스택으로 콜을 이동합니다. 이때 setTimeout 중간 내용이 콘솔에 기록됩니다.

 

이벤트 루프를 통해 자바스크립트는 차단되지 않고 반응할 수 있습니다. 이를 통해 메인 쓰레드를 정지하거나 속도를 늦추지 않고 비동기 코드를 실행할 수 있기 때문에 사용자 인터페이스가 대화형으로 유지되고 장시간 실행되는 작업으로 인해 다른 작업이 차단되지 않습니다.

 

이벤트 루프는 타이머, 네트워크 요청 외에도 자바스크립트에서 이벤트, 상호작용, 약속 등을 처리하는 데에도 매우 중요하며, 특히 웹 개발 상황에서 효율적이고 응답성이 높은 자바스크립트 코드를 작성하는 데에는 이벤트 루프의 동작을 이해하는 것이 매우 중요합니다.

 

 

---

 

그림으로 보는 예제