: JavaScript 생태계에서, 인기있는 프레임워크의 앞글자를 따서 MERN stack으로 흔히 부르곤 합니다. (MongoDB, Express, React, Node)
이들 중 Express.js는 Node.js 환경에서 웹 어플리케이션 혹은 API를 제작하기 위해 사용되는 인기있는 프레임워크입니다.
$ npm init
이 코드로 패키지 제이슨 파일을 만든다.
$ npm install express
express를 설치한다.
설치하려는 디렉토리에 위와 같은 키워드를 터미널에 적으면 설치 할 수 있다.
const express = require('express') const app = express() const port = 3000 // 위와 같이 express와 app을 변수로 사용한다. app.get('/', (req, res) => { // get 메소드 일때, res.send('Hello World!') // 응답 보내기 }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`) })
공식문서로 가서 한번 만들어보는것을 추천함 !
Express를 사용하면 라우팅을 쉽게 할 수 있다. 기존에 순수하게 node.js로 만들었던 코드와 익스프레스로 만든것을 비교하는것을 예로 들어보자.
라우팅이란?
라우팅은 URI(또는 경로) 및 특정한 HTTP 요청 메소드(GET, POST 등)인 특정 엔드포인트에 대한 클라이언트 요청에 애플리케이션이 응답하는 방법을 결정하는 것을 말한다.
순수 node.js 로 만든것
const requestHandler = (req, res) => { if(req.url === '/messages') { if (req.method === 'GET') { res.end(messages) } else if (req.method === 'POST') { req.on('data', (req, res) => { // ... }) } } }
Express로 만든것
app.get("/messages", (req, res) => { res.send(JSON.stringify(body)); }); app.post("/messages", jsonParser, function (req, res) { // req.body에는 JSON의 형태로 payload가 담겨져 있습니다. res.status(201); body.results.push(req.body); // body.results.push(JSON.parse(req.body)); res.send(JSON.stringify(body)); });
app.METHOD(PATH, HANDLER)
와 같은 형식으로 라우팅이 가능하다.
여기서
(공식문서)
: 미들웨어는 간단하게 생각하면 컨베이어 벨트 위에 올라가있는 request에 무언가 악세사리를 덕지 덕지 붙이거나, 혹은 불량품이라면 밖으로 걷어내는 역할을 한다고 보면 좋다. 미들웨어는 express의 가장 큰 장점 중 하나다.
node.js만을 이용해서 구현할 때에 다소 번거로운 작업을 미들웨어를 통해 적용하면, 보다 손쉽게 해결할 수 있습니다.
2,3번은 Express에서 흔히 사용되는 미들웨어입니다. 1,4번을 제외하고 각각의 경우를 한번 살펴봅시다.
POST 요청 등에서 쓰이는 body(payload)를 쉽게 얻어내고자 할 때
node.js에서 순수하게 만들때,
let body = [];
request.on('data', (chunk) => {
body.push(chunk);
}).on('end', () => {
body = Buffer.concat(body).toString();
// body 변수에는 문자열 형태로 payload가 담겨져 있습니다.
});
미드웨어를 사용할때, (먼저 설치를 하고, API를 사용한다)
Installation(설치하기)
$ npm install body-parser
API
var bodyParser = require('body-parser')
Usage(사용하기)
const bodyParser = require('body-parser') const jsonParser = bodyParser.json() app.post('/api/users', jsonParser, function (req, res) { // req.body에는 JSON의 형태로 payload가 담겨져 있다. })
모든 요청/응답에 CORS 헤더를 붙일 때
node.js만 사용할때
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() }
미드웨어를 사용할때,
Installation(설치하기)
$ npm install cors
API
var cors = require('cors')
Usage(사용하기)
const cors = require('cors') // 생략 app.use(cors()) // 모든 요청에 대해 CORS 허용
위 그림은 endpoint가 /이면서, GET 요청을 받았을 때에, 사용하는 미들웨어이다. 주목할 것은 파라미터 순서다. req, res는 우리가 잘 아는 요청/응답이며, next는 다음 컨베이어 벨트로 넘기는 작업한다.
현재 미들웨어 내부에서는 아무런 일도 하고 있지는 않다. 그저 next() 함수를 호출하여 다음 컨베이어 벨트로 넘길 뿐이다.
404 응답을 어떻게 처리해야 할때,
: Express에서 404 응답은 오류로 인해 발생하는 결과가 아니며, 따라서 오류 핸들러(error-handler) 미들웨어는 이를 파악하지 않습니다. 이렇게 작동하는 이유는 404 응답은 단순히 실행해야 할 추가적인 작업이 없다는 것, 즉 Express는 모든 미들웨어 함수 및 라우트를 실행했으며 이들 중 어느 것도 응답하지 않았다는 것을 나타내기 때문입니다. 이를 처리하려면 다음과 같이 404 응답을 처리하기 위한 미들웨어 함수를 스택의 가장 아래(다른 모든 함수의 아래)에 추가하기만 하면 됩니다.
app.use(function(req, res, next) { res.status(404).send('Sorry cant find that!'); });