json-server로 json파일 열어 db처럼 사용하기

json-server 다운로드

 

npm i -g json-server 설치

db.json (db처럼 사용할 json 파일필요)

json-server --watch db.json(json 파일명) --port 5000 서버띄우기

 

react로 개발시 yarn start 켜고 데이터도 동시에 띄워서 같이 작업하려면 약간의 package.json 파일 수정이 필요하다.

 

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "json-server": "json-server --watch db.json --port 5000",
    "dev": "concurrently \"yarn start\" \"yarn run json-server\""
  },

스크립트 부분 이렇게 수정하였다.

npm install -g concurrently

concurrently라는 라이브러리를 설치해서 yarn dev명령어로 yarn start와 yarn run json-server를 동시에 띄울수 있도록 해준다.

tools/start.js 파일 생성해서 설정해도 해줬다.

const concurrently = require("concurrently");
concurrently(
  [
    { command: "npm:react-start", name: "react-watch", prefixColor: "#98acf8" },
    { command: "npm:db-start", name: "json-server", prefixColor: "#16c79a" },
  ],
  {
    killOthers: ["failure", "success"],
  }
).then(() => {
  console.log("GoodBye World~!!");
});

 

이제 데이터를 페치를 해야겠지?

axios사용하여 편리하게 뿌린다.

import axios from "axios";

  const [stores, setStores] = useState<any[]>([]);
  useEffect(() => {
    axios.get("http://localhost:5000/db").then((data) => {
      setStores(data.data.requests);
    });
  }, []);​

이렇게 데이터 배열 찾아가지고 변수에 담아서 활용했다.