TIL 2 | 이벤트 루프

목차

자바스크립트는 어떻게 비동기 작업을 처리할까?
이벤트 루프
예제로 이해하는 이벤트 루프의 동작
마치며

자바스크립트는 어떻게 비동기 작업을 처리할까?

자바스크립트 엔진은 실제로 Call stack을 하나만 가지고 있는 싱글 스레드 언어이며 한 번에 하나의 태스크만 처리할 수 있다.
즉, 자바스크립트 엔진만으로는 여러 개의 태스크를 동시에 처리할 수 없다.

그림 1. 자바스크립트 엔진

그렇다면 자바스크립트 엔진은 어떻게 네트워크 처리 + 렌더링, 애니메이션 효과 + 클릭 이벤트 처리를 동시에 할 수 있을까?
브라우저 환경에 자바스크립트 엔진과 함께 내장된 브라우저가 자체적으로 관리하는 이벤트 루프 시스템이 있기 때문에 가능하다.

결론적으로 자바 스크립트가 싱글 스레드 언어일 뿐, 브라우저는 멀티 스레드 환경이기 때문에 비동기 처리와 동시성을 지원할 수 있다.

이벤트 루프

그림 2. 이벤트 루프와 브라우저 환경

1. 클릭과 같은 DOM Event, 네트워크 호출, 타이머 등은 실행시킬 경우에 Web API로 위임된다.
2. 보통 이런 함수들은 콜백 함수를 넘기는 게 되는데, 이런 콜백 함수들은 비동기 작업이 끝나면 Task Queue에 넣어진다.
3. 이벤트 루프는 Call Stack에 현재 실행 중인 실행 컨텍스트가 있는지, Task Queue에 대기중인 함수가 있는지 반복해서 확인한다. Call Stack이 비어 있다면 Task Queue에 대기중인 함수를 순차적으로 콜 스택으로 이동시킨다.

이러한 과정들은 멀티 스레드로 동작한다. 브라우저가 멀티 스레드로 동작하기에 이런 동작들이 가능하다.

예제로 이해하는 이벤트 루프의 동작

function foo() {
  console.log('foo');
}

function bar() {
  console.log('bar');
}

setTimeout(function () {
  bar();
}, 100);

foo();

setTimeout(function () {
  console.log('baz');
}, 100);

1. setTimeout이 실행되면 자바스크립트 엔진의 콜스택에 setTimeout 실행 컨텍스트가 쌓인다. 브라우저의 내부적으로 Web API의 타이머 함수를 실행시킨다.
2. setTimeout 함수가 자바스크립트 엔진의 Call Stack에서 팝된다.
3. 브라우저는 타이머를 설정하고 타이머가 만료되면 콜백 함수를 Task Queue에 푸시한다.(틱이라고 부름)
4. foo가 호출되어 Call Stack에 foo의 실행 컨텍스트가 쌓인다. foo 안에서 console.log가 호출 되어 Call Stack에 console.log의 실행 컨텍스트가 쌓인다. console.log가 종료되어 Call Stack에서 pop되고, foo도 종료되어 Call Stack에서 pop된다.
5. setTimeout이 호출되면 1-3의 과정이 반복된다.
6. 이벤트 루프가 Call Stack이 빈 것을 확인하고 Task Queue의 콜백 함수를 Call Stack으로 push하여 쌓인 것을 순차적으로 실행한다.
   (콜백 함수 1 실행 -> 종료 -> Task Queue 비움 -> 콜백 2 실행...)

이 때, 3과 4의 과정은 병행 처리 될 수 있다.
3은 브라우저가 수행하고, 4는 자바스크립트 엔진이 수행하기 때문에 가능하다.

마치며

풍문으로 들어 왔던 싱글 스레드, 비동기 처리에 관련된 내용을 정리해보았다.
강의에서 그림이 나오면 듣고 끄덕끄덕하고 기록을 안하는 바람에 다 까먹는 것 같다. 그래서 TIL이 오래 걸리는 것 같다고 생각했다. 그림 절대 기록해...🔥

사실 1주차 강의가 그동안 궁금하거나 많이 들어왔던 지식을 포괄적이게 설명하고 있고, 웹 개발자로서 나아가기 위해서 필수적으로 쌓아야 하는 지식들이라고 생각한다. 그래서 1주차 강의는 조금 시간을 들여서라도 장기 프로젝트로라도 각 파트별로 꾸준히 정리해보려고 한다. 자료구조부터는 조금 라이트한 TIL을 쓸 수 있을것 같다!

참고 자료 및 강의

프로그래머스 프론트엔드 데브코스 Day1 [강의] 이벤트 루프
모던 자바스크립트 딥 다이브 42.2 이벤트 루프