이벤트 루프

자바스크립트의 중요한 개념인 이벤트 루프를 이해한다.

단일 스레드 기반 언어인 자바스크립트

자바스크립트는 콜 스택을 하나만 가지고 있는 단일 스레드 기반 언어이기 때문에 한 번에 하나씩 작업을 진행한다.

그러나 자바스크립트가 사용되는 환경을 생각해보면, 많은 작업이 동시에 처리되고 있는 것을 알 수 있다.

예를 들면, 웹브라우저는 애니메이션 효과를 보여주면서 마우스 입력을 받아서 처리하고, Node.js 기반의 웹서버에서는 동시에 여러개의 HTTP 요청을 처리할 수 있다.

위와 같이 자바스크립트는 단일 스레드 기반 언어이지만, 이벤트 루프를 이용해서 비동기 방식으로 동시성을 지원한다.

이벤트 루프란?

이벤트 루프란 callback event queue에서 작업을 하나씩 꺼내서 콜 스택으로 밀어넣는 루프이다.

이벤트 루프는 자바스크립트 엔진이 아닌 자바스크립트 엔진을 구동하는 환경 즉, Node.js 또는 브라우저가 담당한다.

이벤트 루프에서는 이벤트 발생 시 호출되는 콜백 함수들을 관리하여 콜백 큐에 전달하고, 콜백 큐에 담겨있는 콜백 함수들을 콜 스택에 넘겨 준다.

이벤트 루프가 콜백 큐에서 콜 스택으로 작업을 넘겨주는 것은 콜 스택이 비어있을때만 수행된다.

콜백 큐에서는 Web API에서 비동기 작업들이 실행된 후 호출되는 콜백 함수들이 기다리는 공간이다.

Web API는 브라우저에서 자체 지원하는 API이다. Web API는 DOM 이벤트, AJAX, setTimeout등의 비동기 작업등을 수행할 수 있도록 API를 지원한다.

정리

1. 비동기 작업(AJAX, setTimeout 등)이 콜 스택에 쌓이고 실행되면, 자바스크립트 엔진은 해당 비동기 작업을 Web API에게 위임한다. 그 다음 즉시 해당 비동기 작업을 콜 스택에서 제거한 후, 다음 작업을 실행한다.

2. Web API는 해당 비동기 작업을 수행하고, 비동기 작업에 포함되어있는 콜백 함수를 콜백 큐에 넘겨주게된다.

3. 이벤트 루프는 콜 스택에 쌓여있는 함수가 없을 때, 콜백 큐에서 대기하고 있던 콜백 함수를 콜 스택으로 넘겨준다.

4. 콜 스택에 쌓인 콜백 함수가 실행되고, 콜 스택에서 제거된다.