✏️ json-server 설치와 세팅방법

json-server은 무엇일까?

json-server은 아주 간단한 DB와 API 서버를 생성해주는 패키지이다.

실제 `DB`와 `API Server`가 구축될 때 까지 Front-end 개발에 임시적으로 사용할 `mock data`를 만들어둔다!

 
 
 
 
 

json-server 링크

json-server

 
 
 
 
 
 

json-server 설치방법

npm install -g json-server
//또는
yarn add json-server

 
 
 
 
 
 

맥북이 설치가 안된다면?

맥북은 관리자 문제 때문에 앞에 sudo를 붙여서 설치해준다!

sudo npm install -g json-server

 

 

 

 

설치는 끝났다! 데이터를 연결해보자

 
서버에 있는 데이터를 실행해보려면 서버용 포트를 만들어 실행해 줘야한다.

 npx json-server db.json --port 4000

--watch는 버전이 1로 올라가면서 생략이 가능해졌다.

 

 

 

package.json에 추가해보자

  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    //이렇게 추가해준다
    "serve": "json-server db.json --port 4000"
  }

scripts에 "serve"라는 이름으로 port번호 4000을 추가해 주었다.
 
 
 
 
 
 
 

추가하고 실행해보면 이렇게 귀여운(?) 이모티콘이 나온다!
 
 
 
 
 
 

테스트용으로 db.json에 내용을 만들어보자

{
  "todos": [
    {
      "id": "ㅎㅇ"
    }
  ]
}

먼저 테스트용으로 `todos`라는 이름으로 `id`를 `ㅎㅇ`라고 넣어 보았다.
 
 
 
 
 
 
 
 

서버를 실행하고 난 뒤, 로컬호스트 4000으로 가서 /todos url을 넣고 확인해본다.

제대로 실행되면 잘 나오는 것이다!
 
 
 
 
 
 
 

실행방법

npm run serve
// 또는
yarn serve

package.json에 추가하면 전용 명령어로 호출 가능하다.
장점) json-server를 사용한다고 명시 가능하고, 이후엔 모든 명령어를 기억하지 않고 짧은 명령어로 실행 가능하다.