이벤트 루프 그리고 동시성에 대하여

6 min readSep 26, 2024

2년 전, 자바스크립트 V8 엔진이 어떻게 동작하는지에 대해 알아봤다. 자바스크립트하면 떠오르는 이벤트 루프와 콜백 함수 그리고 동시성에 대해 알아본다.

자바스크립트 엔진은 단 하나의 실행 컨텍스트 스택을 가지므로 2개 이상의 함수를 동시에 실행할 수 없다. 이처럼 한 번에 하나의 태스크만 실행할 수 있는 방식을 싱글 스레드(single thread) 방식이라고 한다. 또한 자바스크립트는 처리할 메시지의 대기열(태스크 큐)을 사용하면서 순차적으로 태스크를 처리한다. 해당 방식은 처리 시간이 오래 걸리는 태스크를 실행할 경우 블로킹(blocking, 작업 중단)이 발생한다.

function sleep(func, delay) {
  const delayUntil = Date.now() + delay;

  while (Date.now() < delayUntil);

  func();
}

function foo() {
  console.log('foo');
}

function bar() {
  console.log('bar');
}

sleep(foo, 3 * 1000);

// 3초 + foo 함수의 실행 시간만큼 호출되지 못한다(blocking)
bar();

위 코드의 결과는 다음과 같다.

foo
(3초 후에)
bar

위 예시처럼 현재 실행 중인 태스크(while 루프, foo())가 종료할 때까지 다음에 실행될 태스크(bar())는 실행되지 않고 대기하는 방식을 동기(synchronous) 처리라고 한다. 순서대로 태스크를 하나씩 처리하므로 실행 순서가 보장되는 반면, 이전의 태스크가 종료할 때까지 다음 태스크들이 블로킹되는 단점이 있다.

function foo() {
  console.log('foo');
}

function bar() {
  console.log('bar');
}

setTimeout(foo, 3 * 1000);

// 블로킹되지 않고 바로 실행한다
bar();

setTimeout 함수는 비동기 함수로, setTimeout의 콜백 함수는 foo()를 참조하여 3초 후에 태스크 큐에 해당 함수를 실행하도록 등록한다. 즉, 3초가 지나면 태스크 큐에서 foo()를 꺼내 실행한다. 하지만, 현재 콜 스택은 비어있으므로 다음 함수인 bar()로 넘어가고 곧바로 실행된다.

bar
(3초 후에)
foo

이처럼 현재 실행 중인 태스크(setTimeout())를 호출해 비동기 작업이 예약되었음에도 불구하고 다음 태스크(bar())가 즉시 실행하는 방식을 비동기(asynchronous) 처리라고 한다. 동기 처리와는 반대로 블로킹이 발생하지 않는다는 장점이 있지만, 태스크의 실행 순서가 보장되지 않는다. 비동기 함수는 다음과 같다.

타이머 함수(setTimeout, setInterval)
HTTP request
이벤트 핸들러: 이벤트 발생시 실행되는 함수로 이벤트 리스너를 통해 등록한다.

위 비동기 함수들은 전통적으로 콜백(callback) 패턴을 사용하는데 콜백 함수가 중첩되어 복잡해지는 콜백 헬(callback hell)을 발생시킨다. 이는 가독성을 나쁘게 하면서 유지보수를 어렵게 한다. 또한 에러의 예외 처리가 애매해지고 여러 개의 비동기 처리를 한 번에 처리하는 데 한계가 있다. 이를 해결하기 위해 나온 방식이 promise, async/await로 콜백 헬을 개선하면서 가독성을 높인다.

자바스크립트는 한 번에 하나의 태스크만을 처리하지만 이벤트 루프(event loop)를 통해 동시성(concurrency)를 지원한다. 이벤트 루프는 브라우저에 내장되어 있는 기능 중 하나로 대부분의 자바스크립트 엔진은 크게 2개 영역으로 구분한다.

콜 스택(call stack)

소스코드 평가 과정에서 생성된 실행 컨텍스트가 추가/제거되는 실행 컨텍스트 스택
함수를 호출하면 함수 실행 컨텍스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다.
자바스크립트 엔진은 단 하나의 콜 스택을 사용하므로 최상위 실행 컨텍스트(실행 중인 실행 컨텍스트)가 종료되어 콜 스택에서 제거되기 전까지는 다른 태스크는 실행되지 않는다.

힙(heap)

객체가 저장되는 메모리 공간
콜 스택의 요소인 실행 컨텍스트는 힙에 저장된 객체를 참조한다
스택(stack)과 반대로 구조화되어 있지 않다.

즉 자바스크립트 엔진은 코드의 동기적 실행 자체를 처리하고, 자바스크립트 엔진을 구동하는 브라우저 또는 Node.js 런타임에서 비동기 작업(비동기 함수의 실행 예약 또는 콜백 등록 등)을 관리한다. setTimeout의 콜백 함수의 평가와 실행은 자바스크립트 엔진이 담당하지만, 호출 스케쥴링을 위한 타이머 설정과 콜백 함수의 등록은 브라우저 또는 Node.js가 담당한다. 이를 위해 브라우저 환경은 태스크 큐와 마이크로태스크 큐, 이벤트 루프를 제공한다.

태스크 큐(Task Queue, Event Queue, Callback Queue): 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 대기하는 영역이다.
마이크로태스크 큐(Microtask Queue): Promise의 후속 작업(promise.then(), catch(), finally())이나 async/await 비동기 작업의 후속 처리가 일시적으로 저장되는 영역이다.
이벤트 루프(event loop): 콜 스택이 비어 있다면, 가장 먼저 마이크로태스크 큐를 확인한다. 마이크로태스크 큐에 작업이 있다면 (태스크 큐에 작업이 있더라도) 마이크로태스크 큐의 작업을 처리한다. 마이크로태스크 큐가 비어있을 때만 태스크 큐의 작업이 처리되는데 이 때 순차적(FIFO, first in first out)으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다. 이 때 콜 스택으로 이동한 함수는 실행되며 즉, 태스크 큐에 임시 보관된 함수들은 비동기 처리 방식으로 동작한다. 또한 콜 스택에 현재 실행 중인 실행 컨텍스트가 있는지, 태스크 큐에 대기 중인 함수(콜백 함수, 이벤트 핸들러 등)가 있는지 반복해서 확인한다.

reference

모던 자바스크립트 Deep Dive(이응모 저, 위키북스) 42장 비동기 프로그래밍 809p – 815p
https://developer.mozilla.org/ko/docs/Web/JavaScript/Event_loop
https://nodejs.org/en/learn/asynchronous-work/event-loop-timers-and-nexttick#what-is-the-event-loop

이벤트 루프 그리고 동시성에 대하여

콜 스택(call stack)

힙(heap)

Written by Yeshin Lee

No responses yet