📌

json-server는 간단한 DB와 API 서버 생성 패키지.
백엔드에서 실제 DB와 API Server가 구축되기 전까지, 프론트엔드 개발에 임시로 사용할 mock data 생성 목적으로 사용.
json-server 사용 시 BE(Backend) 작업을 기다리지 않고 FE(Frontend) 로직과 화면 구현 가능. 협업 효율 향상 가능.

Supabase, Firebase 쓰면 되는 것 아닌가?(feat. RESTful API)

• json-server는 RESTful API 기본 개념 학습 지원 도구.
  빠른 실습 가능. API 설계 흐름 이해 가능. CRUD 구조 체험 가능.
• Supabase, Firebase는 실제 서비스 구축에 적합한 BaaS임.
  백엔드 없이 운영 환경 구성 가능.
• 학습 목적, REST 구조 이해 목적이라면 json-server가 더 적합한 선택.
  목적에 따라 json-server와 BaaS 선택 사용.

◼ 설치

npm install json-server
npm install json-server -D // 개발 환경인 경우, -D 옵션을 함께 입력.

◼ 사용

실행

json-server가 간단한 패키지이긴 하나, 간이 백엔드 서버임. 그래서 React와는 별개로 따로 실행 필요.
즉, React도 실행해야 하고 json-server도 실행해야 함. 그래야 React와 json-server가 서로 통신 할 수 있음.

db.json 파일 생성

프로젝트 루트 경로에 db.json파일 생성.

├json_folder
│├node_modules
│├public
│└src
├.gitignore
├db.json
├package.json
└README.md

아래와 같이 기본 데이터 작성.

{
  "todos": []
}

서버 실행

React 실행 터미널과 별도로 새 터미널 창에서 실행 필요.

yarn json-server db.json --port 4000

명령어의 뜻은 db.json을 데이터베이스로 사용하고, 4000번 포트에서 서버를 실행하겠다는 뜻.

db.json 수정 후 브라우저 확인

데스트용 데이터 추가.

{
  "todos": [
    {
      "id": 1,
      "title": "json-server",
      "content": "json-server를 배워봅시다."
    }
  ]
}

브라우저에서 아래 주소 입력.

http://localhost:4000/todos

터미널에서는 아래와 같이 로그 출력.

Resources
http://localhost:3001/todos

Home
http://localhost:3001

GET /todos 200 11.036ms - 101

브라우저 주소에 URL을 입력한다는 것은 GET 요청을 했다는 것. API 서버에 GET 요청을 한 셈.
서버의 터미널에서는 “누군가 GET을 했어” 라고 알려줌.