MERN stack

= MongoDB, Express, React, Node.js

Express

Node.js 환경에서 웹 서버, API 서버를 만들기 위해 사용하는 프레임워크

• HTTP트랜젝션을 간소화한 것

• Express로 구현한 서버 - Node.js HTTP 모듈로 작성한 서버와의 차이점

1. 미들웨어를 추가할 수 있다.
2. 라우터를 제공한다.

1. Express 시작하기

1) 설치

npm install express

2) 웹 서버 만들기

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

3) 라우팅 - 메서드와 url에 따라 라우팅(분기)하기

시작하기 - 기본 라우팅

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

클라이언트는 특정한 HTTP 요청 메서드(GET, POST 등)와 함께 서버의 특정 URI(또는 경로)로 HTTP 요청을 보냅니다. 라우팅은 클라이언트의 요청에 해당하는 Endpoint에 따라 서버가 응답하는 방법을 결정하는 것입니다.

const router = express.Router()

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

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

2. 미들웨어 Middleware

요청에 필요한 기능을 더하거나, 발견된 문제를 걷어내는 역할을 한다.

다음의 상황에서 사용한다

1. POST 요청 등에 포함된 body(payload)를 구조화할 때(쉽게 얻고자 할 때)
2. 모든 요청/응답에 CORS 헤더를 붙여야 할 때
3. 모든 요청에 대해 url이나 메서드를 확인할 때
4. 요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때

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

1) Node.js HTTP 모듈 방법

= 복잡한 방식으로 body(payload)를 받음.
네트워크 상의 chunk를 합치고, Buffer를 문자열로 변환하는 작업을 거친다.

let body = [];
request.on('data', (chunk) => { // 네트워크 상의 chunk를 합치고
  body.push(chunk);
}).on('end', () => {
  body = Buffer.concat(body).toString(); // Buffer 문자열로 변환
  // 변수 body에 문자열 payload가 담김
});

2) body-parser 미들웨어 설치 후 사용

= HTTP 모듈보단 간단해진 절차.

npm install body-parser

const bodyParser = require('body-parser');
const jsonParser = bodyParser.json();
// 생략
app.post('/users', jsonParser, function (req, res) {

})

3) ✅ Express v4.16.0부터 Express 내장 미들웨어 express.json() 사용

body-parser설치 안하고, 내장 미들웨어 express.json() 사용

const jsonParser = express.json();
// 생략
app.post('/api/users', jsonParser, function (req, res) {

})

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

1) Node.js HTTP 모듈 방법

응답객체.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(201, defaultCorsHeader);
  res.end()
}

2) ✅ cors 미들웨어 사용

HTTP 모듈 방법을 간소화한 방법이다.

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