[자바스크립트] 비동기적 처리를 위한 '이벤트 루프'에 대해 알아보자

https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

 

이벤트 루프의 존재 이유 : 비동기적 처리! 자바스크립트의 쓰레드 블로킹 최소화

자바스크립트는 싱글 쓰레드 기반의 언어로, 한 번에 한 가지 일만 처리할 수 있다. 즉 모든 작업을 순차적으로 처리하며 하나의 작업이 끝나기 전에는 다른 작업을 수행할 수 없다.

 

자바스크립트는 기본적으로는 동기적인 방식으로 동작한다. 동기적으로 동작할 때 발생할 수 있는 문제는 쓰레드 블로킹(Thread Blocking)이다. 쓰레드 블로킹은 어떤 쓰레드가 특정 작업을 수행하는 동안, 다른 쓰레드들이 해당 작업이 끝날 때까지 대기하는 상태를 말한다. setTimeout 같은 동작이 요구될 때를 말한다. 이러한 상황은 프로그램의 실행 속도를 느리게 하고, 성능에 영향을 미치고, 교착상태(데드락) 같은 문제를 초래할 수 있다.

 

이런 문제를 해결하기 위하여 자바스크립트에서는 주로 비동기적인 패턴을 사용하여 프로그래밍한다. 비동기 방식은 작업을 수행하는 동안 다른 작업을 수행할 수 있으므로, 쓰레드 블로킹을 최소화 할 수 있다. 이때 이벤트루프는 자바스크립트의 비동기 처리 방식을 구현하는 핵심 메커니즘이라고 할 수 있다.

 

이벤트 루프의 동작 원리

이벤트 루프는 콜 스택과 태스크 큐, 백그라운드, 그리고 Web API(DOM API, setTimeOUt, HTTP 요청 등)를 사용하여 작동한다.

 

- 콜 스택은 코드를 실행해주는 곳으로, 현재 실행중인 함수의 스택 프레임을 저장

- 태스크 큐는 콜백 함수들이 저장되는 대기 큐

- 백그라운드는 웹 브라우저나 Node.js와 같은 환경에서 제공되는 비동기 API를 실행하는 곳

- 웹 API는 백그라운드에서 제공되는 브라우저 API

 

이벤트 루프의 동작 방식은 다음과 같다. 콜 스택(코드를 실행해주는 곳)과 태스크 큐(대기실)를 모니터링하면서, 콜 스택이 비는 경우 태스크 큐에 있는 콜백 함수를 꺼내 콜 스택으로 이동시켜 실행한다.

 

함수를 호출하면 콜 스택이라는 항목에 추가 된다. 이 때 추가 방식은 누적 형태로 먼저 들어간 순서대로 아래에 깔린다. 함수가 값을 반환하면 콜 스택에서 제거된다. 제거되는 순은 역순이다. 마지막에 추가된 것부터 제거된다.

 

움직이는 그림으로 살펴보자. (그림2) setTimeout과 같이 실행에 시간이 걸리는 코드(Ajax 요청, 이벤트리스너, setTimeout 등)는 스택에서 바로 처리하는 게 아니라, (그림3) 시간이 걸리는 코드는 큐로 보내 대기시킨다. 스택은 바쁘게 돌아가는 곳이기 때문이다. (그림4) 스택이 비어 있는 경우에는 스택으로 보낸다. (그림5) 콜백 함수가 스택에 추가되고, 실행된다. 값을 반환하면 스택에서 제거된다. 

 

이를 통해 비동기적으로 실행되는 코드들도 콜 스택이 빌 때까지 대기하다가 실행되므로, 쓰레드 블로킹을 방지할 수 있다.

 

이벤트 루프를 이용하여 비동기 처리를 구현하면, 쓰레드 블로킹을 방지하고 보다 효율적인 코드를 작성할 수 있다. 

 

연관 개념

Heap, Stack, 콜 스택, 태스크 큐, 백그라운드, 웹 API

쓰레드 블로킹

Promise, async/await 등의 비동기 처리 방식

 

 

 

참고 및 사진 자료 출처

https://dev.to/lydiahallie/javascript-visualized-event-loop-3dif

✨♻️ JavaScript Visualized: Event Loop

https://www.youtube.com/watch?v=v67LloZ1ieI