JSON 서버

아주 간단한 DB와 API 서버를 생성해주는 패키지
Frontend 개발에 임시적으로 사용할 mock data를 생성하기 위해 사용할 수 있다.
공식 문서: https://www.npmjs.com/package/json-server

json-server 사용하기

1) 패키지 설치

• yarn add json-server

2) db.json 파일 생성

// 데이터베이스 예시
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

2) 서버 가동
json-server --watch db.json --port [server port number]

json-server 배포하기

1) server 코드 작성

const jsonServer = require("json-server");
const path = require("path");

const server = jsonServer.create();
const router = jsonServer.router(path.resolve(__dirname + "/db.json"));
const middlewares = jsonServer.defaults({
  static: path.resolve(__dirname + "/../build/"),
});

const port = process.env.PORT || 3001;

server.use(middlewares);

server.use(jsonServer.bodyParser);

server.use(router);
server.listen(port, () => {
  console.log("JSON Server is running");
});

2) db.json 생성

{
  "todos": [

  ]
}

3) cross-env 설치
yarn add cross-env

4) pakage.json 수정

// ASIS
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

// TODO
"scripts": {
    "start": "node server",
    "start:dev": "cross-env NODE_PATH=src react-scripts start",
    "build": "cross-env NODE_PATH=src react-scripts build",
    "test": "react-scripts test --env=jsdom",
    "eject": "react-scripts eject",
    "heroku-postbuild": "cross-env NODE_PATH=src npm run build"
  },

• yarn start 시 node server 실행하도록 변경
• yarn start:dev 시 React 실행