2024/06/12 json-server

json-server란?

• 간단한 REST API를 쉽게 만들 수 있도록 해주는 도구
  Backend에서 실제 DB와 API Server가 구축될 때까지
  Frontend 개발에 임시적으로 사용할 mock data를 생성.
  
  

REST API ?

• 클라이언트-서버 통신에서 HTTP 메서드와 URL을 통해 요청을 식별하고
  자원을 주고받는 규칙
  
  

설치방법

npm 사용

• npm install -g json-server

yarn 사용

• yarn add json-server

실행

• json 데이터 파일이 있는 디렉토리에서 실행
  json-server --watch db.json

---

json-server 특징

1. 데이터 저장

• json-server는 JSON 파일을 데이터베이스로 사용.
  간단한 JSON 파일을 준비하면 바로 REST API를 만들 수 있음.

2. REST API 생성

• json-server는 JSON 파일의 데이터를 기반으로 자동으로
  CRUD(Create, Read, Update, Delete) 작업을 지원하는 REST API를 생성함.

3. 개발 환경 구축 용이

• 실제 백엔드 개발 전에 프런트엔드 개발을 위한 가짜 API를 빠르게 만들 수 있어
  개발 환경 구축이 용이.

4. 간단한 사용법

• npm install -g json-server 명령어로 설치하고,
  json-server --watch db.json 명령어로 실행하면 바로 사용가능.

5. 확장성

• 필요에 따라 라우팅, 미들웨어, 인증 등의 기능을 추가 가능.

---

json-server 사용방법

1. JSON 데이터 파일 준비

• json-server는 JSON 파일을 데이터베이스로 사용.

//db.json
{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" },
    { "id": 2, "title": "json", "author": "typicode" },
    { "id": 3, "title": "rest", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 },
    { "id": 2, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

2. json-server 실행

• 터미널이나 명령 프롬프트에서 다음 명령어로 json-server를 실행
  --watch 옵션은 db.json 파일의 변경 사항을 감시하고 실시간으로 반영함

json-server --watch db.json

3. REST API 사용

• 사용 가능한 REST API

1. GET /posts: 모든 포스트 목록 조회
2. GET /posts/1: ID가 1인 포스트 조회
3. POST /posts: 새 포스트 생성
4. PUT /posts/1: ID가 1인 포스트 수정
5. PATCH /posts/1: ID가 1인 포스트의 일부 필드 수정
6. DELETE /posts/1: ID가 1인 포스트 삭제

• 다양한 쿼리 파라미터를 사용하여 데이터를 필터링, 정렬, 페이징도 할 수 있음.

1. GET /posts?title_like=json
   -title에 "json"이 포함된 포스트 목록 조회
2. GET /posts?_sort=id&_order=desc
   -id를 내림차순으로 정렬된 포스트 목록 조회
3. GET /posts?_page=2&_limit=10
   -2페이지, 10개씩 포스트 목록 조회

4. 사용자 정의 라우팅

json-server는 기본적인 CRUD 라우팅 외에도 사용자 정의 라우팅을 지원.
routes.json 파일을 생성하고 다음과 같이 작성

{
  "/api/*": "/$1",
  "/blog/:resource/:id/show": "/:resource/:id"
}