[json-server] 프론트 개발자가 json만으로 mock rest api 만들기

개요

프론트엔드 개발자가 빠르게 백엔드를 json만을 사용해서 프로토타입으로 만들어 볼 수 있습니다.

json으로만 rest api를 만듭니다. 코딩이 필요없습니다.

json만 작성합니다. 

 

 

사용 방법

$ npm install -D json-server     // npm 설치
$ json-server --watch mock.json  // 실행

실행하면, 홈 경로에 mock.json 파일이 생성됩니다.

초기 세팅을 보시면, 다음과 같을겁니다.

📄 mock.json

{
  "posts": [
    {
      "id": 1,
      "title": "json-server",
      "author": "typicode"
    }
  ],
  "comments": [
    {
      "id": 1,
      "body": "some comment",
      "postId": 1
    }
  ],
  "profile": {
    "name": "typicode"
  }
}

 

정상 실행 터미널 화면

 

 

애플리케이션과 사용할 때는 CORS에 대응해줘야 합니다.

저는 vue 프레임워크에서 api를 호출할 꺼기 때문에, vue.config.js에 proxy를 설정해서 CORS를 회피했습니다.

프로젝트 홈경로/vue.config.js

module.exports = {
    transpileDependencies: ['vuetify'],
    devServer: {
        proxy: {
            '/': {
                target: 'http://localhost:3000'
            }
        }
    },
}

 

 

추가로,

rest api의 경로가 복잡할 경우는 추가 설정을 더해서 json-server를 실행시켜야 했습니다.

mock.json과 같은 경로에 routes.json이라는 파일을 만들고 다음을 작성했습니다.

 

여러 방법으로 restapi의 경로에 맞춰서 요청할 수 있습니다.

routes.json

{
    "/api/*": "/$1",
    "/:resource/:id/show": "/:resource/:id",
    "/posts/:category": "/posts?category=:category",
    "/articles\\?id=:id": "/posts/:id"
}

 

그리고,

실행할 때, 다음 명렁어로 실행합니다.

$ json-server mock.json --routes routes.json

 

 

이렇게 실행하게 되면,

네트워크 요청이 api/-----로 json-server에 요청됩니다.

이 요청은 mock.json에 getuserinfo가 요청을 받아서 응답을 반환해 줍니다.

{
  "getuserinfo": [   //👈 요청 받음
    {
      "id": 1,
      "status": "success",
      "data": { //...
      }
      // ...
   ]
}