[Node.js] Express

young·2022년 6월 17일
0

5/25~6/22 Section 2 TIL

목록 보기
25/27

✅ TIL

  • Express
    라우터, 미들웨어
    자주 사용하는 미들웨어 4가지

  • 어제 만든 mini node server 리팩토링하기
    기존에 node.js http 모듈로 작성 -> node.js express 프레임워크로 리팩토링

  • StateAirline 서버 구현하기 (1)

MERN stack : MongoDB, Express, React, Node.js


Refactor Express

1️⃣ Express

npm install express

Node.js 환경에서 웹 서버, 또는 API 서버를 제작할 때 사용하는 프레임워크
HTTP 모듈과 다르게 미들웨어를 추가할 수 있고, 라우터를 제공한다.

간단한 웹 서버 만들기

공식문서

서버의 응답으로 "Hello World!" 를 보낸다.

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

Routing (라우팅)

method와 url에 따라 분기한다.

라우팅: method와 url로 분기점을 만드는 것
클라이언트의 요청에 해당하는 Endpoint에 따라 서버가 응답하는 방법을 결정하는 것

어제 작성했던 Node.js HTTP 모듈에서는 if문으로 라우팅을 했는데,
express에서는 프레임워크 자체에서 라우터 기능을 제공한다.

const router = express.Router()

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

app.post('/', function (req, res) {
  res.send('Got a POST request');
});

app.put('/user', function (req, res) {
  res.send('Got a PUT request at /user');
});

app.delete('/user', function (req, res) {
  res.send('Got a DELETE request at /user');
});

Middleware

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

미들웨어 함수는 요청 오브젝트(req), 응답 오브젝트 (res), 그리고 애플리케이션의 요청-응답 주기 중 그 다음의 미들웨어 함수 대한 액세스 권한을 갖는 함수입니다. 그 다음의 미들웨어 함수는 일반적으로 next라는 이름의 변수로 표시됩니다.


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

Express v4. 16.0 부터 body-parser 설치 대신 Express 내장 미들웨어인 express.json()을 사용한다.

const jsonParser = express.json();

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

})

어제 Node.js로 HTTP body를 받을 때에는 네트워크 상의 chunk를 합치고 Buffer를 문자열로 변환해야 했다.

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

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

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

// 특정 요청에 대해 CORS 허용
app.get('/products/:id', cors(), function (req, res, next) {
  res.json({msg: 'This is CORS-enabled for a Single Route'})
})

Node.js HTTP 모듈에서 CORS 헤더를 붙일 때에는 response.writeHead(statusCode, {headers})와 함께
OPTIONS 메서드 라우팅 구현을 해야 했다.


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

app.use()app.METHOD() 함수를 이용해 애플리케이션 미들웨어를 앱 오브젝트의 인스턴스에 바인드하십시오.
이때 METHOD는 미들웨어 함수가 처리하는 요청(GET, PUT 또는 POST 등)의 소문자로 된 HTTP 메소드입니다.

Mount 경로가 없는 미들웨어 함수는 앱이 요청을 수신할 때마다 실행된다.

var app = express();

//1 모든 요청에 mount 되는 미들웨어
app.use(function (req, res, next) {
  console.log('Time:', Date.now());
  next();
});

//2 모든 요청에 mount 되는 미들웨어
const myLogger = function (req, res, next) {
  console.log('LOGGED');
  next();
};

app.use(myLogger);


//3 특정 경로에 mount되는 미들웨어
app.get('/', function (req, res) {
  res.send('Hello World!');
});

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

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

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



2️⃣ Mini Node Server Refactor Express

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

const server = express();
server.use(cors());
server.use(express.json({strict: false}));

express 프레임워크를 불러오고,
express.json의 option을 {strict: false}로 설정해주었다.

https://expressjs.com/ko/4x/api.html#express.json

기본값 {strict: true}에 대한 설명
Enables or disables only accepting arrays and objects; when disabled will accept anything JSON.parse accepts.

//endpoint '/' 서버 만들기
server.get('/', (req, res) => {
  res.send('Hello World!')
})

server.post('/upper', (req, res) => {
  res.json(req.body.toUpperCase());
})

server.post('/lower', (req, res) => {
  res.json(req.body.toLowerCase());
})

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

어제 Node.js HTTP 모듈로 구현한 것과 마찬가지로
'/upper'와 '/lower'에 POST method를 사용하면
response.json() 으로 request의 body에 대한 응답을 보내도록 express를 사용하여 리팩토링 했다.

response.send()는 다양한 유형의 응답을 전송하는 method고
response.json()은 JSON 응답을 전송하는 method이기 때문에
응답을 json 형식으로 보내야 하는 상황이라 response.json()을 사용했다.


3️⃣ StateAirline 서버 구현하기 (1)

(수정중)

req.params

profile
즐겁게 공부하고 꾸준히 기록하는 나의 프론트엔드 공부일지

0개의 댓글