node.js의 express로 서버 만들기

Express (공식문서)

: JavaScript 생태계에서, 인기있는 프레임워크의 앞글자를 따서 MERN stack으로 흔히 부르곤 합니다. (MongoDB, Express, React, Node)
이들 중 Express.js는 Node.js 환경에서 웹 어플리케이션 혹은 API를 제작하기 위해 사용되는 인기있는 프레임워크입니다.

Express 설치하기

$ npm init 이 코드로 패키지 제이슨 파일을 만든다.

$ npm install express express를 설치한다.

설치하려는 디렉토리에 위와 같은 키워드를 터미널에 적으면 설치 할 수 있다.

Express로 서버 만들기

(공식문서에서 자세히 보기)

const express = require('express')
const app = express()
const port = 3000
// 위와 같이 express와 app을 변수로 사용한다.
app.get('/', (req, res) => { // get 메소드 일때,
  res.send('Hello World!')  //  응답 보내기
})
app.listen(port, () => {
  console.log(`Example app listening at http://localhost:${port}`)
})

공식문서로 가서 한번 만들어보는것을 추천함 !

Express를 사용하면 라우팅을 쉽게 할 수 있다. 기존에 순수하게 node.js로 만들었던 코드와 익스프레스로 만든것을 비교하는것을 예로 들어보자.

라우팅이란?
라우팅은 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말한다.

순수 node.js 로 만든것

const requestHandler = (req, res) => {
  if(req.url === '/messages') {
    if (req.method === 'GET') {
      res.end(messages)
    } else if (req.method === 'POST') {
      req.on('data', (req, res) => {
        // ...
      })
    }
  }
}

Express로 만든것

app.get("/messages", (req, res) => {
  res.send(JSON.stringify(body));
});
app.post("/messages", jsonParser, function (req, res) {
  // req.body에는 JSON의 형태로 payload가 담겨져 있습니다.
  res.status(201);
  body.results.push(req.body);
  // body.results.push(JSON.parse(req.body));
  res.send(JSON.stringify(body));
});

app.METHOD(PATH, HANDLER) 와 같은 형식으로 라우팅이 가능하다.

여기서

• app은 express의 인스턴스이다.
• METHOD는 HTTP 요청 메소드(ex> get, post, put, delete)이다.
• PATH는 서버에서의 경로입니다.
• HANDLER는 라우트가 일치할 때 실행되는 함수입니다.

Middleware(미들웨어)

(공식문서)
: 미들웨어는 간단하게 생각하면 컨베이어 벨트 위에 올라가있는 request에 무언가 악세사리를 덕지 덕지 붙이거나, 혹은 불량품이라면 밖으로 걷어내는 역할을 한다고 보면 좋다. 미들웨어는 express의 가장 큰 장점 중 하나다.

자주 사용하는 4가지 미들웨어

1. 모든 요청에 대해 url이나 메소드를 알고자 할 때
2. POST 요청 등에서 쓰이는 body(payload)를 쉽게 얻어내고자 할 때
3. 모든 요청/응답에 CORS 헤더를 붙일 때
4. 요청 헤더에 사용자 인증 정보가 담겨있는지 확인하고 싶을 때

node.js만을 이용해서 구현할 때에 다소 번거로운 작업을 미들웨어를 통해 적용하면, 보다 손쉽게 해결할 수 있습니다.

2,3번은 Express에서 흔히 사용되는 미들웨어입니다. 1,4번을 제외하고 각각의 경우를 한번 살펴봅시다.

POST 요청 등에서 쓰이는 body(payload)를 쉽게 얻어내고자 할 때

node.js에서 순수하게 만들때,

let body = [];
request.on('data', (chunk) => {
  body.push(chunk);
}).on('end', () => {
  body = Buffer.concat(body).toString();
  // body 변수에는 문자열 형태로 payload가 담겨져 있습니다.
});

미드웨어를 사용할때, (먼저 설치를 하고, API를 사용한다)

Installation(설치하기)

$ npm install body-parser

API

var bodyParser = require('body-parser')

Usage(사용하기)

const bodyParser = require('body-parser')
const jsonParser = bodyParser.json()
app.post('/api/users', jsonParser, function (req, res) {
  // req.body에는 JSON의 형태로 payload가 담겨져 있다.
})

모든 요청/응답에 CORS 헤더를 붙일 때

node.js만 사용할때

const defaultCorsHeader = {
  'Access-Control-Allow-Origin': '*',
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  'Access-Control-Allow-Headers': 'Content-Type, Accept',
  'Access-Control-Max-Age': 10
};
// 생략
if (req.method === 'OPTIONS') {
  res.writeHead(201, defaultCorsHeader);
  res.end()
}

미드웨어를 사용할때,

Installation(설치하기)

$ npm install cors

API

var cors = require('cors')

Usage(사용하기)

const cors = require('cors')
// 생략
app.use(cors()) // 모든 요청에 대해 CORS 허용

위 그림은 endpoint가 /이면서, GET 요청을 받았을 때에, 사용하는 미들웨어이다. 주목할 것은 파라미터 순서다. req, res는 우리가 잘 아는 요청/응답이며, next는 다음 컨베이어 벨트로 넘기는 작업한다.
현재 미들웨어 내부에서는 아무런 일도 하고 있지는 않다. 그저 next() 함수를 호출하여 다음 컨베이어 벨트로 넘길 뿐이다.

404 응답을 어떻게 처리해야 할때,
: Express에서 404 응답은 오류로 인해 발생하는 결과가 아니며, 따라서 오류 핸들러(error-handler) 미들웨어는 이를 파악하지 않습니다. 이렇게 작동하는 이유는 404 응답은 단순히 실행해야 할 추가적인 작업이 없다는 것, 즉 Express는 모든 미들웨어 함수 및 라우트를 실행했으며 이들 중 어느 것도 응답하지 않았다는 것을 나타내기 때문입니다. 이를 처리하려면 다음과 같이 404 응답을 처리하기 위한 미들웨어 함수를 스택의 가장 아래(다른 모든 함수의 아래)에 추가하기만 하면 됩니다.

app.use(function(req, res, next) {
  res.status(404).send('Sorry cant find that!');
});

다양한 메소드 및 정보