json-server

# json-server란?

 

1) json-server 정의 및 사용하는 이유

json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지이다.

 

json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함이다. json-server를 통해서 FE에서는 BE가 하고 있는 작업을 기다리지 않고, FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업을 할 수 있다. 

 

2) json-server 설치하기

yarn add json-server

 

 

# json-server 사용하기

 

1) json-server 실행하기

json-server가 간단한 패키지이긴 하나, 말그대로 서버이다. 그래서 리액트와는 별개로 따로 실행을 해줘야 한다.

다시 말해 리액트도 start하고, json-server로 start 해야 합니다. 그래야 리액트와 json-server가 서로 통신 할 수 있습니다.

아래 명령을 통해 json-sever를 실행한다. 명령어의 대략적인 뜻은 db.json 이라는 것을 db로 삼고, 3001 포트에서 서버를 시작하겠다는 뜻이다.

 

yarn json-server --watch db.json --port 3001

 

이렇게 명령어를 입력하면, 아래 이미지처럼 db.json이 자동으로 생성된다. 이 json 파일을 db로 사용하는 것이다.

그리고 posts, comments, profile 라는 기본적인 값들을 넣어주었다.

 

그리고 서버가 정상적으로 켜졌으면 아래와 같이 보이게 된다.

 

json-server와 리액트가 모두 켜진 상태 👇 

 

 

 

2) db.json 수정하고 브라우저에서 확인하기

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

만든 API 서버가 잘 작동하고 있는지 확인을 해보자. 브라우저에서 http://localhost:3001/todos 로 이동해보면 db에 넣은 todo가 정상적으로 보이게 된다.  브라우저 주소에 URL을 입력한다는 것은 GET 요청이다. 우리는 우리가 만든 API 서버에 GET 요청을 한 셈이다.

브라우저에서는 아래 정보들이 보이고,

 

서버의 터미널에서는 “누군가 GET을 했어" 라고 알려주게 된다.

이 서버를 실제 서비스하는데는 적절하지 않으니, 지금 처럼 테스트 또는 mock data용도로만 사용하면 되겠다.

 

 

# 정리

• json-server를 통해서 임시 API를 구축하고, 서버의 data를 mocking 할 수 있으며 이것을 통해 선제적으로 FE 개발을 진행할 수 있다.
• heroku를 이용해서 json-server를 배포할 수 있다.