Event Loop (이벤트 루프) 란?

Asher Park·2023년 4월 13일
0
post-thumbnail

Event Loop ❓

Event Loop (이벤트 루프) 란, 자바스크립트에서 비동기 작업을 관리하는 메커니즘.

  • Call Stack / Web API / Task Queue / Microtask Queue 를 활용하여,
    싱글 스레드 언어임에도 불구하고 동시성을 지원.

Call Stack (호출 스택)

현재 실행중인 함수가 저장되는 자료구조로, LIFO (Last In First Out) 를 따르는 Stack 구조이다.
어떤 함수가 동작하고 있고, 그 함수 내에서 어떤 함수가 동작하는 지, 다음에 어떤 함수가 호출되어야하는지 등을 제어한다.
MDN Call Stack

Web API

브라우저에서 제공하는 비동기 기능들을 담당하는 영역이다.
DOM, Ajax, setTimeout, Event Handler 등이 있다.
Call Stack에서 실행된 비동기 기능은 Web API를 호출하고, Web API는 콜백 함수를 Task Queue에 넣는다.

Task Queue / CallBack Queue

비동기 작업이 완료된 콜백 함수들이 대기하는 영역이다.
FIFO (First In First Out) 을 따르는 Queue 구조이다.

Microtask Queue

주로 Promise, async/await 과 같은 콜백 함수들이 대기하는 영역이다.
이벤트 루프는 우선적으로 Microtask Queue를 확인한다.


동작 과정 ❓

아래의 코드를 예시로 들어 설명하겠다.

console.log('Script Start!')

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

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

console.log('Script End!')
  • console.log('Script Start!') 가 Call Stack에서 실행되어 출력된다.

  • setTimeout() 이 Call Stack에서 실행되고 Web API를 호출하여,
    console.log('setTimeout!') 을 Task Queue 에 넣는다.

  • Promise() 가 Call Stack에서 실행되고 Web API를 호출하여,
    console.log(res) 를 Microtask Queue에 넣는다.

  • console.log('Script End!') 가 Call Stack에서 실행되어 출력된다.

  • 이벤트 루프는 Microtask Queue를 항상 우선적으로 확인하므로,
    console.log(res) 가 먼저 Call Stack에 불려와 실행된다.

  • Microtask Queue가 다 비워지면, Task Queue를 확인하여,
    console.log('setTimeout!) 을 실행한다.

따라서, 출력 결과는 다음과 같다.

Script Start!
Script End!
Promise!
setTimeout!

이벤트 루프가 왜 필요할까 ❓

자바스크립트는 한 번에 하나의 작업만 처리할 수 있는 싱글 스레드 언어다.
브라우저의 화면을 렌더링 하는 작업과 같이 중요한 동작들이 하나의 스레드에서 동작한다.
하나의 스레드에서 동작하는 것은, 하나의 작업을 오랫동안 처리 하고있다면 다른 작업이 지연된다는 의미이다.

예를 들어, 무한 루프와 같은 코드를 작성한다면, 모든 작업을 지연시키고 아무 입력도 동작하지 않을 것이다.

따라서, 싱글 스레드 환경에서 하나의 작업이 아주 오랫동안 실행되어선 안되고, 작업 순서의 관리가 중요하다.

이벤트 루프의 목적은, 시간이 오래 걸리는 작업을 병렬적으로 처리하여, 주요 작업 흐름을 차단하지 않는 것이고,
이를 통해 성능과 사용자 경험이 개선되는 것이다.


참조
titu.log - Task Queue 말고 다른 큐가 더 있다고?
Tecoble - 이벤트 루프, 넌 누구냐

profile
배움에는 끝이없다

0개의 댓글