React

React : json-server

고래고래00 2024. 6. 10. 20:16

json-server 개념

  • json-server란, DB와 API 서버를 생성해주는 패키지
  • 백엔드에서 실제 DB와 API 서버가 구축될 때 까지
    프론트엔드 개발에 임시적으로 사용할 mock data를 생성하기 위해 사용
  • json-server를 통해서 프론트엔드에서는 백엔드가 하고 있는 작업을 기다리지 않고,
    프론트엔드의 로직과 화면을 구현 할 수 있어 효율적으로 협업 가능

Supabase, Firebase는 REST API를 사용하지 않고 기본 제공 API를 사용
실무에서는 대부분 REST API 사용 => json-server가 실무적으로 더 도움이 될 수 있음

 

json-server 설치

yarn add json-server

yarn add json-server -D (개발 환경인 경우, -D 옵션을 함께 입력)

 

json-server 사용

json-server 실행

json-server가 간단한 패키지이긴 하나, 말그대로 (간이 백엔드) 서버

=> 리액트와는 별개로 따로 실행

=> 리액트도 실행해야 하고, json-server로 시작도 해야함

=> 리액트와 json-server가 서로 통신

 

루트 경로에 db.json 파일 생성하고 아래 처럼 작성

{
  "todos": [],
  "users": []
}

 

터미널

yarn json-server db.json --port 4000

 

db.json 파일을 db로 설정해 4000 포트에서 서버를 시작

json-server 실행 성공

todos에 데이터를 임시로 하나 추가

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

 

그리고 Endpoints의 주소(http://localhost:4000/todos)로 이동하면 아래와 같이 데이터 확인 가능