[javascript] json-server

1. 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 설치하기

 

CRA로 프로젝트를 새로 생성하고, yarn 또는 npm을 이용해서 설치합니다. 

yarn add json-server

 

2.json-server 사용하기

(1) json-server 실행하기

 

json-server가 간단한 패키지이기는 하나, 말 그대로 서버입니다. 그래서 리액트와는 별개로 따로 실행을 해줘야합니다. 다시 말해 리액트도 start하고, json-server도 start해야 합니다. 그래야 리액트와 json-server가 서로 통신할 수 있습니다.

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

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

 

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

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

 

http://localhost:3001/todos 에서 확인하기