[React] 백엔드 없이 빠른 API 구현 :: Json-Server 사용법

 

json-server 는 간단한 RESTful API를 빠르게 구축하기 위한 도구로 주로 프론트엔드 개발 중 백엔드 없이 빠르게 데이터 API를 구현할 때 사용한다. 

 

 

1. json-server 라이브러리를 설치한다. 

npm install json-server

 

 

2. src폴더 안에 새로운 폴더를 만들고 db.json 파일을 생성한다. 

 

 

3. db.json 파일에 원하는 데이터를 넣어준다. 

{
  "user": 
        { 
          "baby" : {
            "babyName" : "딩글이",
            "birthDate" : "2000-06-14"
          },
          "parentContacts" : {
            "momPhoneNumber": "010-1234-5678", 
            "dadPhoneNumber": "010-3342-1234"
          }
          
        }
    ,
    "posts": [
        { "id": 1, "date": "2024-12-20", "time": "11:50:47", "comment": "트름" },
        { "id": 2, "date": "2024-12-20", "time": "09:08:47", "comment": "낙상" },
        { "id": 3, "date": "2024-12-20", "time": "04:17:38", "comment": "불편함" },
        { "id": 4, "date": "2024-12-20", "time": "09:23:53", "comment": "배고픔" },
        { "id": 5, "date": "2024-12-20", "time": "09:32:53", "comment": "배고픔" },
    ]
  }

 

⚠️ 서버에서 불러올 데이터의 형태랑 동일하게 하면 나중에 서버 연결 시 수정이 적음 ⚠️

 

 

4. 터미널에서 json-server를 실행시킨다. 

json-server ./db.json --port 3003

 

(포트 번호 원하는대로 설정 가능)

 

⚠️ 완전 주의 ⚠️ db.json파일이 담긴 폴더 내에서 실행시켜야함!

 

 

그럼 아래처럼 json-server 실행됨

이 주소로 데이터 요청을 보내면된다. 

 

 

5. json-server로 데이터 요청하기

const response = await axios.get('http://localhost:3003/user');

 

▶️ json-server는 RESTful API를 지원하여 GET 뿐만 아니라 PUT, DELETE, POST 전부 가능!!