저번 포스팅에서 '콜스택(callStack)'을 다뤘습니다. 콜스택을 배우면서 알 수 있었던건 자바스크립트는 '동기적'으로 작동한다는 것과 선입선출방식으로 동자을 한다는 것입니다. 즉 한번에 한가지 일만 할 수 있다는 것입니다. 이것을 싱글스레드(single thread)라고 합니다.
하지만 자바스크립트로 AJAX처리나 setTimeOut함수 addEventListner등을 사용하면 '비동기적'인 작업 처리가 가능합니다. AJAX는 이름부터 Asynchronous JavaScript and XML 즉 비동기적인 자바스크립트 와 XML이라고 나와있습니다.
AJAX를 사용하신분이라면 알겠지만 용량이 큰 데이터에서 불러온다고 가정했을 때 AJAX함수가 스택에 쌓이면 사진을 불러오는 처리가 실행되면 자바스크립트는 데이터처리를 마치지않고 뒤에 서 대기중인 다른 함수들을 먼저 실행시킵니다. 그리고 나머지 함수들을 다 처리하면 AJAX로 불러온 데이터가 화면에 보이게 됩니다. 분명 자바스크립트 엔진은 싱글스레드 즉 일을 처리할 수 있는 통로가 하나인데 어떻게 멀티스레드, 비동기적으로 일을 할 수 있을까요?
그 이유는 자바스크립트 런타임은 메모리힙과 스택만으로 이루어진것이 아니라 브라우저에서 제공하는 WEB API와 Event Queue와 Event Loop라는 것도 존재하기때문입니다. 이것들이 자바스크립트의 코드를 비동기적으로 다룰 수 있게 도움을 줍니다.
큐와 이벤트 루프는 자바스크립트 자체 엔진이 아닌 브라우저나 Node.js에 있습니다.
Node.js는 브라우저 API같은 비동기 IO를 지원하기 위해 libuv 라이브러리를 사용하며, 이 libuv가 이벤트 루프를 제공합니다.😊
const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");
bar();
foo();
baz();
출처 : https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif
간단하게 먼저 순서를 알아봅시다.
- bar()가 먼저 콜스택에 들어옵니다.
- bar()안의 내부함수 setTimeout()이 스택에 들어오고 console.log를 실행시킵니다.
- setTimeout()은 WEP API의 기능을 이용하여 스택의 바깥 어딘가로 이동이 되어 함수의 기능처럼 정해진 시간동안 대기합니다.
- setTimeout()은 사라지고 bar()은 스택에서 팝이 됬으니 foo()함수가 스택에 호출됩니다.
- 콜스택에서 일이 처리되는 동안 setTimeout()은 정해진 시간이 다되면 Queue로 이동됩니다.
- 이제 foo()도 팝되고 baz()도 팝이 되어 콜스택이 비었습니다. 그때에 큐에서 이벤트루프를 이용! 콜스택에 setTimeout()을 보냅니다.
- 콜스텍에 보내진 setTimeout()은 기능을 하고 팝됩니다.
정리
1. 큐(Queue)
메세지 큐, 태스크 큐, 이벤트 큐 다 같은 말입니당.
큐란 비동기 콜백 함수들이 대기하는 리스트라는 것을 알 수 있습니다. setTimeout, AJAX등 비동기 콜백 함수들은 자바스크립트 엔진 밖으로 나와 바로 해당 이벤트 큐로 넘어오게 됩니다. 만약 자바스크립트 엔진의 콜 스택이 비워졌다면 큐에 있던 함수들이 차례로 콜 스택으로 넘어갑니다.
스택과 다르게 큐는 선입선출FIFO(First in First Out)방식입니다.😊
2. 이벤트 루프(Event Loop)
위의 움짤에서 알 수 있듯이 실제 자바스크립트가 구동되는 환경(브라우저, Node.js등) 즉 런타임에서는 여러 개의 스레드가 작동됩니다. 이러한 구동 환경이 단일 호출 스택을 사용하는 자바 스크립트 엔진과 상호 연동하기 위해 사용하는 장치가 바로 '이벤트 루프'인 것이다.
그리고 이벤트 루프는 호출 스택이 비워질 때마다 큐에서 콜백 함수를 꺼내와서 실행하는 역할을 해 줍니다.
