이벤트 루프는 어떻게 non-blocking 연산을 막힘없이 처리하는가?

자바스크립트 이벤트 루프 파헤치기

• 이를 이해하기 위해서는 자바스크립트 런타임 환경에서의 추가적인 컴포넌트의 역할을 알아야 한다.
• 추가적인 컴포넌트란 Web APIs (브라우저에서) 나 C++ APIs (Node.js) 를 말하며 이를 알아야 한다.

자바스크립트 런타임 환경 컴포넌트 4가지

• Heap: 메모리 할당이 이루어지는 곳
• Stack: 스택 프레임 (함수 호출) 이 저장되고 관리되는 곳
• Task Queue: 비동기 작업의 콜백이 여기에 대기함
• Event Loop: 호출 스택과 작업의 대기열을 확인하는 오케스트레이터

Non-Blocking I/O 는 어떻게 동작하는가?

• 비동기 호출: HTTP 요청, 타이머, Node.js 의 파일 I/O 와 같은 비동기 함수가 호출되면 Javascript 는 이 작업을 자체 스레드 밖인 브라우저나 Node.js 로 전송하여 환경에서 제공하는 다른 스레드에서 처리하도록 한다.
• 계속 실행: 이런 연산이 비동기적으로 처리되는 동안 자바스크립트의 호출 스택은 연산이 완료될 때까지 기다리지 않고 다른 코드를 계속 실행할 수 있다. 이를 논 블로킹이라고 한다.
• 콜백 및 작업 대기열: 비동기 작업이 완료되면 해당 콜백 함수는 작업 대기열에 배치된다.
• 이벤트 루프의 역할: 지속적으로 호출 스택을 확인하며, 호출 스택이 비어 있으면 이벤트 루프는 작업 대기열에서 첫번째 콜백을 가져와 호출 스택에 푸시한다.
  • 호출 스택이 비어있다는 것은 모든 동기식 코드가 실행을 완료했다는 것이다.

예제 시나리오

• 아래 예제 시나리오 코드를 실행하면 Sync job 이 먼저 출력된 뒤 비동기 호출인 Async job 이 출력된다.
• setTimeout() 내부에 있는 콜백은 비동기 작업으로 처리된다.
• 자바스크립트는 별도의 스레드에서 작업을 처리하는 브라우저 API 혹은 Node.js API 에 이를 전달한다.
• 동기 코드는 기다리지 않고 계속 실행된다.
• 동기 코드 실행이 끝나면, 이벤트 루프는 호출 스택이 비어있음을 확인하고 작업 대기열에서 첫번째 콜백을 가져와 호출 스택에 푸시한다.
• 마침내 비동기 코드가 실행된다.

setTimeout(() => {
  console.log("Async job");
});

console.log("Sync job");

주요 내용

• 이벤트 루프: 이벤트 루프는 비동기 연산을 오프로드하고 콜백이 실행되는 시점을 관리하여 논블로킹 I/O 를 가능하게 한다.
• 자바스크립트의 역할: 싱글 스레드로 유지된다.
  • 비동기 연산을 처리하기 위한 멀티 스레드 동작을 제공하는 것은 런타임 환경이다.
• 효율성: 이러한 설계 덕분에 자바스크립트는 많은 수의 입출력 작업을 효율적으로 처리할 수 있고, 이는 웹서버와 같은 네트워크 집약적 애플리케이션에서 특히 유리하다.