리액트 심화2 - json server

 

1. json-server란?

 

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

 

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

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

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

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

 

 

- json-server 설치하기

yarn add json-server

 

 

2. json-server 사용하기

- json-server 실행하기

 

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

그래서 리액트와는 별개로 따로 실행을 해줘야 함.

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

령어의 대략적인 뜻은 db.json 이라는 것을 db로 삼고, 3001 포트에서 서버를 시작하겠다는 뜻.

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

 

이렇게 명령어를 입력하면, 아래 이미지처럼 db.json이 자동으로 생성

 

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

 

 

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

 

Todo list를 만들 것이니 todos 라고 이름을 지음. 데이터 형태는 배열. todo 1개를 테스트용으로 만들어줌.

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

 

우리가 만든 API 서버가 잘 작동하고 있는지 확인을 해보기.

브라우저에서 http://localhost:3001/todos 로 이동.

브라우저 주소에 URL을 입력한다는 것은 GET 요청. 만든 API 서버에 GET 요청을 한 셈.

 

서버의 터미널에서는 “누군가 GET을 했어" 라고 우리에게 알려줌.