S2) Unit 10. [Web Server] Refactor Express

📣  Express

✔️ Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 프레임워크

✔️ Node.js HTTP 모듈로 작성한 서버와 다른 점

     ➰ 미들웨어를 추가할 수 있다.

     ➰ 라우터를 제공한다.

 

1️⃣ Express 설치

npm install express

 

2️⃣ 간단한 웹 서버 만들기

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

➰ 응답으로 Hello World!를 보내는 Express 서버 

 

3️⃣ 라우팅: 특정 메서드와 URI로 분기점을 만드는 것

➰ 클라이언트는 특정한 HTTP 요청 메서드(GET, POST 등)과 함께 서버의 특정 URI로 HTTP 요청을 보낸다.

➰ 클라이언트의 요청에 해당하는 Endpoint에 따라 서버가 응답하는 방법을 결정하는 것

//Node.js
const requestHandler = (req, res) => {
  if(req.url === '/lower') {
    if (req.method === 'GET') {
      res.end(data)
    } else if (req.method === 'POST') {
      req.on('data', (req, res) => {
        // do something ...
      })
    }
  }
}

//Express : 자체적으로 라우터 기능 제공
const router = express.Router()

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

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

 

📣  미들웨어

✔️ express의 가장 큰 장점으로, 요청에 필요한 기능을 더하거나, 문제가 발견된 것을 밖으로 걷어내는 역할

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

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

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

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

 

1️⃣ POST 요청 등에 포함된 body(payload)를 구조화할 때

➰ Node.js로 HTTP 요청 body를 받는 코드

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

 

➰ body-parser 미들웨어 사용

npm install body-parser

const bodyParser = require('body-parser');
const jsonParser = bodyParser.json();

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

})

 

➰ Express 내장 미들웨어 express.json() 사용

const jsonParser = express.json({strict: false});

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

})

➰ strict:false 처리를 해줘야 Object 형태가 아닌 데이터도 받을 수 있다.

 

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

➰ Node.js에 CORS를 적용하는 방법

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 미들웨어 사용

npm install cors

// 모든 요청에 대해 CORS 허용
const cors = require('cors');

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

// 특정 요청에 대해 CORS 허용
const cors = require('cors')

// 생략
app.get('/products/:id', cors(), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for a Single Route'})
})

 

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

➰ 미들웨어는 프로세스 중간에 관여하여 특정 역할을 수행한다.

➰ 가장 단순한 미들웨어인 로거(logger)는 디버깅이나, 서버 관리에 도움이 되기 위해 console.log 로 적절한 데이터나 정보를 출력한다.

➰ 미들웨어 사이사이에 로거를 삽입하여 현재 데이터를 확인하거나, 디버깅에 사용할 수 있다.

➰ endpoint 가 '/' 이면서, 클라이언트로부터 GET 요청을 받았을 때 적용되는 미들웨어이다.

➰ req, res는 요청, 응답이고 next는 미들웨어를 실행하는 역할이다.

➰ 모든 요청에 동일한 미들웨어를 적용하려면 app.use 메서드를 사용하면 된다.

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

const myLogger = function (req, res, next) {
  console.log('LOGGED');
  next();
};

app.use(myLogger);
// 모든 요청에 동일한 미들웨어를 적용한다.
// 모든 요청에 대해 LOGGED가 출력된다.

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

app.listen(3000);

 

✏️ 모든 요청에 대해 메서드와 url 출력하기

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

const myLogger = function (req, res, next) {
  //req를 활용합니다.
  console.log(`http request method is ${req.method}, url is ${req.url}`);
  next();
};

app.use(myLogger);

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

app.listen(3000);

 

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

➰ HTTP 요청에서 토큰이 있는지 판단하여, 이미 로그인한 사용자일 경우 성공 아닐 경우 에러를 보내는 미들웨어

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

➕ 토큰(Token)

➰ 주로 사용자 인증에 사용한다.