티스토리 뷰

TIL

Json Server

윤미주 2024. 2. 16. 15:25

json server

 

1. JSON Server란?

 

프론트엔드 개발자가 백엔드 없이 RESTful API를 모의할 수 있도록 설계된 도구이다.

실제 서버를 구축하지 않고도 데이터를 생성, 읽기, 업데이트, 삭제 (CRUD) 하는 API를 빠르게 프로토타이핑하고

테스트할 수 있다.

 

JSON Sever는 단순히 JSON파일을 데이터베이스처럼 사용하고,

이 파일에 대한 요청을 처리하기 위해 실제 서버를 에뮬레이트 한다고 한다!!

 

🔥에뮬레이트 (Emulator)

하나의 시스템이 다른 시스템의 기능을 모방하는 하드웨어나 소프트웨어를 의미

 

2. 설치 방법

- yarn add json-server
- npm install json-server

 

 

3. JSON 파일 준비

데이터를 저장할 db.json 파일생성

{
  "posts": [
    { "id": "1", "title": "a title", "views": 100 },
    { "id": "2", "title": "another title", "views": 200 }
  ],
  "comments": [
    { "id": "1", "text": "a comment about post 1", "postId": "1" },
    { "id": "2", "text": "another comment about post 1", "postId": "1" }
  ],
  "profile": {
    "name": "typicode"
  }
}

 

 

 

4. db.json 파일의 내용을 바탕으로 한 API 서버 시작

yarn json-server db.json --port 5000

 

yarn은 3,000번대 시작으로 헷갈리지 않게 5000으로 지정

 

 

5. packge.json에 명령어 이름 설정해 주기

  //packge.json
  
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "server": "json-server db.json --port 5000"
  },

 

6. yarn server 로 시작 

 

'TIL' 카테고리의 다른 글

useNavigate & <Link />  (1) 2024.02.16
HTTP  (1) 2024.02.16
firebase data 가져오기  (0) 2024.02.14
2024. 02. 13 react 조건에 따른 컴포넌트 보여주기  (0) 2024.02.13
2024. 02. 04 redux_2  (3) 2024.02.05