1. Node.js 핵심 개념 이해 (2) - Event Driven, Context [1/2]

 

 

 

 

 

앞선 아티클에서 Node.js와 자바스크립트의 기본적인 특성에 대해서 설명하고 있었습니다. 지금부터는 좀 더 자바스크립트와 노드의 근본적인 동작 원리와 연계된 특성을 살펴보겠습니다. 자바스크립트 핵심 원리와도 연계되는 내용이니, 잘 확인하고 넘어가시기 바랍니다. 

 

 

 

---

 

 

 

○ 이벤트 기반(Event Driven)

 

이벤트 기반(event-driven)으로 동작한다는 것의 의미는 무엇일까요? 가장 쉽고 단순한 언어로 설명하면 이는 "어떤 이벤트가 발생할 때, 미리 지정해 둔 작업을 수행하는" 방식을 의미합니다. 여기서 이벤트는 클릭, 완료, 스크롤 등등의 주요 동작들이 해당합니다. 

 

이러한 이벤트 기반 언어나 시스템에서 우리는 사전에 '특정 이벤트가 발생하면 - 이러저러한 동작을 수행하라'라는 형태의 작업을 미리 등록해 둬야 하겠죠? 여기서 등록하게 되는 작업을 콜백(callback) 함수로 칭합니다. 그리고, 이 이벤트와 콜백 함수를 지정해 두는 곳을 이벤트 리스너(event listener)로 칭합니다.

 

* [클릭]을 하면 [경고창을 띄워라]라는 동작을 이벤트 리스너에 선언해 두는 형태가 되겠습니다. 

 

노드는 이 이벤트 기반의 방식으로 동작합니다. 그래서 특정 이벤트가 발생하면 콜백 함수를 호출하고, 만일 이벤트가 없거나 모두 처리되었다면 다음 이벤트가 생길 때까지 대기하게 됩니다. 

 

자, 아래 Javascript 관련 아티클에서 설명한 event-driven, 콜백 함수에 관한 정의도 함께 살펴보시기 바랍니다. 이벤트 핸들러에 콜백 함수를 등록해 사용하는 예시도 함께 익히시기 바랍니다.

 

7. Javascript 함수 (4) - 콜백 함수란

 

 

 

 

---

 

 

 

○ 이벤트 루프(Event Loop)

 

이벤트 루프는 우선 간단하게 정리해서 "여러 이벤트가 동시에 발생하면 - 어떤 순서로 콜백 함수를 호출하는지 판단하는지" 에 대한 개념입니다. 참고로 루프(loop)라는 단어가 들어가서, 뭔가 반복 처리에 특화된 것으로 착각할 수 있지만 이는 노드가 종료될 때까지 계속 이벤트 처리를 진행하기 때문에 붙은 명칭입니다. 

 

복잡해지기 전에, 쉽고 명확하게 설명하겠습니다. 자바스크립트 코드의 작성 순서에 따라, 코드 실행 시 위에서부터 차례로 실행합니다. 그러다가 함수 호출 부분이 나오면, 그 호출된 함수는 호출 스택(call stack)에 들어갑니다. 여기서 스택(stack)이란 단어를 사용했으니 눈치 채셨겠지만, 이는 FILO(first in - last out)의 형태가 됩니다. 즉, 제일 먼저 호출된 함수는 마지막에 결과가 나오는 것이죠.

 

자, 아래와 같은 코드를 보겠습니다. 이 코드의 실행 결과는 어떻게 나올까요?

 

function first(){
    second();
    console.log("1번");
}

function second(){
    third();
    console.log("2번");
}

function third(){
    console.log("3번");
}

first();

 

 

first( ) 함수를 실행함으로써 우선 first( ) 함수가 스택에 쌓이게 됩니다. 참고로 스택에는 기본적으로 전역 객체가 존재하는 것은 기억해 두겠습니다. 그리고 first 함수가 실행되면서 다시 second 함수의 실행 라인을 만나죠. 이제 second 함수 역시 호출 스택에 쌓입니다. 그리고 second 함수가 또 실행되면서 third 함수를 실행하는 라인을 만납니다. 이제 third 함수까지 스택에 쌓였습니다. 

 

함수 실행으로인해 호출 스택에 함수가 쌓이는 순서는 아래와 같습니다. 

4. third( )

3. second( )

2. first( )

1. anonymous

 

 

그럼 이제, 실제로 해당 함수가 실행이 되어야 하겠습니다. 실행 순서는 스택이 쌓이는 순서와 반대입니다. 

(1) third( )

(2) second( )

(3) first( )

(4) anonymous

 

 

그럼 실행 결과는 예상이 됩니다. 

function first(){
    second();
    console.log("1번");
}

function second(){
    third();
    console.log("2번");
}

function third(){
    console.log("3번");
}

first();

/* 출력
3번
2번
1번
*/

 

 

자, 해당 개념은 Javascript 기본 개념 중 실행 컨텍스트와도 거의 유사한 관점에서 다뤄지는 내용입니다. setTimeout 함수를 이용해 세부적인 실행 방식을 살펴보기 전에, 실행 컨텍스트에 대해서도 충분히 복습해 봅시다.

 

11. Javascript 실행 컨텍스트(1) - 실행 컨텍스트의 개념