[Javascript] 이벤트 루프 Event Loop VS Task Queue란?

 

 

Javascript Event Loop 그리고 Task Queue

 

Javascript의 특징 중 하나는 싱글 스레드로 동작한다는 것이다. 한번에 하나의 Task만 동작시킬 수 있기 때문에 웹 브라우저에서 동시에 여러개의 Task를 작동시키기 위해서는 이벤트 루프(Event Loop)를 사용한다.

 

이벤트 루프(Event Loop)는 웹 브라우저에 내장된 기능이다. Javascript 엔진은 크게 Stack과 Heap 두 부분으로 나누어 볼 수 있다.

 

콜 스택(Call Stack)

생성된 실행 컨텍스트가 올라가는 곳이다. 함수를 실행(호출)하면 실행 컨텍스트가 차례대로 콜 스택에 푸쉬되어 실행된다. Javascript에서는 하나의 콜 스택만 운영하기 때문에 최상단의 함수가 종료되어 콜 스택에서 제거되어야 다음 함수가 실행된다.

 

힙(Heap)

힙 공간은 객체가 저장되는 메모리 영역이다. 콜 스택의 실행 컨텍스트는 힙에 올라간 객체를 참조하게 된다. 힙 메모리 영역에 올라가는 객체는 원시타입이 아닌 참조 타입으로 크기가 결정되어 있지 않다. 

따라서 런타임에 동적으로 객체를 할당할 메모리를 할당하게 된다. Javascript 엔진은 단순히 콜 스택의 실행 컨텍스트를 올리고 실행할 뿐이기 때문에 소스코드 평가 및 실행을 제외한 모든 기능은 런타임 환경인 Node.js에서 담당하게 된다.

 

예를 들어 setTimeout() 타이머를 사용하는 경우 콜백 함수를 평가하고 실행하는 것은 Javascript 엔진에서 처리하지만 호출 스케줄링을 위한 타이머 설정, 콜백 함수 등록은 브라우저나 Node.js 같은 런타임 환경이 담당하게 된다. 이를 위해 런타임 환경은 이벤트 루프(Event Loop)와 태스크 큐(Task Queue)를 제공한다.

 

 

이벤트 루프(Event Loop) 

이벤트 루프는 콜 스택에 현재 실행중인 실행 컨텍스트가 존재하는지와 태스크 큐에 대기중인 콜백함수나 이벤트 핸들러가 존재하는지 반복적으로 체크한다.

만약 콜 스택이 비어 있고 태스크 큐에 대기중인 함수가 존재하는 경우 FIFO 방식으로 (Queue 자료구조) 태스크 큐의 대기중인 함수를 콜 스택으로 이동하게 된다. 이 방식으로 비동기 처리 방식을 제공한다.

 

태스크 큐(Task Queue)

비동기 함수의 콜백 함수가 임시적으로 저장되는 공간이다. 만약 Promise를 사용하는 경우 Promise의 후속 처리 메소드의 콜백 함수는 마이크로태스크 큐에 저장된다.

 

정리

 

Javascript 엔진 자체는 싱글 스레드로 작동한다. Javascript에서 함수가 실행되기 위해서는 먼저 실행 컨텍스트가 콜 스택에 올라가고 하나씩 pop() 하면서 함수를 작동 시킨다.

 

Javascript에서 비동기 방식을 처리하기 위해서는 콜백 함수가 태스크 큐에 푸시되어 대기하게 되고 콜 스택이 비는 시점에 이벤트 루프가 태스크 큐의 함수를 콜 스택에 올리면서 실행하게 된다. 

 

Javascript 엔진 자체는 싱글 스레드기 때문에 절대로 비동기 프로그래밍을 처리할 수 없다. 하지만 Javascript를 작동시키는 런타임 환경인 Node.js나 웹 브라우저에서는 멀티 스레드를 지원하기 때문에 비동기 프로그래밍이 가능한 것이다.

 

 

 

[Javascript] 비동기 프로그래밍이란? Asynchronous Call