팀 프로젝트를 처음 해보는데, 프론트만 4명이라 api가 없으니 꽤 난감했습니다.

맡은 것을 구현하는 것 외에도 필요한 것이 계속 생길 것이고, 자잘한 공부들과 작업들이 계속 늘어날 것 같아 백엔드에는 크게 신경을 쓰고 싶지 않았습니다.
무엇보다 변경이 필요할 경우에 쉽게 바꿀 수 있어야 한다고 생각했습니다. 내가 해야하니까

팀에선 json-server library를 사용하기로 했습니다.

json-server 로 Mock server 구축하기

json 파일을 사용하여 RESTful API 서버를 구축하는 라이브러리입니다.

npm i json-server

프로젝트 루트 폴더에 db.json 파일을 생성합니다.

이 파일은 데이터베이스 역할을 하고, 로컬에서만 사용할 수 있습니다.

package.json에 스크립트를 한 줄 추가해줍니다.

  "scripts": {
    "start-json-server": "json-server --watch db.json --port 3001"
  },

npm run start-json-server 라는 명령어로, 3001포트에서 실행된다는 의미입니다.

JSON으로 된 더미 데이터 만들기

이제 서버에 들어갈 json 데이터를 만들 차례입니다.

쥐꼬리만한 데이터베이스 지식으로, 팀원들도 편하게 사용할 수 있도록 최대한 간단하게 테이블을 구성했습니다. 아무리 고민해서 설계한다고 해도 구조는 무조건 바뀔 것이라고 생각하기도 했고요.

기능 명세에 따라서 당장 팀원들에게 필요한 급했던 데이터 위주로 테이블들을 구성했고, ObjGen 이라는 JSON 제너레이터로 더미 데이터를 만들어서 db.json 파일에 붙여넣었습니다. 사용법이 간단한 편입니다. 설계가 문제지

서버와 클라이언트 서버 동시에 돌리기

vite로 프로젝트를 하고 있기 때문에 vite의 포트와 json-server 포트를 동시에 실행시키는 방법이 필요했습니다.
vite의 npm run dev 명령어와 npm run start-json-server 명령어를 동시에 실행시킬 수 없기 때문에요!

Concurrently 라는 라이브러리를 활용하면 서버와 클라이언트를 자동으로 한꺼번에 실행시킬 수 있습니다.

npm i concurrently

스크립트도 한 줄 더 추가해줍니다.

  "scripts": {
    "dev": "concurrently \" vite\" \"npm run start-json-server\"",
    "start-json-server": "json-server --watch db.json --port 3001"
  },

npm run dev로 실행을 시키고 싶기 때문에, concurrently와 \"를 위와 같은 형식으로 작성해주었습니다.
정상적으로 실행되는지 확인합니다