json-server란?

1. json-server란?

(1) json-server 정의 및 사용하는 이유json-server를 통해서 FE에서는 BE가 하고 있는 작업을 기다리지 않고, FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업을 할 수 있습니다. 이번 챕터에서는 단순히 mock data로 사용하는 것을 넘어, 실제로 배포까지 하여 간단한 API 서버를 구축하고 과제 프로젝트를 완성하는데 사용할 것 입니다.
json-server란, 아주 간단한 DB와 API 서버를 생성해주는 패키지 입니다. 우리가 json-server를 사용하는 이유는 Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성하기 위함입니다.
(2) json-server 설치하기
CRA로 프로젝를 새로 생성하고, yarn 또는 npm을 이용해서 설치 합니다. 예시에서는 기존에 사용하던 yarn을 사용해서 설치하겠습니다.
yarn add json-server

(1) json-server 실행하기아래 명령을 통해 json-sever를 실행합니다. 명령어의 대략적인 뜻은 db.json 이라는 것을 db로 삼고, 3001 포트에서 서버를 시작하겠다는 뜻입니다.이렇게 명령어를 입력하면, 아래 이미지처럼 db.json이 자동으로 생성됩니다. 이 json 파일을 db로 사용하는 것이죠. 신기하죠? 그리고 posts, comments, profile 라는 기본적인 값들을 넣어주었네요.

json-server --watch db.json --port 3001
json-server가 간단한 패키지이긴 하나, 말그대로 서버 입니다. 그래서 리액트와는 별개로 따로 실행을 해줘야 합니다. 다시 말해 리액트도 start하고, json-server로 start 해야 합니다. 그래야 리액트와 json-server가 서로 통신 할 수 있습니다.
(2) db.json 수정하고 브라우저에서 확인하기
db.json이 생성되면서 기본값을 넣어주었는데, 우리는 우리가 하고 싶은대로 사용하기 위해서 다 지우고 아래와 같이 작성해주세요. 우리는 Todo list를 만들 것이니 todos 라고 이름을 지었습니다. 그리고 데이터 형태는 배열이구요. todo 1개를 테스트용으로 만들어주겠습니다.그리고 우리가 만든 API 서버가 잘 작동하고 있는지 확인을 해봅시다. 브라우저에서 http://localhost:3001/todos 로 이동해볼까요?브라우저에서는 아래 정보들이 보이고,
{ "todos": [ { "id": 1, "title": "json-server", "content": "json-server를 배워봅시다." } ] }

출처 - 스파르타코딩클럽(항해99과정):https://hanghae99.spartacodingclub.kr/