이벤트 루프, 콜 스택, 태스크 큐

이벤트 루프란 무엇인가?

자바스크립트 튜토리얼에선 다음과 같이 정의한다.

https://ko.javascript.info/event-loop

이벤트 루프와 매크로태스크, 마이크로태스크

이벤트 루프(event loop)
 정의는 아주 간단합니다. 이벤트 루프는 태스크가 들어오길 기다렸다가 태스크가 들어오면 이를 처리하고, 처리할 태스크가 없는 경우엔 잠드는, 끊임없이 돌아가는 자바스크립트 내 루프입니다

 

자바스크립트 엔진의 대표적인 예는 Google V8 엔진이다.

V8은 Chrome과 Node.js에서 사용된다.

엔진의 주요 두 구성요소는 Memory Heap과 Call Stack이 있다.

Memory Heap는 메모리 할당이 일어나는 곳

Call Stack은 코드 실행에 따라 호출 스택이 쌓이는 곳이다.

 

호출 스택(Call Stack)

자바스크립트는 Single Thread 언어(Call Stack이 하나).

호출 스택이 하나이기 때문에 한 번에 한 작업만 처리 가능

LIFO구조로 호출된 순서와 반대로 실행이 된다.

Uncaught RangeError: Maximum call stack size exceeded

호출 스택이 가득 찼을 때 발생하는 에러.

WEB API

DOM, Ajax, setTimeout과 같이 브라우저에서 제공하는 API들을 WEB API라고 한다.

WEB API는 작동이 완료되면 콜백을 테스크 큐에 밀어 넣는다.

JS엔진으로 이루어져 있지 않다.

태스크 큐(Task Queue / Callback Queue)

비동기로 실행된 콜백 함수가 보관되는 영역

큐 자로구조로, FIFO로 먼저 들어간 함수가 먼저 나오는 구조이다.

이벤트 루프

이벤트 루프는 콜스택을 모니터링하고 태스크 큐에서 수행할 작업이 있는지 확인하는 루프이다.

콜스택이 비어있고 태스크 큐에 수행할 작업이 있는 경우, 큐에서 제거되고 콜스택에 푸쉬된다.

자바스크립트는 이벤트 루프를 이용하여 비동기 방식으로 동시성(Concurrency)를 지원한다.