[JavaScript] 이벤트 루프(Event Loop)에 대해서 파헤쳐 봅시다.

📖 들어가며

자바스크립트에서 이벤트 루프(Event Loop)는 무엇이고, 왜 중요한 개념일까요?

싱글 스레드(Single Thread)란?

https://www.digikey.kr/en/maker/blogs/2022/an-introduction-to-multi-threading-c-programs

자바스크립트는 싱글 스레드 기반의 언어입니다.

그렇다면 싱글 스레드란 무엇일까요?

싱글 스레드를 이해하기 전에 스레드라는 개념을 먼저 알아야 합니다.

스레드는 프로세스의 실행 단위입니다.

즉, 일을 처리하는 작은 요원과 같은 역할을 한다고 생각하면 됩니다.

싱글 스레드라는 것은 말 그대로 스레드가 하나만 존재, 일을 처리하는 작은 요원이 한 명 밖에 없는 얘기입니다.

블로킹(Blocking)과 논블로킹(Non-blocking)

우리의 작은 요원은 한 명이라서 모든 일을 한 번에 처리할 수 없습니다.

만약 우리가 컴퓨터에게 맡긴 일 중 하나가 너무 오래 걸린다면 어떻게 될까요?
그럼 긴 작업이 완료될 때까지 다른 모든 작업들이 멈춰있다가 해당 작업이 끝난 후에 다시 진행이 될 것입니다.
이러한 경우를 바로 블로킹이라고 합니다.

하지만 우리는 웹에서 파일도 다운로드하면서 웹 서핑도 하고 동영상도 보고 여러 가지 일을 할 수 있습니다.

이건 바로 논블로킹 방식 때문입니다.

논블로킹 방식에서는 긴 작업이 진행되는 동안에도 다른 작업들이 계속 진행될 수 있습니다.

이벤트 루프(Event Loop)의 존재

여기서 이벤트 루프의 역할이 중요해집니다.

논블로킹 방식에서 필요한 것처럼, 이벤트 루프는 긴 작업을 하고 있는 동안 짧은 작업들도 같이 처리할 수 있습니다.

즉, 이벤트 루프는 우리의 작은 요원에게 어떤 작업부터 시작하고 언제 다음 작업으로 넘어갈지 알려주는 역할을 하고 있습니다.

그래서 자바스크립트는 싱글 스레드 언어임에도 불구하고 이벤트 루프를 통해 논블로킹 방식의 비동기적인 동시성 언어로 동작할 수 있습니다.

이벤트 루프(Event Loop)의 구조

자바스크립트 엔진이 가지고 있는 부분은 메모리 힙(Memory Heap)과 콜 스택(Call Stack)이 있습니다.

메모리 힙(Memory Heap): 메모리 힙은 컴퓨터가 정보를 저장하는 곳입니다. 즉, 자바스크립트 관점에서 보면 우리가 만드는 객체, 배열, 함수 등의 데이터가 저장되는 공간입니다.
콜 스택(Call Stack): 콜 스택은 자바스크립트 관점에서 봤을 때 자바스크립트의 할 일 목록이라고 생각하면 됩니다. 함수를 호출하게 되면 해당 함수의 정보가 콜 스택에 쌓이게 되고, 먼저 들어간 것이 마지막에 나오는 FILO(First In Last Out) 구조입니다.

웹 API(Web APIs)와 콜백 큐(Callback Queue)는 자바스크립트 엔진 외부에서 관리되며, 주로 브라우저나 Node.js와 같은 자바스크립트 런타임 환경에서 제공됩니다.

웹 API(Web APIs) : 웹 API는 브라우저가 제공하는 다양한 기능들을 의미합니다. 예를 들어, HTTP 요청, setTimeout 등의 기능들이 포함됩니다. 이런 작업들은 주로 비동기적으로 처리가 되므로 완료 시점을 정확히 알 수 없습니다.
콜백 큐(Callback Queue): 콜백 큐는 비동기 작업(예: setTimeout, HTTP 요청)의 결과나 나중에 실행되어야 하는 작업들이 대기하는 공간입니다. 먼저 들어간 작업이 먼저 나가는 FIFO(First In First Out) 구조입니다. 여기에 있는 콜백 함수들은 콜스택이 비어졌을 때 먼저 대기열에 들어온 순서대로 수행됩니다.

하지만 단순히 비동기 함수가 콜백 큐에 쌓이는 것은 아닙니다.

콜백 큐에는 세 가지 종류가 있습니다.

태스크 큐(Task Queue): 일반적으로 매크로 태스크(Macrotask Queue)라고도 부릅니다. setTimeout, setInterval 등의 비동기 작업이 이곳에 들어가게 됩니다.
마이크로태스크 큐(Microtask Queue): 프로미스(Promise)의 콜백 함수나 async / await과 같은 코드가 이곳에 들어갑니다.
애니메이션 프레임(Animation Frames): 브라우저 환경에서 화면을 업데이트하는 작업도 비동기적으로 처리됩니다. requestAnimationFrames과 같은 코드가 여기에 해당됩니다.

마이크로태스크 큐(Microtask Queue) > 애니메이션 프레임(Animation Frames) > 태스크 큐(Task Queue) 순으로 Microtask Queue가 가장 먼저 실행되고 Task Queue가 가장 늦게 실행되는 우선순위를 가지고 있습니다.

그렇다면 나중에 실행되어야 하는 작업들이 어떻게 실제로 실행될까요?

바로 이벤트 루프(Event Loop)가 그 역할을 담당합니다.

이벤트 루프는 콜 스택과 콜백 큐를 지속적으로 확인하며, 콜 스택이 비어있으면 콜백 큐에서 가장 오래된 작업(FIFO)을 꺼내서 콜 스택으로 옮깁니다.

https://dev.to/lydiahallie/javascript-visualized-promises-async-await-5gke#syntax

// 이벤트 루프의 동작을 나타내는 가상의 코드
while(queue.waitForMessage()){ // 큐에 메시지가 있을 때까지 대기
  queue.processNextMessage(); // 가장 오래된 메시지를 큐에서 꺼내서 호출 스택으로 옮김
}

위 코드는 이벤트 루프의 동작을 간략하게 표현한 코드입니다.

이벤트 루프(Event Loop)의 동작 과정

먼저 이벤트 루프의 동작 방식에 대해서 설명하고 예제들과 함께 설명하겠습니다.

이벤트 루프의 동작 방식은 다음과 같습니다.

콜 스택(Call Stack) 확인: 이벤트 루프는 먼저 현재 콜 스택이 비어 있는지 확인합니다. 만약 콜 스택에 아직 처리되지 않은 함수가 있다면, 해당 함수가 완전히 실행될 때까지 기다립니다.
콜백 큐(Callback Queue) 확인: 만약 콜 스택이 비어 있다면, 이제 콜백 큐를 확인합니다. 콜백 큐에는 웹 API 등에서 생성된 콜백 함수들이 대기합니다.
함수 이동: 콜백 큐에서 가장 오래된 함수를 꺼내서 콜 스택으로 옮깁니다.
함수 실행: 이제 해당 함수가 콜 스택에서 실행되고 실행이 끝나면 콜 스택에서 빠져나가게 됩니다.
위 과정들을 프로그램이 종료될 때까지 반복합니다.

이벤트 루프의 동작 과정을 GIF로 아주 쉽게 이해할 수 있도록 정리해 놓은 분(Lydia Hallie)이 계셔서 해당 이미지를 참고하여 설명하겠습니다.

첫 번째 코드 분석 (setTimeout과 콜백 큐)

그럼 이제 예제 이미지 및 비동기 코드와 함께 확인해볼까요?

function greet() {
  return 'Hello!';
}

function respond() {
  return setTimeout(() => {
    return 'Hey!';
  }, 1000);
}

greet();
respond();

위 코드의 동작 과정은 어떻게 될까요?

먼저 greet 함수를 만나서 호출하게 됩니다.

콜 스택에 실행 중인 함수가 없기 때문에 콜 스택에 greet 함수를 넣어줍니다.

그리고 바로 실행되어 "Hello!"를 출력하고 콜 스택에서 사라지게 됩니다.

다음으로 respond 함수를 만나서 호출합니다.

respond 함수는 Web API가 제공하는 setTimeout 함수를 반환하기 때문에 메인 스레드를 차단하지 않고 작업을 지연시킬 수 있습니다.

우리가 앞에서 이벤트 루프의 중요성에 대해서 알아봤듯이 만약 setTimeout과 같은 함수가 바로 콜 스택에 들어갔다면, 그 함수가 완전히 실행될 때까지 즉, 타이머가 만료될 때까지 다른 모든 작업들은 대기 상태(Blocking)에 놓이게 됩니다.

따라서 setTimeout과 같은 비동기 함수들은 호출되면 웹 API로 전달됩니다.

setTimeout 함수와 respond 함수는 콜 스택에서 빠져나오면서 값을 반환하게 되고 setTimeout에 전달한 콜백 함수는 따로 빠져나와 웹 API로 이동하게 됩니다.

그리고 웹 API에서 setTimeout 함수의 두 번째 인수였던 1000ms(1초)만큼 실행됩니다.

1000ms동안 실행이 끝난 후 바로 콜 스택으로 들어가는 것이 아닌 콜백 큐로 들어가게 됩니다.

자세하게는 태스크 큐(Task Queue)로 들어간 것입니다.

이제 이벤트 루프가 콜 스택이 비어있는지 확인 후, 콜백 큐에 있는 콜백 함수를 콜 스택에 추가합니다.

콜백 함수는 콜 스택에 추가되고, 호출되고, 값을 반환한 뒤에 콜 스택에서 빠져나가게 됩니다.

두 번째 코드 분석 (setTimeout, Promise, Macrotask Queue, Microtask Queue)

console.log('Start!');

setTimeout(() => {
  console.log('Timeout!');
}, 0);

Promise.resolve('Promise!').then(res => console.log(res));

console.log('End!');

그럼 위와 같은 코드는 실행이 어떻게 될까요?

앞에서 설명했듯이 비동기 함수라고 모두 같은 콜백 큐에 추가되는 것이 아니고 우선순위가 있다고 설명했습니다.

먼저 console.log를 만나게 되고 콜 스택에 추가된 후 "Start!"라는 값이 출력된 다음 콜 스택에서 빠져나갑니다.

다음 줄에서 바로 setTimeout 함수를 만나게 됩니다.

setTimeout 내부의 콜백 함수는 웹 API로 넘어갑니다.

인수로 0을 주었지만 비동기 함수의 콜백 함수로 넘겨받았기 때문에 매크로태스크 큐(Macro Queue)에 추가됩니다.

다음 줄에서 바로 프로미스(Promise)를 만나게 됩니다.

Promise.resolve가 콜 스택에 추가된 후 콜백 함수가 마이크로태스크 큐(Microtask Queue)에 추가됩니다.

Promise.resolve는 빠져나오게 됩니다.

console.log를 만난 후 콜 스택에 추가되고 "End!"를 출력하고 콜 스택에서 빠져나옵니다.

이제 콜 스택이 비어있기 때문에 마이크로태스크 큐에 대기 중인 작업이 있는지 확인 후 콜 스택에 추가합니다.

그리고 Promise의 resolve 값인 console.log를 출력하게 됩니다.

이제 다시 마이크로태스크 큐에 대기 중인 작업이 있는지 확인합니다.

대기 중인 작업이 없으니 이제 매크로태스크 큐(Macrotask Queue)를 확인할 차례입니다.

매크로태스크 큐에서 대기 중이었던 setTimeout의 콜백 함수인 console.log("Timeout")을 콜 스택에 추가한 뒤 출력하고 콜 스택엣 빠져나오게 됩니다.

세 번째 코드 분석 (async / await)

ES8에 적용된 async / await 문법으로 Promise를 쉽게 다룰 수 있습니다.

async키워드로 Promise를 반환하는 await 비동키 함수 코드 예제를 마지막으로 살펴보고 마무리하겠습니다.

const one = () => Promise.resolve('One!');

async function myFunc() {
  console.log('In function!');
  const res = await one();
  console.log(res);
}

console.log('Before function!');
myFunc();
console.log('After function!');

위 코드의 실행 결과와 과정은 어떻게 될까요?

먼저 console.log가 콜 스택에 추가된 후 "Before function!"이 출력됩니다.

다음으로 myFunc 함수가 호출되어 콜 스택에 추가됩니다.

그리고 myFunc의 첫 번째 줄에서 console.log가 콜 스택에 추가된 후 "In function!"을 출력한 후 콜 스택에서 빠져나옵니다.

다음으로 one 함수는 Promise를 리턴하기 이전의 함수입니다.

그래서 one 함수를 콜 스택에 추가합니다.

one 함수는 성공된 Promise (resolve)를 반환합니다.

결국 one 함수는 실행이 완료되었기 때문에 콜 스택에서 빠져나가게 됩니다.

하지만 one 함수 앞에 await 키워드가 붙어있기 때문에 해당 함수(myFunc)는 일시 정지 되고 마이크로태스크 큐로 이동하게 됩니다.

await 키워드를 만나면 비동기 함수가 일시 중지 되므로 자바스크립트 엔진은 비동기 함수(myFunc)에서 빠져나온 후,

비동기 함수가 호출 실행 컨텍스(현재 코드는 myFunc을 호출한 곳은 전역 실행 컨텍스트)에서 계속 코드를 실행합니다.

마지막으로 전역 컨텍스트에서 실행할 코드가 없기 때문에 이벤트 루프가 마이크로태스크 큐에 대기하는 작업이 있는지 확인합니다.

확인 결과, myFunc이 존재하기 때문에 one 함수가 호출되고 콜 스택에서 빠져나가고 중단되었던 위치에 다시 실행되게 됩니다.

그래서 마지막으로 console.log를 콜 스택에 추가한 후 반환 된 res의 값을 출력하고 콜 스택에서 빠져나오게 되면서 마무리가 됩니다.

aysnc / await와 Promise는 모두 비동기 작업을 처리하는 방법이지만 동작 방식의 차이점이 있었습니다.

Promise: Promise 객체가 resolve 또는 reject 되면 .thene() 또는 .catch() 내부의 콜백 함수가 마이크로태스크 큐에 추가됩니다.
async / await: async함수 내에서 await 키워드를 만나면, 해당 함수의 실행이 일시 중단됩니다. 이때 반환된 값은 Promise 객체입니다. await 키워드 뒤의 Promise가 resolve 되면, 그 결과 값은 await 표현식 자체를 대체하게 됩니다. 그리고 나서 함수의 나머지 부분이 마이크로태스크 큐에 추가되어 후속 처리됩니다.

📕 마치며

자바스크립트의 핵심 개념 중 하나인 이벤트 루프에 대해서 알아보았습니다.

처음에는 복잡하게 느껴지는 건 사실이지만, 여러 번 보고 이벤트 루프와 각 큐의 동작 방식을 익혀두면 자바스크립트 코드의 동작 원리를 깊게 이해하고 성능 최적화와 디버깅에서 큰 도움을 얻을 수 있다는 점도 알게 되었습니다.

참고 문헌:

저작자표시 비영리 변경금지