node.js 호출 스택 call stack, 이벤트 루프 event loop

---

호출 스택

자바스크립트는 단일 스레드 프로그래밍 언어이므로, 단일 호출 스택이 있다.

단일 호출 스택이 있다는 뜻은 한 번에 하나의 일(Task)만 처리할 수 있다는 뜻이다.
호출 스택이란 프로그램에서 우리가 어디에 있는지를 기본적으로 기록하는 데이터 구조로 동작 방식은 다음과 같다.

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

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

function third(){
    console.log('세 번째');
}

first();

위와 같은 코드가 있다고 가정해 보자.

과연 호출 순서는 어떻게 될까?

정답은 세 번째 → 두 번째 → 첫 번째가 된다!! 오잉 어떻게 된 것일까?

Anonymous은 가상의 전역 컨텍스트로 항상 있다고 생각하는 게 좋다.

함수를 실행하면 해당 함수의 기록을 스택 맨 위에 추가(Push) 한다.

그래서 위 코드에서 본 것처럼 first가 먼저 호출되고,

first 안의 second가 호출되고, second 안에 third가 호출되어,

바로 위의 그림처럼 쌓이게 된다.

그러고 나서, 해당 함수가 결과 값을 반환하면 스택에 쌓여있던 함수는 제거(Pop)되며 위에서 아래 순서대로 실행한다.

한 마디로 함수 호출 순서는, 순서대로 쌓이고, 역순으로 실행된다!!!!

이번엔 다른 코드 예제를 보도록 하겠다.

function run(){
    console.log('3초 후 실행');
}

console.log('시작');

setTimeout(run, 3000);

console.log('끝');

과연 호출 순서는?!?!?!?!?!?

정답은 시작 → 끝 → 3초 후 실행이 된다!!

Event Loop(이벤트 루프)는 setTimeout과 같은 이벤트 발생 시, run과 같은 콜백 함수들을 관리하고 호출할 순서를 결정한다.

Task Queue(태스크 큐)는 이벤트 발생 후 호출되어야 콜백 함수들이 순서대로 기다리는 공간이다.

현재 왼쪽 그림 1-6에서, setTimeout()이 호출 스택에 쌓임과 동시에,

run 함수가 setTimeout에 의해 Background(백그라운드)로 보내지고,

3초(=3000ms)가 지난 후, 태스크 큐로 보내주게 된다.

이때, run()은 위에서 설명했듯, 태스크 큐에서 대기 중이다!

여기서 Background(백그라운드)는 타이머나 I/O 작업 콜백, 이벤트 리스너들이 대기하는 공간으로 여러 작업이 동시에 실행될 수 있다.

 

우측 그림으로 넘어와서, 그림 1-7과 같이 setTimeout과 anonymous가 실행 완료된 후 호출 스택이 완전히 비워지면,

이벤트 루프가 태스크 큐의 콜백인 run을 호출 스택으로 올린다.

이때, 호출 스택이 지금은 비어있지만, 호출 스택에 다른 함수들도 대기하고 있다면,

3초가 지나도 run() 함수는 태스크 큐에서 대기하게 된다.(←이 것이 setTimeout이 정확하지 않을 수 있는 이유!!)

어쨌든, 지금은 그림 1-8처럼 호출 스택에 run()만 있다는 가정 하에,

run()은 호출 스택에서 실행되고, 완료 후 호출 스택은 비워진다.

그림에서는 태스크 큐가 한 개만 나와있지만, 실제로는 여러 개이고,

이벤트 루프는 계속해서 태스크 큐들에 다음 함수가 들어올 때까지 대기한다!

여기까지가 이벤트 루프 설명 끝!

 

글로만 봤을 때는 잘 몰랐지만, 코드를 직접 실행하면서,

그림과 병행하며 보니 그나마 이해하는데 도움이 되는 것 같다!

이 포스팅을 보시는 분들도 그랬으면 좋겠다!

 

언제나 새로운 정보 공유와 잘못된 정보

비판/지적/태클은 환영입니다!

도움이 되셨다면 공감♥️, 댓글 부탁드려요:)

끝.

Reference

Node.js 교과서 2장 요약정리