[JS] 이벤트 루프

JS는 Single Thread 언어

JS는 싱글 스레드 방식으로 동작한다.

싱글 스레드란 기본적으로 한번에 하나의 작업만을 수행할 수 있다는 것이다.

 

하지만 JS는 비동기 처리가 가능하다.

 

싱글 스레드 언어인데 어떻게 비동기 코드가 실행될 수 있을까?

 

브라우저의 구조

브라우저에는 JS 엔진만 있는 것이 아니라 Web API, 콜백 큐, 이벤트 루프 등도 있다.

JS 엔진

JS 엔진에는 Memory Heap과 Call Stack이 있다.

• Memory Heap : 데이터를 만들 때(변수 선언 및 할당) 저장되는 공간이다.
• Call Stack : 함수를 실행할 때마다 쌓이는 공간으로, 함수 실행 순서를 제어한다.

Web API

JS 엔진 자체가 제공하지 않는 브라우저에서 제공하는 API다.

DOM API, setTimeout, HTTP 요청과 같은 비동기 처리를 포함한다.

콜백 큐

비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 공간이다.

이벤트 루프

콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지 콜백 큐에 대기 중인 함수가 있는지 반복해서 확인한다.

 

JS 엔진 자체는 싱글 스레드 방식으로 동작하지만 JS가 구동되는 환경인 웹 브라우저에는 Web API, 콜백 큐, 이벤트 루프 등 멀티 스레드로 동작한다.

 

이벤트 루프 동작 과정

console.log("시작");

setTimeout(function () {
  console.log("타이머 콜백");
}, 2000);

console.log("끝");

 

위 예제 코드는 아래와 같이 동작한다.

 

1. console.log("시작")이 콜 스택에 푸시되어 코드가 실행된다.

2. setTimeout 함수가 호출되어 Web API에 푸시된다.

3. 다음 두 개의 실행 과정은 병행 처리된다.

    a. 브라우저는 2초를 기다리고 2초가 되면 콜백 함수 console.log("타이머 콜백")은 콜백 큐에 푸시되어 대기하게 된다.

    b. console.log("끝")이 콜 스택에 푸시되어 코드가 실행된다.

4. 콜 스택과 콜백 큐를 주시하고 있던 이벤트 루프는 콜 스택이 비어있는 것을 보고 콜백 큐에 있던 console.log("타이머 콜백")을 콜 스택으로 푸시한다.

5. console.log("타이머 콜백")은 콜 스택에서 코드가 실행된다.