[JSON-SERVER] json-server 설치 및 실행하기.

🟡 1. json-server란?

  json파일을 사용하여 간단한 시뮬레이션을 위한 REST API Mock server를 구축할 수 있는 툴입니다.

 

🟡 2. json-server 설치하기.

 🟣 2.1 module 설치하기.

$ mkdir json-server-exam && cd json-server-exam
$ npm init -y
$ npm install json-server --save-dev

 

  🟣 2.2 mock.json 파일 생성하기.

   위에서 만든 프로젝트 root 경로(package.json과 동일한 위치)에  mock.json(이름은 자기원하는 대로) 만듭니다.

// mock.json
{
  "todos": [
    {
      "id": 1,
      "content": "HTML",
      "completed": true
    },
    {
      "id": 2,
      "content": "React",
      "completed": false
    },
    {
      "id": 3,
      "content": "JAVA",
      "completed": true
    }
  ],
  "users": [
    {
      "id": 1,
      "name": "Lee",
      "role": "developer"
    },
    {
      "id": 2,
      "name": "Kim",
      "role": "designer"
    }
  ]
}

 

 

🟡 3. json-server 실행하기.

// package.json

...
"scripts": {
    "start": "json-server --watch mock.json -p 3009"
  },
  ...

  json-server가 실행하면, mock.json파일을 바라보게 하면서, 3009번 포트로 실행하게 하는 스크립트를 추가합니다.

3009번 포트를 임의로 설정해준 이유는, 저는 next.js(port:3000)에서 json-server를 호출하기 위해서 입니다.

 

// npm
npm run start


// yarn
yarn start

둘 중 사용하시는 걸로 실행해줍니다.

 

 

🟡 3. json-server 테스트해보기.

🟣 3.1 postman을 이용하여 테스트해보기.

 

🟣 3.2 next.js에서 호출하기.

// server를 부르고 싶은 파일
axios.defaults.baseURL = "http://localhost:3009";

  const getList = async() => {
    try{
      const response = await axios.get("/todos");
      console.log(response)
    }catch(e){
      console.log(e)
    }
  }

 

 

 

📝 정리 

1. server 구축 없이 client에서 빠르게 api 테스트할 때 사용하면 좋다.
2. 새로운 폴더에 npm install json-server --save-dev
3. mock.json 파일 생성
4. package.json 파일에 "start": "json-server --watch mock.json -p 3009" 추가

 

 

긴 글 읽어주셔서 감사합니다 :) 
틀린 내용이 있거나, 덧붙일 내용이 있다면 언제든지 댓글 달아주세요!
제 글이 조금이나마 읽으신 분들에게 도움이 되도록 노력하겠습니다
다음 편에 봬요~