json-server

1. json-server란?

 

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

json-server를 사용하는 이유는 BE에서 실제 DB와 API Server가 구축될 때까지,

FE 개발에 임시적으로 사용할 mock data를 생성하기 위함이다.

 

설치하기

yarn add json-server

 

 

2. json-server 사용하기

 

json-server가 간단한 패키지이긴 하지만, 말그대로 서버이다.

따라서 리액트와는 별개로 따로 실행을 해줘야 한다.

리액트도 start 하고, json-server도 start 해야 한다는 것이다.

그래야만 리액트와 json-server가 서로 통신할 수 있다.

 

json-server 실행하기

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

 

이렇게 명령어를 입력하면, db.json이 자동으로 생성된다.

이 json 파일들을 db로 사용하는 것이다.

db.json이 자동으로 생성된 모습

 

 

 

tip)  package.json에서 실행코드를 아래와 같이 설정해주면 yarn server를 입력해주는 것만으로 간단하게

실행할 수 있다.

 

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

 

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

 

 다음과 같이 입력 후 localhost:3001/todos로 이동하면

우리가 db에 넣은 todo가 보이게 될 것이다.

브라우저 주소에 URL을 입력한다는 것은 GET 요청이다.

우리는 우리가 만든 API 서버에 GET 요청을 한 셈인것.

 

또한 서버의 터미널에서는 누군가가 GET을 했다는 것을 우리에게 알려준다.