json server

json-server란?

• DB와 API 서버를 생성해주는 패키지
• Backend(이하 BE)에서 실제 DB와 API Server가 구축될 때까지 Frontend(이하 FE) 개발에 임시적으로 사용할 mock data를 생성

순서)
1. yarn add json-server
2. root 경로에 db.json파일 형성
3. mock data 형성

{
  "todos": [
    {
      "id": 1,
      "content": "HTML",
      "completed": true
    },
    {
      "id": 2,
      "content": "CSS",
      "completed": false
    },
    {
      "id": 3,
      "content": "Javascript",
      "completed": true
    }
  ],
  "users": [
    {
      "id": 1,
      "name": "Lee",
      "role": "developer"
    },
    {
      "id": 2,
      "name": "Kim",
      "role": "designer"
    }
  ]
}

4. json 서버 열기
   yarn json-server --watch db.json --port 4000

json-server 를 열었던 터미널은 그대로 두고,
새로운 터미널을 열어서 리액트 서버를 따로 열어야 합니다!

package.json에 명령어 추가하기 (추천)
"scripts": {
"dev": "vite",
"build": "vite build",
"lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview",
"serve": "json-server db.json --port 5000"
},
이후 포트 여는 방법
- npm run serve
// 또는
yarn serve

Tip: json-server로 배포할 경우 Glitch로 배포하기