TIL.98 Node.js란?

Node란

비동기(Asynchronous) 이벤트-기반(event-driven) JavaScript 런타임 환경이다.

 

javascript는 기본적으로 브라우저에 내장되어있다.

따라서 Node 이전까지는 javascript를 인터넷 브라우저에서만 실행할 수 있고, 브라우저의 환경에서만 사용할 수 있는 언어였다.

 

Node를 이용해 Javascript를 유저 컴퓨터 환경에서 사용할 수 있게 되었고 즉,

브라우저의 밖으로 꺼내 유저가 사용할 수 있게 되었다고 한다.

따라서 javascript로 서버를 만들수도 있고 웹 스크래퍼를 만들어 웹페이지에 접속해서 정보들을 수집할 수 있게 되었다.

브라우저와는 별도로 작동할 수 있는 무언가를 만들 수 있게 된 것이다.

---

이렇게 javascrip를 사용할 수 있게되면서 자연스럽게 javascript의 특성을 그대로 종속하게 된다.

그 중 비동기(Asynchronous)에 대해 알아보자.

1. 비동기란

프로그램의 다른 부분(기능 또는 함수)들이 서로 방해(blocking)하지 않고 동시에 일어날 수 있음을 뜻한다.

 

예를 들어 '나'라는 주체가 집청소를 하는 과정을

"동기적" 으로 예로 들어보자(출처 : 위코드)

const meSync = {
  laundry: () => {
    console.log('세탁기 돌리기 시작')
    let percentage = 25

    while (percentage !== 100) {
      console.log(`${percentage}% 완료`)
      percentage += 25
    }

    console.log(`${percentage}% 빨래 완료`)
  },
  dishes: () => console.log('설거지 하기'),
  toilet: () => console.log('화장실 청소 하기'),
}

const doWorkSync = () => {
  meSync.laundry()
  meSync.dishes()
  meSync.toilet()
}

doWorkSync()

// 동기적인 실행결과
세탁기 돌리기 시작
25% 완료
50% 완료
75% 완료
100% 빨래 완료
설거지 하기
화장실 청소 하기

간단하게 순서만 가지고 설명한다면

1. 세탁기를 돌리기 시작

2. 세탁기 가동률이 25 , 50, 75, 100% 완료될때까지 아무것도 하지 않고 기다린다.

3. 세탁기 가동이 완료되면 그때부터 설거지를 시작하고

4. 설거지를 마무리 한 후 화장실 청소를 시작한다.

 

동기적으로 일을 수행한다는 것은 이전의 작업이 마무리 되어야 다음 일을 수행할 수 있다는 뜻이다.

---

같은 예를

"비동기적" 으로 들어보자(출처 : 위코드)

const meAsync = {
  laundry: () =>
    new Promise((resolve, reject) => {
      // setInterval => 비동기적으로 수행하는 코드
      console.log('세탁기 돌리기 시작')
      let percentage = 25

      const intervalId = setInterval(() => {
        console.log(`${percentage}% 완료`)
        percentage += 25

        if (percentage === 100) {
          clearInterval(intervalId)
          console.log(`${percentage}% 빨래 완료`)
          resolve()
        }
      }, 100)
    }),
  dishes: () => console.log('설거지 하기'),
  toilet: () => console.log('화장실 청소 하기'),
}

const doWorkAsync = () => {
  meAsync.laundry()
  meAsync.dishes()
  meAsync.toilet()
}

doWorkAsync()

// 비동기적인 실행결과
세탁기 돌리기 시작
설거지 하기
화장실 청소 하기
25% 완료
50% 완료
75% 완료
100% 빨래 완료


🚀 비동기 코드 동기적으로 수행하기
const doWorkAsync = async () => {
  await meAsync.laundry()
  meAsync.dishes()
  meAsync.toilet()
}

doWorkAsync()

// 비동기로 작동하는 함수를 동기적으로 실행시킨 결과
세탁기 돌리기 시작
25% 완료
50% 완료
75% 완료
100% 빨래 완료
설거지 하기
화장실 청소 하기

간단하게 순서만 가지고 설명한다면

1. 세탁기를 돌리기 시작

2. 세탁기를 돌려놓은 후 설거지 시작

3. 설거지를 마무리하면 화장실 청소를 시작

4. 화장실 청소 마무리 여부와 상관없이 세탁기 가동률이 상승

(설거지 하는 시간 및 화장실 청소에 걸리는 시간에 따라 결과는 달라질수있다)

 

여기서 주목해야할 점은 

"비동기" ==> "동기" 로

처리하기 위해 Promise 객체가 사용된다는 것 Async/Await 를 사용한 다는 것/

이를 이용해 실행결과가 달라짐을 주목하자.

 

여기서 비동기 처리가 필요한 이유를 생각해보자

화면에서 서버로 데이터를 요청했을 때 서버가 언제 그 요청에 대한 응답을 줄지도 모르는데 마냥 다른 코드를 실행 안 하고 기다릴 순 없기 때문입니다. 위에선 간단한 요청 1개만 보냈는데 만약 100개 보낸다고 생각해보세요. 비동기 처리가 아니고 동기 처리라면 코드 실행하고 기다리고, 실행하고 기다리고.. 아마 웹 애플리케이션을 실행하는데 수십 분은 걸릴 것이다.

따라서 이렇게 특정 로직의 실행이 끝날 때까지 기다려주지 않고 나머지 코드를 먼저 실행하는 것이 비동기 처리이다.

 

---

2. 비동기 이벤트 기반(Event-Driven)

Node 환경에서 이벤트(Event)는 하나의 요청과도 같다고 볼 수 있다.

여기서의 요청은 백엔드 서버를 구현할 우리에게 하나의 HTTP Reqquest와 같다고 봐도 무방하다.

즉, Node 입장에서 이벤트는 ==> 프론트엔드(클라이언트)에서 받는 요청이다.

Node가 "비동기적"으로 :이벤트를 처리한다는 것"은

앞선 클라이언트의 요청이 끝나기 전에 다음 클라이언트의 요청을 받는다는 의미이다

 

따라서 한 시점에 여러 요청을 수행할 수 있게 되는 것이며 여기서 싱글 스레드(Single)_Thread)라는 개념을

이용해  알아보자.

Node.js_ event loop 출처 : 위코드

예를들어 Node로 인스타그램 백엔드 API를 구현했다고 가정해보자

클라이언트(유저)가 인스타그램 앱에 접속하여 게시물을 조회하는 API를 통해 Node 서버에 요청을 보낸다

Request와 Response 사이에는 수 많은 일이 일어난다.

우리 유저인지 검증도 해야하고, DB에 접근해서 자원을 소모해야하는 일인지 아닌지도 로직으로 판단하여 알맞는 요청에 맞는 알맞는 응답을 보내줘야 한다.

이때 Node의 싱글 스레드는 오른쪽 초록색에 있는 C++로 짜여진 쓰레드 풀에 DB에 접근하는 자원을 소모하는 일(역할)을 맡긴다.

(여기서 핵심은 "역할"을 맡는다는 것이다)

 

즉, 자원이 많이 들어가는 일은 쓰레드 풀에 맡겨놓고 Node의 싱글스레드는 그저 이벤트(요청)을 처리(응답)해 주는 역할을 할뿐이다.

 

카페에서 주문만 따로 받는 점장과 음료만 만드는 바리스타로 예를 들어보자

만약 점장 혼자서 있었다면

1주문 -> 1제조

1주문 -> 1제조 와 같이 동기적으로 수행할것이다.

즉, 주문을 받은 후 제조를 마무리할때까지 또 다른 주문을 받을 수 없다.

하지만 쓰레드 풀과 같은 제조의 역할만을 수행할 수있는 바리스타가 등장한다면 얘기가 달라진다.

 

점장은 클라이언트1의 주문(이벤트,요청)을 받고 연이어 클라이언트2의 주문을 받을 수 있게 된다.

클라이언트1의 요청이 완료될때까지 기다리지 않고 다음 주문을 받을 수 있는 것이다!

 

따라서 싱글 스레드는 여러 요청을 한 시점에 처리 할 수 있게 된다

( C++쓰레드 풀이 자원이 많이 드는 일음 감당하기 떄문에 노드의 싱글 스레드는 방해를 받지 않는다)

 

---

3. JavaScript 런타임 환경

그럼 이쯤에서 우리는 JavaScript 로 코드를 작성할 뿐인데 어떻게 비동기 이벤트-기반의 처리가 가능한 것일까?

JavaScript 런타임 환경의 정의는 다음과 같다.

JavaScript 로 짜여진 소스코드를 CPU가 이해할 수 있는 기계어

(ex. 0과 1로 이루어진 bytecode)로 변환시키고 또한 프로그램의 메모리를 관리하는 시스템

 

이러한 환경을 가능하게끔 하는 것이 Chrome의  V8 엔진이다.

이는 우리가 알고 있는 구글의 크롬 브라우저에서 작동하는 엔진으로 이 엔진이 브라우저 없이 작동할 수 있도록 만든 환경이 바로 Node인 것이다.

 

위의 설명하였던 비동기-이벤트-기반의 처리를 이 Chrome의 V8 엔진이 담당한다.

즉, 싱글 스레드 기반의 동작 원리를 이해하고 javascript로 코드를 작성하면 뒷단(쓰레드풀의 역할)을 V8 엔진이 알아서 처리해준다.

이 때문에 javascript 코드가 빠르고 안정성 있는 앱을 설계 할 수 있다고 한다!

 

핵심

• 비동기: 기다리지 않음
• 이벤트-기반: 싱글-스레드
• JavaScript 런타임 환경: C++ Chrome V8 엔진

이렇게 각각 키워드와 매칭해서 한번 더 생각해보면 좋을 것 같다.

 

출처 : > wecode | 위코드 | 코딩 부트캠프 | 코딩교육

WeCode | 위코드 | 코딩 부트캠프 | 코딩교육