🔥 TIL #1. Node에 대한 이해와 맛보기

🌟 Today I learned

1. node 공부를 위해 알아야 할 지식
2. node 로 server 실행 해보기
3. express로 routing 간소화 하기
4. 개발을 위해 알아야 할 기술(서버 자동 재실행, npm)

1. node 공부를 위해 알아야 할 지식

node란 비동기(Asynchronous) 이벤트 기반(event-driven) javascript runtime 환경이다.

1. 비동기(Asynchronous)

비동기란 여러가지 작업을 동시에 하는 것을 의미한다. 예로 집안일을 생각해보자.
빨래, 설거지를 해야 하는 상황일 때 우리는 '빨래'라는 작업을 세탁기에게 맡기고 설거지를 할 것이다. 두 가지 작업이 동시에 처리되므로 이를 비동기라 할 수 있다. 만약 우리가 손빨래를 해야 하는 상황이면 빨래와 설거지를 순차적으로 진행해야 하는데 이는 동기 처리이다.
세탁기란 대행자 덕분에 우리는 시간을 아낄 수 있다.

2. 비동기(Asynchronous) 이벤트 기반(event-driven)

node 환경에서 event는 하나의 요청(http request)과 같다.
'비동기 이벤트 기반'은 '비동기로 이벤트를 처리'를 의미하며 client의 요청에 대한 처리가 끝나기 전에 다음 client의 요청을 받아 처리하는 것을 말한다. 즉, 한 시점에서 여러 요청을 처리 할 수 있다. 여기서 'single thread' 가 등장한다.

하나의 request가 왔을 때의 처리 루틴을 생각해 보자.

GET method로 정보 목록을 달라는 요청일 경우 처리를 위해 Database에 접근, 필요한 data를 수집하여 응답해야 한다. 이는 Heavy load한 작업으로 single thread에서 처리하지 않고 INTENSIVE OPERATION(C++ thread pool) 에 대신 처리토록 위임한다.
즉 single thread는 이벤트(요청)에 대한 처리(응답)만 담당한다.

단지 Javascript로 코드를 작성할 뿐인데 어떻게 이런게 가능할까?

3. Javascript runtime 환경(chrome V8 Engine)

Javascript runtime 환경이란?

JavaScript 로 짜여진 소스코드를 CPU가 이해할 수 있는 기계어(ex. 0과 1로 이루어진 bytecode)로 변환시키고 또한 프로그램의 메모리를 관리하는 시스템

이런 환경을 가능하게끔 하는것이 chrome V8 Engine이다. google web browser에서 사용되는 엔진으로 이를 browser 없이 작동할 수 있도록 만든것이 바로 node이다.

2. node로 server 실행 해보기

아래 코드는 http 모듈을 이용해 server 생성 및 listening 하도록 구현한 코드이다.
createServer() 호출을 통해 웹서버를 만들 수 있다. 호출시 주입하는 callback 함수는 http request가 올때마다 호출되는데 이 때 node 가 트랜잭션을 다루기 위해 request, response 객체를 전달한다.
req 객체의 'url' 및 'method' 속성을 이용, routing 할 수 있으며 여기선 sendPosts라는 함수가 응답처리하도록 구현했다.
응답(res)의 header에 content-type를 json으로 설정, 응답을 json형식으로 할 것임을 지정했다.
require는 전역 또는 사용자 module을 import하는 기능이다.

// chapter1.js
const http = require('http')
const {sendPosts} = require('./sendPosts')

const server = http.createServer((req, res) => {
    const {url, method} = req
    console.log(url, ' ', method)

    console.log('run server')
    res.setHeader('Content-Type', 'application/json')
  
    if (url === '/products' && method === 'GET') {
        sendPosts(res)
        return
    } 

    res.end(JSON.stringify({message:'answer.'}))
})

const PORT = 8000
server.listen(PORT, () => {
    console.log(`Server is listening on PORT ${PORT}`)
})

---

아래 코드는 chapter1.js에서 /products routing에 대한 처리를 하는 함수를 별도로 정의한 js 파일이다.
호출시 res를 매개변수로 받아 res에 데이터를 넣어주는 형식으로 객체를 Json.stringify()를 이용하여 json 문자열로 converting 한다.
마지막 줄에 module.exports 에 함수를 객체로 집어넣고 있다.
외부로 export할 함수는 module.exports에 넣어야 하는데 'property:value' 형식이 우리가 아는 객체 생성 방식이나 property와 value가 같으면 아래처럼 하나로 입력해도 된다.

// sendPosts.js
const sendPosts = (res) => {
    res.end(
      JSON.stringify({ 
          products: [{
            id: 1,
            title: "node",
            description: "node.js is awesome"
          }, {
            id: 2,
            title: "express",
            description: "express is a server-side framework for node.js"
          }
        ]
      }))
  }

  module.exports = { sendPosts } // withoutExpress.js 에서 사용하기 위해 모듈로 내보낸다.

이 상태로 node로 chapter1.js를 실행하면 아래와 같은 화면이 나온다.

그리고 'http'를 이용해 요청을 해보면 아래와 같은 결과가 나온다.

3. express로 routing 간소화 하기

express 란?
express는 node.js를 위한 빠르고 개방적인 간결한 web framework
express reference

위에서 Server 생성 및 routing 하는 방법을 잠시 소개했었다. request의 url 과 method를 체크, 해당 routing에 대응할 함수를 호출하는 방식이었는데 뭔가 복잡해 보인다. routing대상이 많아지면 저 if문이 점점 많아질 것이므로 condition 체크 방식보다 깔끔한 코드가 필요하다.
express는 이런 작업요소를 간소화하여 개발 성능 향상에 도움을 줄 수 있다.
우선 express를 설치해 보자.

npm install express

npm(Node Package Manager) 은 node에서 사용하는 package들을 관리하는 프로그램이다. node를 설치하면 같이 설치되며 python의 pip와 비슷하다.
express 설치가 되었다면 아래 코드를 보자.

// express.js
const http = require('http')
const express = require('express')
//const {sendPosts} = require('./sendPosts')
const {hello, sendPosts} = require('./functions')

// app => application
// Backend 단에서 돌아갈 application
const app = express()

app.get('/', hello)
app.get('/products', sendPosts)

const server = http.createServer(app)
const PORT = 8000
server.listen(PORT, () => {
    console.log(`running server ${PORT}`)
})

위 코드는 chapter1.js와 동일한 작업(web server 실행 및 'products' routing)을 한다.
express 객체를 생성, http request에 대해 url, method 체크하는 과정 대신 express 객체의 함수를 호출하는 방식으로 routing 을 정의한다.
그리고 express 객체를 createServer() 호출시 주입하고 listen()하면 끝이다.
이처럼 express는 개발자가 고려해야 하는 자잘한 부분을 대신 처리해준다. routing은 물론 middleware라는 기능(like decorator) 등 다양한 기능을 제공한다.

4. 개발을 위해 알아야 할 기술(서버 자동 재실행, npm)

내가 만든 node를 다른 장비에서 실행하려면 뭐가 필요할까? 먼저 node를 개발하면서 npm으로 설치했던 package들이 그 장비에서 설치가 되어야 할 것이다. 이에 대한 script를 만들어야 한다.

npm init -y  (설치된 package 정보)

위는 개발이 완료된 node에서 npm 명령으로 현재 node가 dependency 중인 package 정보를 package.json 파일로 생성한다.
위에서 작업한 코드 기준으로 package.json이 생성된 내용은 아래와 같다

{
  "name": "JunSession",
  "version": "1.0.0",
  "description": "",
  "main": "chapter1.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "nodemon express.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "express": "^4.17.1"
  },
  "devDependencies": {
    "nodemon": "^2.0.6"
  }
}

'name'에는 'main'에 해당하는 js파일이 위치한 폴더명이 들어간다.
밑에 'dependencies'를 보면 'express'가 version 정보와 함께 들어가 있는 것을 확인 할 수 있다. npm으로 package를 설치하면 'dependencies' 에 항목에 계속 추가된다.
밑의 'devDependencies' 는 개발용으로 설치한 package를 의미한다. 개발시에만 사용되며 실제 배포되어 설치될땐 포함되지 않는다.

package를 개발용으로 설치하는 명령은 아래와 같다.

npm install -D {설치할 package 이름} (여기서는 nodemon) 

# -D 옵션을 넣으면 개발용임을 의미

위에서 nodemon 이란 package를 개발용으로 설치한 것을 알 수 있다.
nodemon은 server 기동 중에 node source를 수정하면 자동으로 server를 재시작하도록 해주는 package이다. nodemon 을 구동하는 방법은 아래와 같다.

1. package.json 에서 "scripts"에 "dev":"nodemon express.js" 추가.
   (key는 명령어이고 value는 실제로 실행하는 명령)
2. 아래 npm 명령을 통해 실행.
   npm run dev

정상 실행시 아래와 같은 화면이 나온다.

이 상태에서 코드를 수정하면 서버는 재실행 된다.