JSON-server를 사용해보자

json-server는 간단한 DB와 API 서버를 생성하여 개발 및 테스트하는데 활용할 수 있게 해주는 도구이다. 로컬 환경에서 가짜 백엔드 서버를 간단히 설정할 수 있다.

첨엔 제이슨이 누군가의 이름인가 했는데 그게 아니었다🤪 JavaScript Object Notation의 약자라고 한다.

• 가짜 REST API 제공: Mock Data를 통해 프론트엔드 개발자는 실제 백엔드가 아직 구현되지 않은 경우에도 프로토타입(서비스 초기 버전)을 작성하고 테스트할 수 있다.

• CRUD 작업 지원: HTTP 요청(GET, POST, PUT, DELETE)을 통해 데이터를 생성, 읽기, 수정, 삭제할 수 있는 CRUD 작업을 지원한다.

• 실시간 업데이트: JSON server는 변경된 데이터를 실시간으로 클라이언트에 업데이트 할 수 있다.

아래의 명령어로 JSON-server를 프로젝트에 설치할 수 있다.

yarn add json-server

생성된 JSON-server를 start 해준다.
이 명령어 진짜 오지게 안외워진다

yarn json-server --watch db.json --port 4000

4000으로 설정했기 때문에 localhost: 4000/으로 백엔드 서버에 접근할 수 있다.

• db.json
  바로 여기에 mock data를 넣어주는데,

{
    "posts": [
      { "id": "1", "title": "a title", "views": 100 },
      { "id": "2", "title": "another title", "views": 200 }
    ],
    "comments": [
      { "id": "1", "text": "a comment about post 1", "postId": "1" },
      { "id": "2", "text": "another comment about post 1", "postId": "2" },
      { "id": "3", "text": "another comment about post 1", "postId": "2" }
    ],
    "profile": {
      "name": "typicode"
    }
  }

• localhost: 4000/db 이름
  제대로 서버가 설정되었다면 아래처럼 mock data에 정상적으로 접근할 수 있다.
  로컬 주소 뒤에 원하는 db의 이름을 넣어주고, 항목별로 접근하고 싶다면 또 그 뒤에 id값을 붙여주면 된다.