메시지 큐와 이벤트 루프
이번 Concept은 메시지 큐와 이벤트 루프에 대해서 다뤄보겠습니다.
먼저 컨셉을 다루기 전에 자바스크립트의 전반적인 구동방식에 대해 설명하고 넘어가겠습니다.
자바스크립트는 다른 언어들과 다르게 싱글 스레드 언어입니다. 이 말은 한 번에 하나의 동작밖에 할 수 없다는 것을 의미하고 장점과 단점을 각각 가지고 있습니다.
장점: 멀티 스레드에서 발생하는 교착상태처럼 복잡함이 발생하지 않는다.
단점: 이미지를 제어하는 무거운 작업 등은 할 수가 없다.
그런데 한 가지 이상한 점이 있습니다.
자바스크립트는 싱글 스레드 언어이기 때문에 한 번에 하나밖에 작동을 할 수 없다고 했는데 어떻게 브라우저에서는 한 번에 처리되는 것일까요?
그 이유는 자바스크립트가 런타임으로 하나에 한 가지 일을 할 수 있는 것은 사실이지만 브라우저는 런타임 이상으로 많은 것들을 작업할 수 있기 때문입니다.
아래 그림을 참고하도록 하겠습니다.
보는 바와 같이 브라우저는 WEB APIs & Callback Queue & Event Loop 등 많은 것들을 가지고 있습니다.
또한 브라우저는 아래와 같이 작동을 합니다.
(사진 크기가 초과 되어 볼 수 없습니다. 자세히 보기 위해 -> https://github.com/ShigatsuEl/33-js-concepts-review/blob/master/Concept9/Concept9.md 로 이동해주세요.)
위 그림은 브라우저가 작동하는 방법을 자세하게 설명하고 있습니다.
자바스크립트는 어떤 코드던지 처음에 콜스택에 들어가게 됩니다. 여기서 setTimeout()과 같은 Web API는 콜스택에 쌓여진 후 바로 Web APIs에 불려가게 됩니다.
그 이후 콜백함수만 메시지 큐에 들어가게 되고 중요한 것은 이 콜백함수는 콜스택이 비어질 때까지 기다리고 비어진 후에 콜스택으로 푸쉬가 되어 실행된다는 것 입니다.
바로 이것이 이벤트 루프인 것 입니다.
정리하겠습니다.
자바스크립트 엔진은 크게 2가지 구성으로 힙과 콜백으로 이루어져 있습니다.
자바스크립트가 싱글 스레드 언어임에도 불구하고 런타임으로 많은 것을 작업할 수 있는 이유는 브라우저가 도와주기 때문이다.
Web API는 호출되고나서 똑같이 콜스택에 쌓이지만 바로 실행되지 않고 Web APIs에 불려가 콜백함수만 메시지 큐에 저장합니다. 콜백함수의 이름이 이러한 것은 이것 때문입니다.
메시지 큐는 반드시 콜스택이 다 비워지고 나서야 마지막으로 실행되게 됩니다.
이번 Concept은 여기서 마무리 하겠습니다 :)
이 MD는 밑의 글과 영상을 참고하여 만들었습니다 :)
Written
Video
Nothing