JSON-Server 설치에서 배포까지

 json-server 설치하기
 CRA로 프로젝트를 새로 생성하고, yarn 또는 npm을 이용해서 설치 합니다. 예시에서는 기존에 사용하던 yarn을 사용해서 설치하겠습니다. 
yarn add json-server

json-server 실행하기 위해 먼저 db.json파일을 만들기

 json-server가 간단한 패키지이긴 하나, 말그대로 서버 입니다. 
 그래서 리액트와는 별개로 따로 실행을 해줘야 합니다. 
 
 다시 말해 리액트도 start하고, json-server로 start 해야 합니다. 
 그래야 리액트와 json-server가 서로 통신 할 수 있습니다.

아래 명령을 통해 json-sever를 실행합니다. 
명령어의 대략적인 뜻은 db.json 이라는 것을 db로 삼고, 
3001 포트에서 서버를 시작하겠다는 뜻입니다.

[22.8.6 업데이트] - 코드 수정 : 명령어 수정 
yarn json-server --watch db.json --port 4000

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");
});

cross-env 설치하기
yarn 또는 npm을 이용해서 cross-env 라는 패키지를 설치합니다.

yarn add cross-env

package.json 수정하기
 package.json에 있는 scripts 부분 전체를 아래 코드로 수정합니다.
 
"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"
  },

// 원래코드
"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject"
},

중간 테스트
// (3)번 까지 잘 따라오고 계신가요? 잘 작성했는지 한번 테스트해보겠습니다. 
// 먼저 아래 코드를 터미널에 입력하고 실행합니다.

yarn build

// 이어서, 아래 코드를 입력해서 우리가 특별한 방법으로 설정한 json-server를 실행시켜 봅시다.

node server

// - **heroku CLI 설치하기**
    
    우리는 배포를 heroku 라는 서비스를 이용해서 할 예정입니다. 그래서 **heroku CLI** 라는 것을 설치해야 합니다. [**링크로 바로가기](https://devcenter.heroku.com/articles/heroku-cli) 로 가서 운영체제에 맞는 프로그램을 설치하세요.**