MERN stack 인기짱 프레임워크인 MongoDB,Express, React, Node.js를 의미한다. (리액트가 왜 여기선 프레임워크,,,?)
그 중 Express는 Node.js환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 프레임워크
Express로 구현한 서버가 Node.js HTTP모듈로 작성한 서버와 다른점
1. 미들웨어를 추가할 수 있다.
2. 라우터를 제공한다.
라우팅
메서드와 url(/lower, /upper 등)로 분기점을 만드는것
클라이언트는 특정한 HTTP 요청메서드(GET,POST)와 함께 서버의 특정 URI(또는 경로)로 HTTP요청을 보낸다.
라우팅은 클라이언트의 요청에 해당하는 Endpoint에 따라 서버가 응답하는 방법을 결정하는것.
미들웨어(Middleware)
요청에 필요한 기능을 더하거나, 문제가 발견된 불량품을 밖으로 걷어내는 역할
자주사용하는 미들웨어
1. POST요청 등에 포함된 body(payload)를 구조화할 때(쉽게 얻어내고자 할 때)
Node.js에서는 HTTP body(payload)를 받을 때는 Buffer를 조합해서 복잡하게 body를 얻었다.
네트워크상의 데이터조각인chunk를 합치고, buffer를 몬자열로 변환하는 작업이 필요했다.
=> express.json({strict:false})
2. 모든 요청/응답에 CORS 헤더를 붙여야 할 때
writeHead 메서드
=> app.use() 모든요청 허용
app.get(){res.json()}
3. 모든 요청에 대해 url이나 메서드를 확인할 때
미들웨어 : 프로세스 중간에 관여하여 특정 역할 수행
그중 하나 예로 들자면
로거 : 디버깅, 서버관리 도움되기 위해 console.log로 적절한 데이터나 정보 출력
4. 요청 헤더에 사용자 인증 정보가 담겨 있는지 확인할 때
HTTP요청에서 토큰이 있는지 판단해서 이미 로그인한 사용자일 경우 성공 아닐경우 에러를 보내는 미들웨어
서버는 요청에 포함된 데이터를 통해 미들웨어가 요구하는 조건에 맞지 않으면
불량품으로 판단하고 돌려보내도록 구현할 수 있다.
어제의 과제를 리펙토링 해보자
Express 모듈 사용
const http = require('http');http모듈대신
const express = require('express');
const app = express();http 모듈 대신 express 프레임워크 모듈사용
express 어플리케이션 객체를 만든다.
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
};SOP오류는 CORS 설정을 해주지않으면 생긴다.
CORS는 서로 다른 출처의 리소스에 접근할 때 요청과 응답에
특정한 헤더를 추가해서 브라우저에서 SOP를 피할 수 있다.
직접 CORS 헤더를 사용하는 것은 CORS처리를 수동으로, 커스텀로직을 구현하는 것이다.
const cors = require('cors')
app.use(cors());Express프레임워크를 사용해서 서버를 만드는 경우에는 CORS 미들웨어를 불러와 설정해줄 수 있다.
express.json()
app.use(express.json({strict: false}));
app.post('/upper', (req, res) => {
res.json(req.body.toUpperCase());
})
app.post('/lower', (req, res) => {
res.json(req.body.toLowerCase());
})
app.listen(PORT, ip, () => {
console.log(`http server listen on ${ip}:${PORT}`);
});공식문서 Hello World 예제에서 간단한 Express 앱을 확인 할 수있다.
app.use(express.json({strict: false}));express.json() 메서드는 JSON데이터를 파싱해서 JS객체로 변환해준다.
파싱할 때 기본값은 true이며 이때는 데이터가 객체가 아니라면 에러가 발생한다.
false로 설정을 해주면 다른 형태의 데이터로도 변환이 가능하다.
if(request.method === "POST" && request.url ==="/upper"){
let body = [];
request.on('data', (chunk) => {
body.push(chunk);
}).on('end', () => {
body = Buffer.concat(body).toString();
response.writeHead(200, defaultCorsHeader);
response.end(body.toUpperCase());
});
}POST요청에 포함된 body를 구조화 할 때
HTTP모듈에서는 데이터조각 chunk를 합쳐서 문자열로 변환하는 작업을 해주었다.
app.post('/upper', (req, res) => {
res.json(req.body.toUpperCase());
})하지만 Express에서는 내장 미들웨어인 express.json()메서드를 이용해서 간단하게 작성할 수 있다.
