[Javascript] 이벤트 루프 (Event Loop) 란?

✨  JS, Event Loop, Single Thread

NodeJs 의 single/multi thread 여부를 정리하다보니 Js 의 Event Loop 개념을 조금 더 확실히 알아두어야겠다는 생각이 들었다. 

[NodeJS] NodeJS 는 Single Thread 일까? Multi Thread 일까?

 

자바스크립트는 싱글스레드 언어이다. 하지만 이전 글에서도 볼 수 있었듯, 멀티스레드처럼 동시에 여러 태스크의 작동이 가능하다. 이 특징은 브라우저 런타임 환경에서도 동일하다. 

 

왜일까?

 

바로 런타임 환경 (Node, 브라우저)의 이벤트 루프라는 시스템 덕분이다. 그렇다면 이벤트 루프가 무엇인지 구체적으로 들어가보자.

 

✨  Javascript ?

우선 MDN 이 정의하는 Javascript 는 다음과 같다. 

JavaScript(JS) is a lightweight, interpreted, or just-in-time compiled programming language with first-class functions. While it is most well-known as the scripting language for Web pages, many non-browser environments also use it, such as Node.js, Apache CouchDB and Adobe Acrobat...

 

음. 설명이 다소 어렵다는 감이 와, 다른 정의를 찾아보게 되었다.

W3 Schools 에서는 Javscript 를 간략히 정의하고 있다.

 

JavaScript is the Programming Language for the Web.

 

이전보다 조금 더 직관적이며 명확한 설명이다. "자바스크립트는 웹을 위한 프로그래밍 언어이다."

 

자바스크립트가 웹에 특화된 언어라면, 자바스크립트가 웹에서 작동할 수 있도록 하는 일련의 장치들이 분명 존재할 것이다. 특히, 비동기 작업을 위한 장치가 존재할 것이 분명하다. 그 '일련의 장치'가 바로 이번 글에서 다루게 될 "Event Loop" 이다. 

 

 

✨  Heap & Call Stack 

Javascript 는 그 자체로 실행되지 않으며, Javascript 를 실행하게 해주는 특정 엔진이 필요하다. 그 중 하나가 바로 Chrome 에 내장된 자바스크립트 실행 엔진 V8 이다. 하지만 이보다 깊게 들어가기 전에, Javascript 엔진인 V8은 크게 두 가지 구성요소로 나뉜다는 사실을 알아야 한다. 

 

Heap: 

- 메모리 할당이 이루어지는 공간

 

Call Stack: 

- 실행되어야 하는 작업이 쌓이는 공간 (console.log 나 사용자 지정 함수) 

- Single-thread 이기 때문에, 한 번에 하나의 작업만 수행 가능하다. 

 

 

 

 

📌 여기서 중요한 것은 Call Stack 의 작동 방식이다. 

 

함수 실행 call 이 이루어지는 순간, 해당 함수는 call stack 에 담기며,

함수 내부의 순서에 따른 실행 순서대로 stack 에 계속 작업할 내역이 쌓이게 된다.

Stack 에 더 이상 담을 수 있는 call 이 없다면, 나중에 들어온 작업부터 실행이 되어 Stack 을 빠져나간다. (LIFO, 선입후출 법칙) 

 

📌 Stack 에 있는 작업이 실행되는 시간이 매우 길다면?  이 현상이 바로 Blocking 이다. 

 

Stack 에서는 한 작업을 수행하는 동안 다른 작업으로 넘어갈 수 없기 떄문에, 특정 작업 수행 시간이 길어지면 나머지 작업이 계속 "대기중" 상태에 머무를 수밖에 없다. 이러한 Blocking 현상이 전체 웹 렌더링 시에 발생하게 된다면 유저는 특정 작업이 끝날 때까지 버튼 클릭을 하지 못하거나, 계속 로딩창을 바라보기만 해야 할 수도 있는 것이다. 

 

 

✨  Asynchronous (비동기) 함수와 Event Loop

위에서 언급된 Stack 의 기본적인 작동 흐름이 야기하는 문제점에 대한 간단한 해결책이 바로 비동기 함수이다. 작업 시간이 오래 걸리는 코드의 경우, 비동기적으로 실행하도록 설정해 둠으로써 Call Stack 이 아닌 "다른 영역" (추후 설명 예정) 에서 작업을 하도록 하는 것이다. 이 경우, Blocking 현상을 방지할 뿐만 아니라 코드 실행을 여러 측면에서 효율적으로 할 수 있게 된다. 

 

📌 그렇다면 비동기 함수를 실행하는 그 "다른 영역"은 대체 어디인가? 

 

여기서 존재감을 드러내는 것이 아까 언급했던 이벤트 루프이다. 이벤트 루프는 런타임 환경에 내장된 여러 장치들과 자바스크립트 엔진을 활용해 비동기 처리를 하는 일종의 동작 시스템이다. 자바스크립트 런타임은 한 번에 한 가지 작업만 수행할 수 있지만, 브라우저에서 제공하는 Web API 덕분에 비동기 함수를 병렬적으로 처리할 수 있게 된다. (Node에서는 C++ API 를 통해 가능하다) 

 

📌  Event Loop 의 역할 

 

Event Loop 의 역할은, Task Queue 와 Call Stack 을 꾸준히 감시하는 것이다. 

스크립트 실행 중 Stack 에 들어온 동기 함수는 바로 실행되어 Stack 을 빠져나가지만, 비동기 함수는 브라우저의 Web ApI 로 이동해 이 공간에서 작업을 진행한다. 그리고 비동기 함수의 작업이 완료되는 순간 브라우저의 "Task Queue" 라는 공간으로 들어간다. 이벤트 루프는 Queue 와 Stack 을 계속 지켜보다가, Stack 가 비었다는 것을 알아차리는 순간, Task Queue 에 들어온 첫 번째 요소부터 순서대로 다시 Stack 에 올려 함수가 실행되도록 한다. 

 

사실 이 이미지 한 장이면 모든 내용을 다 파악할 수 있긴 하다

 

이렇게 하여 JS 에서의 동기/비동기 함수의 실행 원리, 그리고 이벤트 루프의 개념까지 괄목하여 정리되었다. 

 

 

✨  배운 내용

• Event Loop 는 .. 엔진이 아니다.. 그동안 잘못된 표현을 사용해 왔는데, 앞으로는 용어에 더 신경 써야겠다. 
• 브라우저 런타임과 Node 의 작동 원리는 기본적으로 동일하다. 그 실행 환경이 활용하는 API 또는 언어 배경이 무엇이냐에 차이가 있을 뿐이다. 

 

✨  참고자료

• JavaScript Visualized: Event Loop
• 어쨌든 이벤트 루프는 무엇입니까? | Philip Roberts | JSConf EU
• [요약] What the heck is the event loop anyway? 이벤트 루프란 무엇인가?