TIL 36일차

시작하며

오늘은 어제 node의 http 트랜젝션을 사용하여 구현한 웹 서버를 Express.js를 사용한 코드로 변환하는 스프린트를 진행하였다. 기존에 복잡하게 작성했던 코드들을 단순하게 작성할 수 있어서 Express 프레임워크는 잘 활용할 수 있어야겠다고 생각했다.

Express

MERN stack은 JavaScript 생태계에서 인기 있는 프레임워크인 MongoDB, Express, React, Node를 지칭하는 말이며, 이 중에서 Express.js는 Node.js 환경에서 웹 서버, 또는 API 서버를 제작하기 위해 사용되는 인기 있는 프레임워크이다.

Mini Node Server Express로 구현하기

const express = require('express')
const cors = require('cors')
const app = express()
app.use(cors())
app.use(express.json({strict: false}))
const PORT = 5000;
const ip = 'localhost';
app.post('/upper', (req, res) => {
  res.json(req.body.toUpperCase())
})
app.post('/lower', (req, res) => {
  res.json(req.body.toLowerCase())
})
app.listen(PORT, () => {
  console.log(`http server listen on ${ip}:${PORT}`)
})

Express를 사용하니 기존에 복잡하게 작성했던 코드들을 간단하고 보기 쉽게 작성할 수 있었다.

---

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

변경 전

let body = [];
request.on('data', (chunk) => {
  body.push(chunk);
}).on('end', () => {
  body = Buffer.concat(body).toString();
});
//또는
let body = '';
request.on("data", (chunk) => {
  body += chunk;
})

변경 후

const express = require('express')
const app = express()
app.use(express.json({strict: false}))

기존에는 빈 배열이나 빈 문자열을 만든 후 데이터를 순차적으로 추가하여 문자열로 변경해주는 형태로 코드를 작성했지만 Express의 경우, express.json({strict: false})을 사용하면 req.body에 JSON 형태의 payload가 담기게 된다.(예전에는 bodyParser를 별도로 설치해야했지만 최신버전의 Express에는 bodyParser의 기능이 포함되어 있다.) express.json은 여러 옵션이 있는데 그중 strict의 기본값은 true로 배열이나 객체 형태만 인식하므로 위 코드처럼 {strict: false}로 설정해주어야 한다.

모든 요청/응답에 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
};
// 생략
if (req.method === 'OPTIONS') {
  res.writeHead(201, defaultCorsHeader);
  res.end()
}

변경 후

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

기존에는 OPTIONS라는 메소드에 대한 응답으로 'Access-Control-Allow-Origin': '*'이 포함된 헤더를 전송해줘야 했지만, Express의 cors를 사용하면 위 두줄의 코드로 해결할 수 있고 모든 요청에 허용을 원하지 않을 경우 corsOptions로 설정할 수 있다.

마치며

Node의 새로운 기능을 배우며 어떤 방식으로 Node.js를 사용해야 하는지를 알게 되었다. 코스가 시작되는 초반에 설치한 Node를 활용하고 Express와 같은 프레임워크를 사용하면서 서버 구축을 하기 위해 어떤 형태로 코드를 작성해야 하는지 방향을 잡을 수 있었다. 작동원리는 이해했지만 아직 생소한 메소드들이 많기 때문에 공식문서를 보면서 더 공부해야겠다.