mock api 테스트용 노드 서버 + proxy

프로젝트를 진행하면서 느낀 고민 중 하나가 백엔드 팀원이 api를 배포했을 때 배포된 api를 적용하면서 했던 일을 한 번 더 하게 되는 점이었다.

그럴 수밖에 없던 점이 api가 나오기 전까지 쓸 mock 데이터를 로컬 환경에 만들어 두고 썼기 때문에 비동기 처리를 생각하지 않아도 됐었다.
promise가 settled 될 때까지의 로딩 처리나 에러 핸들링 등의 사이드 이펙트를 고려하지 않고 진행했기 때문에 개발 속도는 빠를지 몰라도 불완전한 요소가 있어 찝찝했다.

이번엔 redux-thunk를 비동기 처리에 활용할 생각이었기 때문에 개발 단계에서 사용할 express 서버를 띄워 간단한 mock api를 테스트 할 수 있도록 했다.

proxy를 적용한 이유는 cors 때문이다. react server와 express server의 port가 달라서 도메인이 같지 않다 보고 cors가 나는 것 같다.

• 폴더 구조

root/
├── package.json
├── client/ (CRA)
|   └── src/
|   	└── setupProxy.js
└── server/
    ├── package.json
    └── server.js

• root/package.json

// root/package.json

{
    "name": "sample",
    "version": "1.0.0",
    "scripts": {
        "client": "cd client && npm start",
        // 전역 환경에 nodemon install 필요
        "server": "cd server && nodemon server.js",
        "dev": "concurrently --kill-others-on-fail \"npm run server\" \"npm run client\""
    },
    "devDependencies": {
        "concurrently": "^5.1.0",
        "http-proxy-middleware": "^1.0.3"
    }
}

• root/server/package.json

// root/server/package.json

{
    "name": "server",
    "version": "1.0.0",
    "scripts": {
        "server": "nodemon server.js"
    },
    "dependencies": {
        "body-parser": "^1.19.0",
        "express": "^4.17.1"
    }
}

• root/server/server.js

// root/server/server.js

const express = require('express');
const bodyParser = require('body-parser');
const app = express();
const port = process.env.PORT || 5000;

// 테스트 요청에 대한 응답 mock 데이터
const data = require('./mock/data.js');

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

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

app.listen(port);

• root/client/src/setupProxy.js

// root/client/src/setupProxy.js

const proxy = require("http-proxy-middleware");

module.exports = function (app) {
    app.use(proxy("/api", { target: "http://localhost:5000" }));
};