json-server

json-server

json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지이다. json-server를 사용하는 이유는 Bakend에서 실제 DB와 API Server가 구축될 때까지 Frontend 개발에 임시적으로 사용할 mock data를 생성하기 위함이다.

json-server를 통해서 FE에서는 BE가 하고 있는 작업을 기다리지 않고, FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업을 할 수 있다.

json-server 설치하기

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

yarn add json-server

json-server 사용하기

json-server 또한 서버이기 때문에 리액트와 별개로 실행을 시켜줘야 한다. 요컨대 같은 포트를 사용하면 안 된다는 것이다.

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

db.json이라는 것을 db로 삼고, 3001 포트에서 서버를 시작하겠다는 의미이다.

프로젝트 폴더에 db.json 파일 만들고 수정

db.json 파일을 필요에 맞게 json 형식에 맞춰 작성한다.

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

그리고 http://localhos:3001/todos로 이동하면 우리가 작성한 db.json의 모습대로 호출해올 수 있다. 브라우저 주소에 URL을 입력한다는 것은 GET 요청이기 때문에 우리는 API 서버에 GET 요청을 한 셈이다. 서버 터미널에는 "누군가 GET을 했어"라고 알려준다.