[항해 26일차] TIL_React 심화주차: json-server

학습목표

   1. fake server 의 개념과, 그 대표적인 예시인 json-server 의 특징 파악

   2. json-server 를 직접 설치하고, 실습해보면서 사용방법에 대한 숙지

 

json-server란?

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

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

json-server를 사용하는 이유는 Backend(BE) 에서 실제 DB 와 API Server 가 구축될 때까지 Frontend(FE)개발에 임시적으로 사용할 mock data 를 생성하기 위함입니다. 

json-server를 통해 FE 에서는 BE 가 하고 있는 작업을 기다리지 않고, FE 의 로직과 화면을 구현할 수 있어 효율적으로 협업을 할 수 있습니다. 이번 챕터에서는 단순히 mock data 로 사용하는 것뿐 아니라, 실제로 배포까지 해 간단한 API 서버를 구축하고 과제 프로젝트를 완성하는데 사용할 것입니다.

 

json-server 설치

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

yarn add json-server

 

json-server 사용

json-server 실행하기

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

그래서 리액트와는 별개로 따로 실행을 해줘야 합니다.다시 말해 리액트도 start 하고, json-server 도 start 해야 합니다. 그래야 리액트와 json-server 가 서로 통신할 수 있습니다.

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

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

이렇게 명령어를 입력하면, 아래 이미지처럼 db.json 이 자동으로 생성됩니다. 이 json 파일을 db로 사용하는 것이죠. 그리고 posts, comments, profile 라는 기본적인 값들을 넣어주었습니다.

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

API 를 켰으니, 리액트로 켜서 본격적으로 json-server 를 사용하겠습니다.

 

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

db.json 이 생성되면서 기본값을 넣어주었는데, 하고 싶은대로 사용하기 위해서 다 지우고 아래와 같이 작성해보겠습니다. 

Todo.list 를 만들 것이니 todos 라고 이름을 지었습니다. 그리고 데이터 형태는 배열이고, todo 1개를 테스트용으로 만들어주겠습니다.

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

그리고 API 서버가 잘 작동하고 있는지 확인해보겠습니다. 브라우저에서 http://localhost:3001/todos 로 이동해보겠습니다.

db 에 넣은 todo 가 정상적으로 보입니다. 브라우저 주소에 URL 을 입력한다는 것은 GET 요청입니다. API 서버에 GET 요청을 한 셈이죠. 브라우저에서는 아래 정보들이 보이고,

서버의 터미널에서는 "누군가 GET을 했습니다." 라고 개발자에게 알려줍니다.