📆 22.10.14 - Json-server

보통 api를 활용하여 CRUD를 이용하려면, 백엔드를 끼고 작업하기 마련이다. 그런데 Axios로 하는 CRUD를 프론트 단에서 연습할 수는 없을까?

json-server

백엔드 분들이 만들어주신 api.. 함부로 내 axios의 연습장으로 사용하기 두렵다면? json-server를 이용하자!

json-server는 정말 간단하게 json 파일의 형태로 DB와 API서버를 생성해주는 패키지이다. 위에서 말했듯이 Axios를 한번 연습해보려고 사용해도 되는데, 원래 사용 목적은 BE에서 실제 DB와 API 서버가 구축되기 전까지 FE 개발에 임시적으로 사용할 mock data를 생성하기 위함이라고 한다.
그렇게 되면 json-server를 통해서 FE에서는 BE가 하고 있는 작업을 기다리지 않고, FE의 로직과 화면을 구현 할 수 있어 효율적으로 협업을 할 수 있는 기대를 할 수 있게 된다.

한번 같이 설치 및 어떻게 굴러가는지 맛이라도 보자~ 레츠고

json-server install

npm install json-server
정말 짧디도 짧은 이 명령어로 우선 json server를 설치해 준다.

json server 켜기

yarn json-server --watch db.json --port 3001
위의 명령어로 json-server를 키는 것이 가능하다. 그런데 뒤에 --port 3001이 왜 붙는지 궁금하지 않는가? (나만 궁금한 거일지도..)
아마 정말 높은 확률로 코드를 그대로 직역을 하면 port 번호 3001번을 열고 거기에 json server를 사용을 하게 하기위하여 저렇게 된 듯하다.

그런데 왜 3001 이냐..! 우리가 npm run start react 클라이언트 서버를 열면 몇 번 포트인지 바로 알 수 있다. 아래의 그림을 잘 보면 서버 실행 후 해당 url로 확인이 가능하다는 글이 나오는 데 뒤에 3000 이라고 localhost가 존재하는 포트를 알 수 있다.
포트는 겹치면 안되기에 뒤에 3001 설정을 한 것이다.

(물론 서버가 없는 port 번호를 3001 대신 입력해도 정상적으로 작동된다. 이 원리라면)

json 파일 수정하기

위의 명령어에 db.json 이라는 건 db라는 이름의 json 파일을 만들겠다는 것이다. 우리가 원하는 이름의 json 파일로 만들려면 db를 다른 말로 고치면 된다.

만약 내가 todo 라는 객체 배열을 만들어서 거기에 CRUD를 구현해보고 싶다..!
그렇다면 해당 json 파일에 초기값, 즉 initial state 값을 만들어 주면 된다.

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

그럼 이제 해당 데이터에 접근하여 todos.id 등의 방법으로 특정요소를 다룰 수 있게된다.