[ Code States ] Refactor Express 과제

Refactor Express 과제

1. Mini Node Server에서 HTTP 모듈로 작성했던 서버를, 프레임워크 Express를 이용하는 방식으로 리팩토링한다.

---

요구 사항 / 기본 세팅

1. Express 설치

npm install express

2. 간단한 웹 서버 만들기 / 참고 해서 코드 작성하기

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에 따라 분기(Routing)하기

 

 

Mini Node Server에서 HTTP 모듈로 작성했던 서버 코드

const http = require('http');

const PORT = 4999;

const ip = 'localhost';

const server = http.createServer((request, response) => {
  // preflight request 처리 -> 메소드가 option 일때, cors 설정을 돌려줘야 한다.
  // 메소드가 post고, url이 /upper면 대문자로 응답을 돌려줘야 한다
  // 메소드가 post고, url이 /lower면 소문자로 응답을 돌려줘야 한다
  // 나머지는 다 에러로 처리한다. bad request

  const { method, url } = request;

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

      if (request.method === 'POST' && request.url === '/upper') {
        response.writeHead(200, defaultCorsHeader);
        response.end(body.toUpperCase());
      } else if (request.method === 'POST' && request.url === '/lower') {
        response.writeHead(200, defaultCorsHeader);
        response.end(body.toLowerCase());
      } else if (request.method === 'OPTIONS') {
        response.writeHead(200, defaultCorsHeader);
        response.end();
      } else {
        response.writeHead(404, defaultCorsHeader);
        response.end('잘못된 요청');
      }
    });
});

server.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

const defaultCorsHeader = {
  // 모든 Origin에서 오는 요청을 허용
  'Access-Control-Allow-Origin': '*',
  // 모든 HTTP 메서드 허용
  'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
  // 요청을 허용하는 헤더
  'Access-Control-Allow-Headers': 'Content-Type, Accept',
  // 클라이언트에서 preflight 의 요청 결과를 저장할 기간을 지정
  'Access-Control-Max-Age': 10,
};

결론은 http모듈로 작성했던 위 코드를 Express 모듈을 이용한 코드로 리팩토링하라는 과제이다.

---

 

Express와 CORS 미들웨어를 사용하여 HTTP 서버를 작성한 코드

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

const app = express(); //express 사용

app.use(cors()); // 모든 요청/응답에 CORS 처리
app.use(express.json({ strict: false })); // 자동 바디 파싱

const PORT = 4999;
const ip = 'localhost';

app.post('/upper', function (req, res) {
  let result = req.body;
  result = result.toUpperCase();
  res.json(result); // 다시 데이터를 보내줄 때 json화 해서 보내주는 메소드
});

app.post('/lower', function (req, res) {
  let result = req.body;
  result = result.toLowerCase();
  res.json(result);
});

app.use(function (req, res, next) {
  // 400에러 즉, 클라이언트의 잘못으로 인한 에러는 인자에 err를 넣지 않는다.
  res.status(404).send('Something broke! 404');
});

app.use(function (err, req, res, next) {
  //에러 처리
  console.error(err.stack);
  res.status(500).send('Something broke! 500');
});

app.listen(PORT, ip, () => {
  console.log(`http server listen on ${ip}:${PORT}`);
});

 

과제를 통해 알게 된 지식 / 각각의 역할

 

1. const app = express()

- Express 앱을 생성

 

2. app.use(cors())

- CORS 미들웨어를 사용하여 모든 요청과 응답에 대해 CORS 처리를 설정한다.

- CORS는 Cross-Origin Resource Sharing의 약자로, 다른 도메인으로부터의 HTTP 요청을 허용하도록 설정하는 것이다.

 

3. app.use(express.json({ strict: false }))

- JSON 형식의 요청 바디를 자동으로 파싱하도록 설정한다.

- strict: false 옵션은 엄격한 JSON 파싱을 해제하는 옵션으로, 좀 더 유연한 JSON 파싱을 수행

 

4. app.post('/upper', function (req, res) { ... }); 및 app.post('/lower', function (req, res) { ... })

- '/upper'와 '/lower'라는 두 개의 엔드포인트에 대해 POST 요청을 처리하는 라우팅 핸들러를 설정한다.

- 각 요청은 클라이언트로부터 받은 데이터를 대문자 또는 소문자로 변환하고, JSON 형태로 응답한다.

 

5. app.use(function (req, res, next) { ... })

- 404 에러 처리를 위한 미들웨어 함수를 설정한다.

- 해당 함수는 모든 요청에 대해 실행되며, 요청이 처리되지 않은 경우(404 에러)에 실행된다.

 

6. app.use(function (err, req, res, next) { ... })

- 500 에러 처리를 위한 미들웨어 함수를 설정, 해당 함수는 에러가 발생한 경우에 실행됨

- 에러를 콘솔에 출력하고, "Something broke! 500"라는 메시지와 함께 500 상태코드를 응답한다.

 

7. app.listen(PORT, ip, () => { ... })

- 서버를 시작하고, 지정한 포트번호와 IP 주소로 서버가 연결되었음을 콘솔에 출력한다.