json-server란,

가짜 서버(fake server)를 간단히 만들 수 있는 도구!
JSON 파일 하나만 있으면, 데이터를 읽고 쓰는 간단한 API 서버를 빠르게 만들 수있고 보다 실무적으로 데이터를 가져오는 연습을 할 수 있다.

📍핵심 설명

• json-server는 "가상의 음식 주문 시스템"처럼 동작해!

• 메뉴판(JSON 파일): "메뉴판"에 음식(데이터)을 적어 놓는다. (예) 피자, 치킨, 버거.

• 주문(API 요청): "피자 주세요!"라고 주문(GET 요청).
  "새로운 음식을 추가하고 싶어요!"라고 요청(POST 요청).

• 주방(json-server): 메뉴판(JSON 파일)을 읽고, 요청대로 처리.

• 어떤 상황에서 쓰냐면?
  프론트엔드 개발자가 백엔드가 준비되지 않았을 때 임시 서버로 사용할 수 있고, 실제 서버처럼 동작하므로, REST API를 테스트할 때 유용해!

🔍 json-server 사용 예제

1️⃣ json-server 설치

패키지 매니저	설치 명령어
yarn	yarn global add json-server
pnpm	pnpm add -g json-server

2️⃣ JSON 파일 만들기
데이터를 담은 JSON 파일(db.json)을 준비.

{
  "posts": [
    { "id": 1, "title": "Hello World" },
    { "id": 2, "title": "json-server is awesome!" }
  ]
}

3️⃣ 서버 실행

작업	실행 명령어
서버 실행	json-server --watch db.json

4️⃣ 테스트
http://localhost:3000/posts로 API 요청을 테스트 가능!

• GET 요청: 모든 게시글 가져오기
  • URL: http://localhost:3000/posts
• POST 요청: 새로운 게시글 추가
  • URL: http://localhost:3000/posts
  • 데이터: { "id": 3, "title": "New Post" }
• PUT 요청: 특정 게시글 수정
  • URL: http://localhost:3000/posts/1
  • 데이터: { "title": "Updated Title" }
• DELETE 요청: 특정 게시글 삭제
  • URL: http://localhost:3000/posts/1

🚀 진짜 쉬운 설명

json-server는 JSON 파일 하나로 간단한 REST API 서버를 빠르게 만들고, 데이터를 읽고 쓰는 테스트를 할 수 있는 도구라고 생각하면 돼!

---

✏️ 더 알아가기

• json-server 더 알아보기!

1️⃣ 기본 포트 변경하기
기본적으로 포트 3000에서 실행되지만, 다른 포트로 변경도 가능해!
(--port 옵션을 사용하면 포트를 5000, 8080 등 원하는 값으로 변경가능)

json-server --watch db.json --port 5000

2️⃣ 라우팅 설정 (Custom Routes)
RESTful API 외에 특정 URL로 요청을 라우팅할 수 있습니다.
routes.json 파일을 만들어 라우팅을 정의 가능.

• (예) routes.json

{
  "/api/posts": "/posts",
  "/api/users": "/users"
}

• 실행

json-server --watch db.json --routes routes.json

• 결과
  /api/posts → /posts
/api/users → /users

3️⃣ 쿼리 파라미터 지원
JSON 데이터를 필터링, 정렬, 페이지네이션 등으로 조작가능.
1. 필터링
db.json의 posts 중에서 author가 "John"인 데이터만 가져옴.

GET /posts?author=John

2. 정렬
id를 기준으로 내림차순 정렬.

GET /posts?_sort=id&_order=desc

3. 페이지네이션
한 페이지에 5개씩 데이터를 나누고, 2페이지를 가져옴.

GET /posts?_page=2&_limit=5

4️⃣ 데이터 관계 설정 (Nested Routes)
db.json에서 데이터를 중첩된 형태로 저장하면, 관계형 데이터를 사용가능.

{
  "posts": [
    { "id": 1, "title": "First Post", "author": "John" }
  ],
  "comments": [
    { "id": 1, "postId": 1, "content": "Great post!" }
  ]
}

요청 예시 GET /posts/1/comments(postId가 1인 댓글만 가져옴.)

• json-server를 더 잘 활용하는 팁
  • 빠른 프로토타입 제작: 백엔드가 준비되지 않았을 때 임시로 사용.
  • API 테스트: 프론트엔드 개발자들이 실제 서버를 기다리지 않고 작업 가능.
  • 연습 환경: RESTful API 요청을 배우거나 테스트할 때 사용.