[C/F TIL] 37일차 - Refactor Express, Middleware

Code States
Front-end boost camp
Today
I
Learned

🍀 37일차!

🍀 Express 시작하기

• Node.js가 이미 설치 되었다고 가정, 어플을 보관할 디렉토리 생성

npm init

위 명령 활용해 package.json 파일 작성 -> enter 누르면 기본값

npm instiall express

위 명령 활용해 express 설치

🍀 Middleware

• 자동차 공장에서 컨베이어 벨트 위에 올려진 자동차 뼈대에 공정마다 부품을 추가한 뒤 완성 or 불량품이 결과로 나오는 것과 비슷
• 컨베이어 벨트 위 요청(Requesr)에 필요한 기능을 더하거나, 문제가 발견된 불량품을 밖으로 걷어내는 역할

🍀 미들웨어를 사용하는 상황

✔️ POST 요청 등에 포함된 body를 구조화할 때

• Node.js 로 HTTP body(payload)를 받을 때는 Buffer를 조합해서 다소 복잡한 방식으로 body를 얻을 수 있다.
• 네트워크 상 chunk를 합치고 Buffer를 문자열로 변환하는 작업이 필요

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

위 코드를 body-parser 미들웨어를 사용하면?? ▼

// npm으로 body-parser 설치
npm install body-parser

// 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();

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

})

// express.json() 미들웨어 사용에 에러가 난다면?
const jsonParser = express.json({strict: false});

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

})

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

• Node.js HTTP 모듈을 이용한 코드에 CORS 헤더를 붙이려면, 응답 객체의 writeHead 메서드를 이용
  -- 라우팅마다 헤더를 매번 넣어줘야함
  -- 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(200, defaultCorsHeader);
  res.end()
}

• cors 미들웨어를 사용하면? ▼

// npm으로 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'})
})

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

• 프로세스 중간에 관여하여 특정 역할을 수행
• 미들웨어는 다양함
• 일반적인 미들웨어의 구성 ▼
  
  -- endpoint가 / 이면서 클라이언트로부터 GET 요청을 받았을 때 적용되는 미들웨어, 순서에 유의
• 만약, 특정 endpoint가 아니라, 모든 요청에 동일한 미들웨어를 적용하려면?
  -- 메서드 app.use 사용 ▼

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

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

app.use(myLogger);

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를 활용합니다.
  next();
};

app.use(myLogger);

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

app.listen(3000);

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

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

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