Event Loop

이짜젠·2021년 10월 4일

JavaScript event loop

Javascript가 비동기작업을 가능하도록 해주는 Event loop에 대해 정리해본다.

사전지식

Event Loop를 알아보기에 앞서 사전에 필요한 지식들에 대해 간단히 정리해본다.

Thread

Process의 일꾼

Thread는 Process에 종속되는 일꾼이다(= Task 처리자).
Process는 가지고있는 Thread의 수 만큼 병렬로 Task를 처리할 수 있다.

Javascript의 Thread

Javascript는 Thread가 하나다. (= Single Thread)

Javascript에서는 Thread를 생성/관리할 수 없다.
따라서 JS 애플리케이션은 한번에 한가지일밖에 처리할 수 없다.

Thread가 하나밖에 없다면, 하나의 일이 끝날때까지 다른일은 할 수 없을것이다.
그러나 웹애플리케이션은 다양한 비동기작업을 위한 API를 지원한다. (아래참고)
어떻게 가능한것인지 알아보자.

Promise: resolve 또는 reject 될 때까지 대기
setTimeout: delay 시간만큼 대기
addEventListener: event가 발생할때까지 대기

Runtime Environment

Javascript Engine을 구동시키는 환경

Javascript는 Javascript Engine(ex. V8)에 의해 해석되고 실행된다.
이 Javascript Engine은 Runtime Environment를 위에서 구동된다.
(앞으로 편의상 Javascript Engine을 JS라고 부르겠다.)

대표적인 JS 런타임 환경으로는

Browser
Nodejs

가 있다.

JS는 Single Thread 지만, 런타임환경은 Multi Thread를 지원한다.
JS가 비동기작업이 가능한 이유는 여기에 있다.

Event Loop

비동기작업의 처리를 위해 Javascript Engine과 Runtime Enviornment 간의 통신을 담당하는 런타임환경의 구성요소.

Javascript로 작성된 애플리케이션은 런타임환경의 Multi Thread를 활용하여 비동기작업을 수행한다고 앞서 정리했다.

JS가 런타임환경의 Mutli Thread를 어떻게 활용할 수 있을까?
런타임환경이 제공하는 API와 Event Loop를 이용하여 JS와 런타임 환경이 서로 통신함으로써 비동기작업이 가능해진다.

원리

Event Loop가 런타임의 Task Queue와 JS의 Call Stack을 감시한다.

JS가 런타임환경이 제공하는 비동기 API를 (완료시 수행되어야 하는 callback 과 함께) 호출한다.
런타임환경은 1번에서 전달받은 callback 함수를 Task Queue에 넣는다.
비동기 작업이 끝난 이후,
Event Loop가 JS의 Call Stack을 감시하다가, Call Stack이 비워졌을 때, Task Queue에 있는 callback 함수를 Call Stack으로 이동시키고 JS가 callback을 수행한다.