[JS] 이벤트 루프

Node.js 교과서 조현영님 책 글을 참고 하였습니다.

http://www.yes24.com/Product/Goods/116192535

Node.js 교과서 - YES24

이벤트 기반 시스템에서는 특정 이벤트 발생시 어떤 동작을 할지 미리 등록되어 있어야 한다.

이것을 이벤트 리스너에 콜백함수를 등록 한다고 표현한다.

이벤트 기반 시스템(자바스크립트)에서는 여러 이벤트가 동시에 발생했을때 순위에 대한 판단 처리를 위한 이벤트 루프라는게 존재한다.

 

자바스크립트 런타임은 자바스크립트를 위에서 한줄씩 실행하며. 

함수 호출부를 발견하면 호출한 함수를 호출 스택에 넣는다.

다음과 같다

 

function first() {
  second();
  console.log('첫 번째 함수: first');
}

function second() {
  third();
  console.log('두 번째 함수: second');
}

function third() {
  console.log('세 번째 함수: third')
}

first()

세 번째 함수: third
두 번째 함수: second
첫 번째 함수: first

 

다음과 같은 케이스가 있다 (전형적인 예시)

function timerCallback() {
  console.log('3초 후 실행된다')
}

console.log('Start');
setTimeout(timerCallback, 3000);
console.log('End');

// 결과
// Start
// End
// 3초 후 실행된다

호출 스택으로 설명하기 위해서는 다음의 개념에 대한 이해가 필요하다.

 

이벤트 루프: 이벤트 발생시 호출할 콜백 함수를 관리하고 등록된 콜백 함수의 실행 순서를 결정하는 역할

태스크 큐: 이벤트 발생후 호출되어야 할 콜백 함수가 등록된 대기 공간, 콜백 큐라고도 함.

백그라운드: 타이머나  I/O 작업 콜백 또는 이벤트 리스너가 대기하는 공간

 

1. anonymous 함수(전역 컨텍스트) 가 호출 스택에 들어가고 그 뒤에 setTimeout 이 호출 스택에 들어간다.

2. 호출 스택의 맨 위부터 실행됨으로 setTimeout 이 먼저 실행되면 타이머와 함께 run 콜백을 백그라운드로 전달, 호출 스택에서 빠짐

3. 그 다음으로 anonymous 가 호출 스택에서 빠진다.

4. 백그라운드에서는 3초를 대기 한 다음 run 함수를 태스크큐로 보낸다.

5. 호출 스택의 실행이 끝나서 스택이 비워지면 이벤트 루프는 태스크 큐의 run 콜백을 호출 스택으로 올린다.

6. 호출 스택에 올라간 run 은 실행 완료후 호출 스택에서 제거된다

 

만약에 호출 스택에 함수들이 너무 많이 있으면 3초가 지난후에도 run 콜백이 실행되지 않을 수 있다.

그런 이유로 setTimeout 의 시간은 정확한 시간이 아닐수도 있는 상황이 발생한다.