React

json-server

차돌박이츄베릅 2023. 7. 6. 08:57

아주 간단한 DB와 API 서버를 생성해주는 패키지. 

우리가 json-server를 사용하는 이유는 

Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 

Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함.

 

설치

yarn add json-server

 

사용법

1. 구글에서 npm jsonserver  구글링 ㄱ

https://www.npmjs.com/package/json-server

 

json-server

Get a full fake REST API with zero coding in less than 30 seconds. Latest version: 0.17.3, last published: 3 months ago. Start using json-server in your project by running `npm i json-server`. There are 315 other projects in the npm registry using json-ser

www.npmjs.com

 

2. 루트 경로에 db.json 파일 만들고 내용 복붙

(/db.json)

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

 

3. 실행하기

특정 포트 지정

yarn json-server --watch db.json --port 4000 // 특정 포트 지정해서 실행하는걸 추천

yarn json-server --watch db.json // 기존

 

4. 접근 방법

http://localhost:3000/posts
http://localhost:3000/comments/3 // 아이디가 3인것만 보여줌

 

API 명세서

요청을 할 때 path variable로 해야할지, query로 보내야할지는 API 명세서를 확인해야 함.

json server 공식문서(npm)를 보면 요청하는 방법이 정해져있음( Routes섹션쪽에)

 

전체 정보나 상세 정보는 아래와 같이 path variable 로 url을 작성

 

filter와 같은 기능을 위해서 GET 요청을 하고자할 때는 query

 

'React' 카테고리의 다른 글

Thunk  (0) 2023.07.06
Axios  (0) 2023.07.06
Redux Devtools  (0) 2023.07.06
Redux Toolkit  (0) 2023.07.06
JSON 기초  (0) 2023.06.21