이번 포스팅에선 이벤트루프에 대한 이야기를 해 보려고 한다.
이벤트루프는 자바스크립트가 이벤트를 처리하는 방식이라 할 수 있는데,
우리가 사용하는 자바스크립트가 어떻게 작동하는지 어느정도는 알아야 하지 않겠는가.
비록 아는것과 모르는것의 차이가 지금 당장 보이지 않더라도, 더 나은 개발자가 되기위해 조금씩 조금씩 알아가도록 하자.
이벤트루프
이벤트루프를 알기에 앞서 먼저 알아야 할 개념이 있는데,
- 동시성(Concurrency)
- 단일쓰레드(single-thread)
가 그것이다.
우선 각각의 개념이 어떻게 연결 되는지 확인 해 보자.
동시성과 단일쓰레드
브라우저는 단일쓰레드에서 동작하고, 자바스크립트는 브라우저 기반 언어인 만큼 단일쓰레드 기반으로 동작한다.
단일쓰레드라는 말은 한꺼번에 여러가지 작업(task)를 처리하지 않고, 한번에 하나의 작업만을 수행하는 방식을 의미한다.
하지만 그렇다면 이상한 점이 생긴다.
웹을 보다보면 한번에 여러가지 일을 동시에 처리 하는듯이 보이기 때문이다.
바로 이것이 자바스크립트에 있어서의 동시성(Concurrency)이라는 개념이다.
이렇게 자바스크립트가 동시성을 가지고 동작 할 수 있게 만드는 것이 바로 이벤트루프(Event Loop)이다.
이벤트의 처리와 이벤트루프
이벤트 처리
자바스크립트 엔진은 대부분 두개의 영역으로 나뉘어져 있는데,
- Heap : 동적으로 생성된 객체인스턴스가 할당 되는 영역
- Call stack : 요청 된 작업이 쌓이는 영역
Call stack의 특징은 자바스크립트의 Call stack은 하나만 존재하기 때문에 해당 스택에 쌓인 작업들은 순차적으로 실행 되고, 하나의 작업이 종료 되기 전까지 다음 작업을 수행 할 수 없다는 특징이 있다.
물론 상술한 특징에 따라 작업이 실행 될 경우, 순차적으로 Call stack으로 들어온 작업을 다시 순차적으로 처리 하기 때문에 동시성과는 거리가 있는 작업이 이루어진다.
이를 동시적으로 처리 하기 위해 브라우저 혹은 nodejs를 통해 비동기 요청, 처리가 이루어지게 된다.
Web Api는 브라우저상에서 비동기 작업들이 수행 될 수 있게 하는 api를 뜻하며, 해당되는 비동기 작업의 종류로는 Ajax, DOM Events, Timer등이 있다.
이벤트루프
이벤트루프(event loop)는 Call stack과 Event queue를 반복적으로 확인 하여 stack 안에 작업이 존재하는가 확인한다. 만약 Call Stack이 비어있을 경우, Event Queue 내의 task가 Call Stack으로 이동하고 실행된다.
정리
정리하자면 이벤트등 비동기 작업이 일어났을때 일어나는 작업 처리순서는 다음과 같다.
-
비동기처리가 발생 했을때, 해당 코드는 Call stack에 쌓이고, 자바스크립트엔진에서 web api로 비동기 처리가 위임 된다. 비동기 처리를 담당하는 곳이 web api이기 때문이다.
-
web api가 비동기 작업을 처리하게 되고, 해당 이벤트의 콜백함수가 이벤트루프를 통해서 Event Queue로 이동하게 된다.
-
이벤트루프가 Call stack에 함수가 없는 것을 확인 했을때, Event Queue에 쌓인 콜백함수를 Call stack으로 이동시킨다.
-
Call stack에 쌓인 함수가 실행 되고, 다시 Call stack을 비우게 된다.
