01. 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) 간단한 설치

---

다음 명령어를 통해 아주 간단하게 설치할 수 있어요.

yarn add json-server
yarn add json-server -D # 개발 환경인 경우, -D 옵션을 함께 입력합니다.

---

02. json-server 사용해보기

---

(1) json-server 실행하기

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

• (1)-1. db.json 파일 생성

  아래 이미지처럼 프로젝트 루트 경로에 db.json이라는 파일을 생성한다.

  

  그리고 아래와 같이 내용을 입력하면, json-server는 이 내용을 바탕으로 데이터베이스를 제공하게 된다.
  
  ```json
  {
    "todos": []
  }
  ```

• (1)-2. 서버 실행

  리액트가 실행 중인 터미널이 아닌 다른 터미널을 새로 열어서 아래 명령을 통해 json-sever를 실행한다.

  ☝ 리액트를 구동하는 서버, json-server를 구동하는 서버는 각각 독립적인(별개의) 서버임을 기억한다면 쉽게 이해되실 거에요!

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

  yarn json-server db.json --port 4000

  이렇게 명령어를 입력하면, 아래 이미지처럼 서버가 정상적으로 실행됩니다.
  

**우리의 API를 켰으니, 리액트로 켜서 이제 본격적으로 json-server를 사용해봅시다.**


실제로 써보면서 익혀보자.