JSON Server 사용하여 React 프로젝트 만들기 (with Heroku 배포)

 

제가 이번에 진행했던 프로젝트에선 json server를 셋팅하고 비동기 데이터 처리를 위한 커스텀 훅을 구현하는 역할을 맡았습니다. 프로젝트를 진행하며 json server을 활용했던 과정을 공유하고자 합니다.  

0. JSON Server란?

JSON Server은 mock data(json 파일 형태)를 가지고 가짜 API 서버를 만들어 실제로 통신할 수 있도록 백엔드 역할을 대신 해주는 것입니다. 해당 서버는 프론트엔드 개발 환경에서 테스트 용도 등으로 사용하는 것으로 실제 프로덕트에서의 서버 역할을 대신해주지는 못합니다. 아래 공식문서를 참고하세요🤠

 

npm 공식문서

json-server

 

1.  데이터 파일 준비하기

json 파일 형태로 된 데이터 파일 data.json을 준비해주세요. 

 

참고) 아래는 제가 사용했던 json 파일입니다 👇

{
  "requests": [
    {
      "id": 1,
      "title": "자동차 시제품 제작",
      "due": "2020.12.14",
      "count": 2,
      "amount": 100,
      "status": "대기중"
    },
    {
      "id": 2,
      "title": "비행기 시제품 제작",
      "due": "2020.12.13",
      "count": 2,
      "amount": 100,
      "status": "상담중"
    },
    {
      "id": 3,
      "title": "기차 시제품 제작",
      "due": "2020.12.12",
      "count": 1,
      "amount": 20,
      "status": "대기중"
    },
    {
      "id": 4,
      "title": "자전거 시제품 제작",
      "due": "2020.12.11",
      "count": 1,
      "amount": 45,
      "status": "대기중"
    },
    {
      "id": 5,
      "title": "헬리콥터 시제품 제작",
      "due": "2020.12.10",
      "count": 2,
      "amount": 2,
      "status": "대기중"
    },
    {
      "id": 6,
      "title": "전동 킥보드 시제품 제작",
      "due": "2020.12.09",
      "docs": 1,
      "amount": 20,
      "status": "대기중"
    }
  ]
}

 

2. json server 켜기 (글로벌로 설치 / 바로 열기)

저의 경우 json server을 켜기 위해서 아래 명령어를 사용하여 글로벌로 설치 후 data.json의 서버를 열었습니다.

◼ json-server 설치
$ yarn global add json-server
◼ json-server 실행
$ yarn json-server ./src/utils/constants/data.json --port 4000

아래처럼 글로벌로 설치 하지 않아도 json server를 열 수 있습니다.

$ npx json-server ./data.json --port 4000

공식 문서에선 아래와 같이 npm으로 설치합니다.

$ npm install -g json-server

서버가 정상적으로 켜지면 터미널 창에 아래처럼 표시됩니다. 

  \{^_^}/ hi!

  Loading ./data.json
  Done

  Resources
  http://localhost:4000/requests

  Home
  http://localhost:4000

 

3. axios로 api 요청하기

axios를 설치한 후 api호출하는 파일(api.js)을 아래처럼 작성하여 axios 요청을 통해 json server로부터 데이터를 받아오면 됩니다.

$ yarn add axios

 

import axios from 'axios';

export const getRequests = async () => {
  const response = await axios.get('http://localhost:4000/requests');
  return response.data;
};

 

4. Json Server를 포함하여 Heroku로 배포하기

리액트 프로젝트를 헤로쿠에서 배포하는 방법은 다른 블로그에서 소개가 잘 돼 있어서 해당 글에는 따로 정리하지 않았습니다. 아래는 제가 참고한 블로그 링크입니다. Heroku Git을 사용하여 배포하였고, Heroku CLI를 설치하여 진행하였습니다.

💻 Heroku로 간단하게 웹 사이트 배포하기 💻

 

📌json server를 포함해서 배포하려면 몇 가지 설정해야 할 사항들이 있습니다.

 

1. data.json는 프로젝트 최상단 위치에 있어야 합니다. 저는 처음에 다른 위치에 두었다가 제대로 데이터를 불러오지 못했습니다.

 

2. 프로젝트 최상단에 Procfile를 생성하여 아래처럼 작성해주세요. Profile(x) 아니고 Procfile(o) 입니다. 철자 주의하세요!! 이것 또한 제가 실수했던 부분입니다..😅

web: node server.js

3. 프로젝트 최상단에 server.js 파일을 생성하여 아래처럼 작성해주세요.

const jsonServer = require("json-server");
const server = jsonServer.create();
const router = jsonServer.router("./data.json");
const middlewares = jsonServer.defaults({
  static: "./build",
});
const port = process.env.PORT || 4000;

server.use(middlewares);
server.use(
  jsonServer.rewriter({
    "/api/*": "/$1",
  })
);

server.use(router);

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

 

3. package.json 수정하기

"scripts": {
    "start": "node server.js",
    ...
}

 

4. axios 요청을 담당하는 기존 api.js파일 수정하기 -> 요청 url을 배포된 heroku 주소로 변경해주세요.

 

참고로 아래는 제가 진행한 프로젝트에서 작성한 내용입니다. 여기서 SERVER_URL이 heroku 배포 주소가 들어가는 부분이었습니다.

import axios from "axios";
import { SERVER_URL } from "./constants";

export async function getRequests() {
  const response = await axios.get(`${SERVER_URL}/requests`);
  return response.data;
}

 

❗주의__아래는 제가 진행한 프로젝트 구조입니다. 아래처럼 data.json, server.json, Procfile이 프로젝트 최상단에 위치해 있는지 확인하세요.