[JavaScript] 콜스택, 콜백큐, 이벤트 루프의 동작 원리를 통한 비동기 함수의 실행 과정

자바스크립트에서 당연히 의심 없이 사용하던 비동기 함수 실행 과정을 들여다볼 기회가 생겼다. 싱글 스레드 언어인 자바스크립트는 한 줄 한 줄 순서대로 동기적으로 실행되어야 하며, 두 가지 이상의 태스크를 병렬적으로 수행할 수 없어야 하는데, setTimeout이나 웹 API, ES6의 promise 같은 비동기 콜백은 어떻게 실행되고 있는 것일까?

우선 자바스크립트의 두 가지 이상의 statements가 병렬적으로 실행되지 못하는 것은 맞다. 실행은 항상 동기적이다. 자바스크립트 엔진 V8은 프로그램 내 모든 변수의 메모리 할당이 일어나는 Memory Heap과 스택 프레임이 쌓이는 콜 스택으로 이루어져 있고 이 콜 스택(호출 스택)이 하나이므로 싱글 스레드이다. 하지만, 자바스크립트가 실행되는 브라우저나 Node.js 같은 환경에서는 여러 개의 스레드가 활용된다. 이를 상호 연계해주는 역할을 이벤트 루프가 담당한다.

console.log('Message 1'); 
setTimeout(function() { 
  console.log('Message 2') 
}, 100); 
console.log('Message 3')

// output
// 'Message 1'
// 'Message 3'
// 'Message 2'

setTimeout의 첫 번째 파라미터에 콜백 함수가 오고, 두 번째 파라미터에 밀리 세컨드 단위의 시간이 오기 때문에, 특정 시간 이후에 실행되는 특성 상 'Message 2'이 가장 마지막에 출력된다.

여기에 event loop의 도움이 있었다. 이벤트 루프 덕분에 모든 동기적인 코드가 실행이 끝난 뒤에야 비동기적 코드가 실행될 수 있다. 이벤트 루프를 이해하기 위해서는 콜 스택을 먼저 알아야 한다.

콜 스택(Call Stack)이란?

콜 스택은 인터프리터가 프로그램을 읽을 때 하나씩 쌓여들어가고, 실행되며, 실행이 완료되면 비워지는 곳이다. 호출된 순서와 반대로 실행이 되는 구조라 '스택'이라고 부른다. 개발자의 실수로 재귀 함수 등을 썼을 때 콜스택에 올라간 함수가 또 자기 자신을 불러 스택을 채우고.. 점점 브라우저별 최대 호출 스택을 초과할 경우 Uncaught RangeError: Maximum call stack size exceeded 같은 에러 메세지를 볼 수 있는데, 그때 등장하는 call stack이다.

만일 실행하는 코드가 비동기적이라고 할 때(setTimeout, promise, click event 등), 코드는 이벤트 테이블로 향하고, 이 테이블은 지정된 시간 이후에 비동기 코드를 콜백/이벤트 큐로 옮기는 역할을 한다.

콜백 큐(Callback Queue)란?

콜백 큐는 앞서 말한 것처럼 비동기 코드가 들어가고, 실행을 위해 대기하는 곳이다. 자바스크립트 코드가 실행 중에 이벤트를 만나면 해당 이벤트들은 차곡 차곡 콜백 큐에 쌓인다. 스택과 다르게 큐이므로, 선입선출된다는 특징이 있다.

이벤트 루프(Event Loop)란?

그런 다음에 브라우저가 제공하는 이벤트 루프가 등장한다. 이벤트 루프는 자바스크립트와 노드에서 사용된다. 이벤트 루프는 계속 돌아가면서 메인 스택을 보며 만일 실행할 게 하나라도 있는지 보고, 없다면 콜백 큐를 확인한 뒤 콜백 큐에 실행할 코드가 있다면 그 안에서 그걸 꺼내들어서 메인 스택에 실행을 위해 올려두는 역할을 한다. 이 한 번의 과정을 tick이라고 한다. 이벤트 루프는 이 작업을 계속 진행해 looping 한다.

Job Queue

콜백 큐뿐만 아니라 브라우저가 제공하는 또 다른 큐로는 잡 큐가 있다. new Promise() 기능을 위해서만 존재한다. 코드 내에 promise를 사용할 때, 콜백 메소드인 then()를 추가하면, 이 'thenable'한 메소드는 promise가 리턴되거나 resolve되었을 때 job queue에 추가되고, 그 후에 실행이 된다.

console.log('Message no. 1: Sync'); 
setTimeout(function() { 
  console.log('Message no. 2: setTimeout'); 
}, 0); 
const promise = new Promise(function(resolve, reject) { 
  resolve(); 
}); 
promise
    .then(function(resolve) { 
  console.log('Message no. 3: 1st Promise'); 
    }).then(function(resolve) { 
  console.log('Message no. 4: 2nd Promise'); 
}); 
console.log('Message no. 5: Sync');

// Message no. 1: Sync 
// Message no. 5: Sync 
// Message no. 3: 1st Promise 
// Message no. 4: 2nd Promise
// Message no. 2: setTimeout 

흔히 setTimeout이 먼저 콜백 큐로 들어가고, 그 후 promise의 thenable한 메소드가 뒤이을 거라 생각하지만, 잡큐가 콜백을 실행하는 데 있어 높은 우선순위를 가지기 때문에 이벤트 루프는 잡큐에 있는 모든 태스크를 완료한 이후에 콜백 큐로 넘어가도록 되어 있다. 따라서 프로미스를 위한 모든 thenable 콜백이 먼저 불리고, 그 후에 setTimeout콜백이 불린다.

setTimeout의 두 번째 인수가 0이라고 해도 일단 비동기 함수이므로 콜백 큐에 대기하는 상황이 발생한다. 그래서 Message 1 이후에 바로 Message 2가 찍히지 않는다.

Reference

• 호출 스택과 이벤트루프
• 자바스크립트 동작 원리(콜 스택, 콜백 큐, 이벤트 루프