✅ TIL

---

오늘은 어제 만든 mini-node server를 공식 문서를 참고하여, express로 리팩토링해볼 예정이다 - Express 공식 문서

Refactor Express

---

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

Express로 구현한 서버가 Node.js 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)하기

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

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

추가적인 라이브러리를 사용하지 않고, 순수한 Node.js로 코드를 작성하면, 다음과 같이 작성할 수 있다.

const requestHandler = (req, res) => {
  if(req.url === '/lower') {
    if (req.method === 'GET') {
      res.end(data)
    } else if (req.method === 'POST') {
      req.on('data', (req, res) => {
        // do something ...
      })
    }
  }
}

반면에 Express는 프레임워크 자체에서 라우터 기능을 제공한다.
Express의 라우터를 활용하면 아래와 같이 직관적인 코드를 작성할 수 있다.

const router = express.Router()

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

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

Middleware 1

자동차 공장에서는 컨베이어 벨트 위에 올려진 자동차의 뼈대에, 공정마다 부품을 추가한다.
모든 부품이 추가되면 완성된 자동차가, 어딘가 문제가 있다면 불량품이 결과물로 나오게 된다.

미들웨어(Middleware)는 자동차 공장의 공정과 비슷하다.
컨베이어 벨트 위에 올라가 있는 요청(Request)에 필요한 기능을 더하거나, 불량품을 밖으로 걷어내는 역할을 한다.

미들웨어는 express의 가장 큰 장점이라고 할 수 있다.

자주 사용하는 미들웨어

미들웨어를 사용하는 상황은 다음과 같다.

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

미들웨어를 이용하면 Node.js 만으로 구현한 서버에서는 번거로울 수 있는 작업을 보다 쉽게 적용할 수 있다.

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

// Node.js로 HTTP 요청 body를 받는 코드

let body = [];
request.on('data', (chunk) => {
  body.push(chunk);
}).on('end', () => {
  body = Buffer.concat(body).toString();
  // body 변수에는 문자열 형태로 payload가 담겨져 있습니다.
});

// express.json()을 이용한 코드

const jsonParser = express.json();

// 생략
app.post('/api/users', jsonParser, function (req, res) {

})

Node.js로 HTTP body(payload)를 받을 때는 Buffer를 조합해서 다소 복잡한 방식으로 body를 얻을 수 있다.
네트워크상의 chunk를 합치고, buffer를 문자열로 변환하는 작업이 필요하다.

Express를 사용하면 이 과정을 간단하게 처리할 수 있다.
Express v4.16.0부터는 body-parser를 따로 설치하지 않고, Express 내장 미들웨어인 express.json()을 사용한다.

case 2: 모든 요청/응답에 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(200, defaultCorsHeader);
  res.end()
}

// npm으로 cors 설치
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'})
})

Node.js HTTP 모듈을 이용한 코드에 CORS 헤더를 붙이려면, 응답 객체의 writeHead 메서드를 이용할 수 있다.
Node.js에서는 이 메서드 등을 이용하여 라우팅마다 헤더를 매번 넣어주어야 한다.
그뿐만 아니라, OPTIONS 메서드에 대한 라우팅도 따로 구현해야 한다.

cors 미들웨어를 사용하면 이 과정을 간단하게 처리할 수 있습니다.

💡 미들웨어 작동 원리 이해하기

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

case 3: 모든 요청에 대해 url이나 메서드를 확인할 때

미들웨어는 말 그대로 프로세스 중간에 관여하여 특정 역할을 수행한다.

수많은 미들웨어가 있지만, 가장 단순한 미들웨어 로거(logger)를 예로 들겠다.
로거는 디버깅이나, 서버 관리에 도움이 되기 위해 console.log로 적절한 데이터나 정보를 출력한다.

데이터가 여러 미들웨어를 거치는 동안 응답할 결과를 만들어야 한다면,
미들웨어 사이사이에 로거를 삽입하여 현재 데이터를 확인하거나, 디버깅에 사용할 수 있다.

위 그림은 endpoint가 /이면서, 클라이언트로부터 GET 요청을 받았을 때 적용되는 미들웨어다.
파라미터의 순서에 유의해야 한다.
req, res는 우리가 잘 아는 요청(request), 응답(response)이고 next는 다음 미들웨어를 실행하는 역할을 한다.

case 4: 요청 헤더에 사용자 인증 정보가 담겨있는지 확인할 때

app.use((req, res, next) => {
  // 토큰이 있는지 확인, 없으면 받아줄 수 없음.
  if(req.headers.token){
    req.isLoggedIn = true;
    next();
  } else {
    res.status(400).send('invalid user')
  }
})

HTTP 요청에서 토큰이 있는지를 판단하여, 이미 로그인한 사용자일 경우 성공, 아닐 경우 에러를 보내는 미들웨어 예제이다.

💬 Sprint Review

---

Node.js HTTP 모듈을 이용한 코드를 Express로 변환하면서 찾은 키포인트가 딱 3개 있었다.

1. Express, Cors package 설치
2. 한 포트에 한 서버만 가능
3. express의 반응 값인 res.send는 객체 리터럴을 사용해서 표현

3번을 추가 설명하면, 둘의 차이점은 더욱 더 드러난다.

Express에서는 res.send({ convertedText })와 같이 객체 리터럴을 사용하여 응답 데이터를 표현하는 것이 일반적이지만,
순수한 Node.js HTTP 모듈에서는 response.end(convertedText)와 같이 응답 본문을 직접 지정하는 것이 가능하다.

이제 기존 코드와 express 버전 코드를 올려보겠다.

// 기존 코드

const http = require("http");

const PORT = 4999;

const ip = "localhost";

const server = http.createServer((request, response) => {
  // GET / 요청 처리
  if (request.method === "GET" && request.url === "/") {
    response.writeHead(200, defaultCorsHeader); // 200 OK 응답 코드와 CORS 헤더를 반환
    response.end("hello mini-server sprints"); // "hello mini-server sprints"를 응답으로 보냄
  }

  // OPTIONS 메서드에 대한 처리
  else if (request.method === "OPTIONS") {
    response.writeHead(204, defaultCorsHeader); // 204 No Content 응답 코드와 CORS 헤더를 반환
    response.end();
    return;
  }

  // POST /lower 요청 처리
  else if (request.method === "POST" && request.url === "/lower") {
    let requestBody = "";

    request.on("data", (text) => {
      requestBody += text.toString();
    });

    request.on("end", () => {
      const convertedText = requestBody.toLowerCase(); // 받은 텍스트를 소문자로 변환
      response.writeHead(200, defaultCorsHeader); // 200 OK 응답 코드와 CORS 헤더를 반환
      response.end(convertedText); // 변환된 텍스트를 응답으로 보냄
    });
  }
  // POST /upper 요청 처리
  else if (request.method === "POST" && request.url === "/upper") {
    let requestBody = "";

    request.on("data", (text) => {
      requestBody += text.toString();
    });

    request.on("end", () => {
      const convertedText = requestBody.toUpperCase(); // 받은 텍스트를 대문자로 변환
      response.writeHead(200, defaultCorsHeader); // 200 OK 응답 코드와 CORS 헤더를 반환
      response.end(convertedText); // 변환된 텍스트를 응답으로 보냄
    });
  }
  // 그 외의 요청에 대한 처리 (404 Not Found)
  else {
    response.statusCode = 404; // 404 Not Found 응답 코드를 설정
    response.end(); // 응답 종료
  }
  console.log(
    `http request method is ${request.method}, url is ${request.url}`
  );
});

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

// 응답 헤더
const defaultCorsHeader = {
  "Access-Control-Allow-Origin": "*", // 모든 출처에서의 요청을 허용
  "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, OPTIONS", // 원하는 HTTP 메서드를 명시
  "Access-Control-Allow-Headers": "Content-Type, Accept", // 허용하는 요청 헤더를 명시
  "Access-Control-Max-Age": 10, // Preflight 요청의 캐싱 시간을 설정
};

// Express 코드

const express = require("express");
const app = express(); // Express 애플리케이션 생성

const PORT = 3999; // 기존 basic 서버와 port 번호 다르게
const ip = "localhost";
const cors = require("cors");

app.use(cors());

// JSON 파싱을 위한 미들웨어 등록
// 이 설정이 빠지면 클라이언트가 서버로 잘못된 요청을 보냈을 때 발생하는 오류,
// 서버에서 전송한 응답이 JSON 형식이 아니라 HTML 형식으로 도착함
app.use(express.json({ strict: false })); // 이번 경우는 json을 배열이나 객체가 아닌 문자열로 보내기때문에 strict: false

// GET / 요청 처리
app.get("/", (req, res) => {
  res.send("hello mini-server sprints"); // "hello mini-server sprints"를 응답으로 보냄
});

// OPTIONS 메서드에 대한 처리
app.options("/", (req, res) => {
  res.sendStatus(204); // 204 No Content 응답 코드를 반환
});

// POST /upper 요청 처리
app.post("/upper", (req, res) => {
  const requestBody = req.body;
  const convertedText = requestBody.toUpperCase(); // 받은 텍스트를 대문자로 변환
  res.send({ convertedText }); // 변환된 텍스트를 응답으로 보냄
});

// POST /lower 요청 처리
app.post("/lower", (req, res) => {
  const requestBody = req.body;
  const convertedText = requestBody.toLowerCase(); // 받은 텍스트를 소문자로 변환
  res.send({ convertedText }); // 변환된 텍스트를 응답으로 보냄
});

// 그 외의 요청에 대한 처리 (404 Not Found)
app.use((req, res) => {
  res.sendStatus(404); // 404 Not Found 응답 코드를 반환
});

// 서버 시작
app.listen(PORT, ip, () => {
  console.log(`Express server listening on ${ip}:${PORT}`);
});

확실히 express 프레임워크를 사용하면서 코드가 간결해진 것을 한 눈에도 알아볼 수 있다.

사실 키 포인트 3개는 내가 코드 짜면서 빼먹고, 오류를 띄웠던 케이스라 앞으로도 절대 안 까먹을 것 같다 😅