코드스테이츠 8주차[FE 41기]

이번 챕터에서는
과제 - Mini Node Server에서 HTTP 모듈로 작성했던 서버를, 프레임워크 Express를 이용하는 방식으로 리팩토링하였다.

1. 간단한 웹 서버 만들기

시작하기에 앞서 먼저 Express를 설치 하였다.

npm install express

그리고 응답으로 'Hello World!'를 보내는 Express 서버 코드를 작성해 보았다.

const express = require('express')
const app = express()
const port = 3000

app.get('/', (req, res) => {
  res.send('Hello World!')
})

app.listen(port, () => {
  console.log(`Example app listening on port ${port}`)
})

2. 라우팅: 메서드와 url에 따라 분기(Routing)하기

메서드와 url(/lower, /upper 등)로 분기점을 만드는 것을 라우팅(Routing)이라고 한다.

Express는 프레임워크 자체에서 라우터 기능을 제공하기 때문에 아래와 같이 직관적으로 코드를 작성할 수 있다.

const router = express.Router()

router.get('/lower', (req, res) => {
  res.send(data);
})

router.post('/lower', (req, res) => {
  
})

자주 사용하는 미들웨어

1. POST 요청 등에 포함된 body(payload)를 구조화할 때(쉽게 얻어내고자 할 때)

Node.js로 HTTP body(payload)를 받을 때에는 Buffer를 조합해서 다소 복잡한 방식으로 body를 얻을 수 있다.

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

body-parser 미들웨어를 사용하면 이 과정을 간단하게 처리할 수 있지만,
Express v4.16.0 부터는 body-parser를 따로 설치 하지 않고, Express 내장 미들웨어인 express.json()을 사용한다고 한다.

const jsonParser = express.json();

// 생략
app.post('/api/users', jsonParser, function (req, res) {

})

2. 모든 요청/응답에 CORS 헤더를 붙여야 할 때

Node.js HTTP 모듈을 이용한 코드에 CORS 헤더를 붙이려면, 응답 객체의 writeHead 메서드를 이용할 수 있다. Node.js에서는 이 메서드 등을 이용하여 라우팅마다 헤더를 매번 넣어주어야 하고, OPTIONS 메서드에 대한 라우팅도 따로 구현해야 한다.

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()
}

하지만
cors 미들웨어를 사용하면 이 과정을 간단하게 처리할 수 있다.

const cors = require('cors');

// 생략
app.use(cors());

3. 모든 요청에 대해 url이나 메서드를 확인할 때

특정 enpoint가 아니라, 모든 요청에 동일한 미들웨어를 적용하려면 메서드 app.use 를 사용하면 된다.

const express = require('express');
const app = express();

const myLogger = function (req, res, next) {
  //req를 활용합니다.
  next();
};

app.use(myLogger);

app.get('/', function (req, res) {
  res.send('Hello World!');
});

app.listen(3000);

4. 요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때

토큰을 통해 로그인 여부를 확인하는 미들웨어의 예

app.use((req, res, next) => {
  // 토큰이 있는지 확인, 없으면 받아줄 수 없음.
  if(req.headers.token){
    req.isLoggedIn = true;
    next();
  } else {
    res.status(400).send('invalid user')
  }
})