아주 간단한 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 |