json-server 구축해서 React 프로젝트

git address: https://github.com/yoogukhyeon/react-study-group/tree/api

---

🤷‍♂️ json-server란?

---

프론트엔트 사이드프로젝트 혹은 개발을 하다보면 server 데이터가 필요합니다. 

백엔드 개발에 많은 시간을 사용할 수 없다면 json-server를 활용해서 API서버를 만들수 있습니다. 

이런 경우에 필요한 도구가 json-server 입니다.

 참고로 이 도구는 프로덕션에서 사용하기위하여 만들어진것입니다. 실제 운영에서는 사용하시면 안됩니다.
* 프론트엔드 테스트 용도 

 

1. json-server npm 설치 

npm i -D json-server //dev에 설치

프로젝트 package.json에 scripts 추가 

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

 

2. json-server 서버 띄우기

 

npm run json-server 명령어 입력

 

3. 프로젝트 최상위에 db.json 파일을 만듭니다. (간단하게 만들어 봤습니다.)

{
  "boards": [
    {
      "id": 1,
      "nickName": "피카추",
      "title": "후기 남겨요 피카츄!",
      "views": 21,
      "likes": 24,
      "diffDate": "1분전",
      "commentCount": 3
    },
    {
      "id": 2,
      "nickName": "라이츄",
      "title": "후기 남겨요 라이츄!",
      "views": 2,
      "likes": 31,
      "diffDate": "30분전",
      "commentCount": 27
    },
    {
      "id": 3,
      "nickName": "꼬북이",
      "title": "후기 남겨요! 꼬북이",
      "views": 30,
      "likes": 2,
      "diffDate": "1분전",
      "commentCount": 3
    },
    {
      "id": 4,
      "nickName": "파이리",
      "title": "후기 남겨요! 파이리",
      "views": 50,
      "likes": 100,
      "diffDate": "1시간전",
      "commentCount": 3
    },
    {
      "id": 5,
      "nickName": "이상해씨",
      "title": "후기 남겨요! 이상해씨",
      "views": 0,
      "likes": 0,
      "diffDate": "1분전",
      "commentCount": 0
    },
    {
      "id": 6,
      "nickName": "만나뇽",
      "title": "후기 남겨요! 만나뇽",
      "views": 2,
      "likes": 20,
      "diffDate": "3분전",
      "commentCount": 3
    }
  ]
}

 

4. Postman 활용해서 API 서버 테스트 (db.json에 데이터를 확인할 수 있다.)

 

* POST, GET, PUT, DELETE 활용해서 CRUD 테스트가 가능합니다!