[React] json-server란 무엇일까?

json-server

간단하게 데이터 베이스와 API 서버를 생성해주는 패키지

 

💻 json-server 설치 코드

yarn add json-server

 

💻 json-server 실행 코드

백엔드 서버이기 때문에 따로 실행을 해줘야 한다.

yarn json-server db.json --port 포트번호

 

💻 json-server 기본 주소

http://localhost:포트번호

 

json-server 사용 방법

1️⃣ json-server 패키지를 설치한다.

yarn add json-server

 

2️⃣ root 경로에 db.json 파일을 생성한다.

// db.json 예시 코드
{
	"posts": [
    	{
        	"id": 1,
            "title": "json-server에 대해 알아보자",
            "content": "json-server에 대해 알아봤다.",
        }    
    ],
}

파일 안에 원하는 데이터를 넣어주면 된다.

id값을 직접 넣어주지 않아도 된다. json-server에 데이터가 들어오면 자동으로 생성해준다.

 

3️⃣ json-server을 실행시킨다.

yarn json-server db.json --port 포트번호

 

사용하는 방법은 생각보다 간단하다.

json-server에 들어있는 데이터를 조회하고,

json-server에 데이터를 추가/삭제/수정할 수 있는 방법도 알아야 한다!

이것은 다음 글에서 알아보자.

 

 

json-server을 사용하는 이유

1️⃣ 실무 측면에서

백엔드에서 실제 데이터 베이스와 API 서버가 구축될 때까지

프론트엔드 개발에 임시적으로 사용할 데이터를 생성하기 위해서이다.

즉, json-server을 이용하면 백엔드의 작업이 끝날 때까지 기다리지 않고 프론트엔드에서 로직과 화면을 구현할 수 있다.

 

2️⃣ 학습 측면에서

Restful API 개념을 빠르게 학습할 수 있다.

이를 통해 실무에서 필수적인 API 설계와 구현 능력을 향상시킬 수 있다.

그동안 사용해본 supabase와 firebase는 Restful API를 사용하고 있지 않다.