20.09.29 [Middleware, express.js]

Toy Problem.. 주석만 쓸 줄 알지 코드는 손도 못 대는 나란 존재

Express.js

Node.js로 웹 앱이나 API를 제작할 때 보다 편하게 만들게 해주는 것이 Express.js Framework다.

Node.js로 http 서버를 만들 때 Method(GET, POST)와 URL(/messages) 등으로 분기를 둬 라우팅을 하였는데, express는 자체 라우터 기능을 제공한다. 확실히 코드 라인은 줄어드는게 눈에 보이고 직관적이지만 처음 접하는 거라 구현할 때 오류가 자꾸 잡힌다. 잘 다룰 수 있도록 많이 연습해야겠다.

“TypeError: Cannot read property ‘apply’ of undefined” 

이것 저것 코드를 빼고 넣고하다가 해결한 것 같다.

const express = require('express');
const app = express.Router();
// const app = express()로 변경하니 제대로 동작했다.

express.Router();

이게 Express Document에 있긴 한데 왜 동작이 안되는 지 자세히 알아봐야 할 것 같다.

Advanced로 fs를 이용해서 서버가 종료되도 이전에 받은 데이터들이 JSON 파일에 저장되어 있고 클라이언트가 받아올 수 있도록 했다. 머릿속에서 어떻게 JSON 파일에 데이터를 append 하는 방법을 몰랐는데, 구글링해서 해결했다.

fs.readFile('./storage.json', 'utf8', (err, data) => {
          // 1. JSON 파일에 있는 데이터를 parse 시킨다.
          let parseData = JSON.parse(data);
          // 2. parseData에 데이터를 추가한다.
          parseData.results.push(JSON.parse(body));

          // 3. parseData를 JSON으로 변환, JSON 파일을 업데이트한다.
          fs.writeFile('./storage.json', JSON.stringify(parseData), () => {
          response.writeHead(201, headers);
          response.end(JSON.stringify(parseData.results[parseData.results.length - 1]));
            return;
          });
        });

Middleware

HTTP Reqeust나 Response, Application의 req,res 주기에 미들웨어 함수에 엑세스 권한을 가진다. 쉽게 말해, request로 받은 데이터를 Middleware가 필요한 데이터만 솎아내(함수가 거처가는) response 해주는 역할을 한다.

🚫 미들웨어 함수가 요청과 응답주기를 종료하지 않는 경우에는 반드시 위 그림과 같이 next() 를 호출해야 한다. 그렇지 않으면 해당 요청은 가만히 있는다.

미들웨어가 주로 쓰이는 상황

1. 모든 요청에 대해 URL이나 METHOD를 쉽게 얻어내 라우팅을 나뉠 수 있다.
2. POST 요청 등에 쓰이는 body(payload)를 쉽게 얻고자 할 때 쓰인다.
→ Node.js로 body를 얻으려면 밑에 코드가 실행되어야 한다.

request
      .on('data', (chunk) => {
        body.push(chunk);
      })
      .on('end', () => {
        body = Buffer.concat(body).toString();
        storage.results.push(JSON.parse(body));

        response.writeHead(201, headers);
        response.end(JSON.stringify(storage));   
      

→ 미들웨어인 express와 body-parser를 이용한다면 코드 라인도 줄어들고 직관적이다.

app.post('/messages', (req, res) => {
  storage.results.push(req.body);

  res.status(201);
  res.send(JSON.stringify(storage));
})

3. 모든 Request, Response에 CORS 헤더를 일일이 Response.writeHead에 주지 않아도 된다.
→ 이걸 가능하게 하는게 미들웨어인 cors 이다.

const cors = require('cors');

app.use(cors()); // 모든 Request에 cors를 허용한다.