이벤트루프
이벤트 루프 개념에 대해 설명하기 전에 알아두어야 할 개념들이 있다.
- 자바스크립트는 싱글 스레드에서 동작한다.
- 자바스크립트를 해석하는 자바스크립트 엔진(JavaScript Engine)
- 웹 브라우저에 화면을 그리는 렌더링 엔진(Rendering Engine)
자바스크립트는 싱글 스레드?
먼저 “스레드”라는 용어는 운영체제에서 자주 사용되는 용어이다. 운영체제를 다루는 글이 아니므로 간략하게만 짚고 넘어가자.
프로세스란 운영체제 위에서 연속적으로 실행되고 있는 프로그램을 말하며 각각의 프로세스는 메모리 위에서 서로 독립적으로 실행되고 있다.
스레드란 한 프로세스 안에서 여러 개의 동작을 할 수 있다. 스레드는 각각 저마다 해야되는 업무가 배정되어 있는 것이다. 즉, 일꾼으로 생각하면 된다.
그러므로 자바스크립트에서 싱글 스레드라는 것은 자바스크립트 엔진에서 수행할 수 있는 함수는 하나의 함수 밖에 없다는 것이다.
그렇다면 어떻게 자바스크립트는 코드를 해석하고 수행하면서 화면에 렌더링도하고 Web API도 불러오고, 네트워크 통신도 하는데 마치 여러가지 일을 하면서 자연스럽게 동작하는 것일까? 그 답은 이벤트 루프에 있다.
Rendering Engine
렌더링 엔진(또는
Layout Engine이라고도 한다.)은 HTML과 CSS로 작성된 마크업 관련한 코드들을 콘텐츠로서 웹 페이지에 렌더링하는 역할을 한다.JavaScript Engine
자바스크립트 엔진은 자바스크립트를 해석하고 실행하는 인터프리터이다. 주로 웹 브라우저에서 이용되며 최근 node.js의 등장으로 서버 사이드에서는 V8과 같은 엔진이 사용된다.
구글에서 개발한 V8 엔진을 비롯한 대부분의 자바스크립트 엔진은 다음의 세 영역으로 나뉜다.
- Heap, Stack, Task Queue(Event queue)
Call Stack
자바스크립트는 단 하나의 호출 스택(call stack)을 사용하며 요청이 들어올 때마다 해당 요청을 순차적으로 호출 스택에 담아 처리한다. 때문에 하나의 함수가 실행되면 이 함수의 실행이 끝날 때까지 다른 어떤 task도 수행될 수 없다.
Heap
객체는 힙에 할당된다. 단순히 메모리의 크고 대부분 구조화되지 않은 영역을 지칭하는 용어이다.
Task Queue(Event Queue)
자바스크립트 런타임 환경에서 처리해야 하는 Task들을 임시 저장하는 대기 큐가 존재하는데, 이 대기 큐를 Task Queue 또는 Event Queue라고 한다. 그리고 콜 스택이 비어졌을 때 먼저 대기열에 들어온 순서대로 수행된다.
이벤트 루프
이벤트 루프를 코드로 간단히 설명하자면 다음과 같다.
while(queue.waitForMessage()) { queue.processNextMessage() }
queue.waitForMessage() 함수는 현재 처리할 수 있는 task가 존재하지 않으면 새로운 task가 도착할 때까지 동기적으로 대기한다.이처럼 이벤트 루프는 현재 실행중인 task가 없는지와 Task Queue에 task가 있는지를 반복적으로 확인한다. Task Queue에 task가 존재한다면 Call Stack으로 호출되어 처리된다.
[참고 사이트]