[JSON-Server] 코딩없이 Mock Restful API 서버 만들기

개요

---

안녕하세요 남산돈가스입니다.

오늘은 json-server라는 npm모듈을 소개해드리려고 합니다.

화면연동 시 서버 API가 없는 상태에서 미리 mock데이터로 연동이 필요하다던지 등 샘플용 API가 필요할 때 mock 프로젝트를 생성해서 만들기는 정말 귀찮은 노릇이죠.
json-server는 이런 귀찮은 문제를 정말 간단하게 해결해 주는 모듈입니다.

간단하게 정리하면 json-server는 npm을 이용해 설치하여 cli로 제공되며, 리턴 데이터로 활용할 json파일만 있으면 간단히 서버가 호스팅됩니다.
예제를 보면서 설명드리겠습니다.

내용

---

1. 설치

설치는 npm 명령을 통해 설치하며 전역으로 사용할 수 있도록 -g 옵션으로 설치합니다.

$ npm install -g json-server

2. Mock JSON 작성

개요에서 말씀드린 것처럼 리턴 데이터로 활용할 json파일을 작성해보겠습니다.

{
  "posts": [
    {
      "id": 1,
      "title": "반가워요",
      "author": "남산돈가스",
      "content": "안녕하세요 남산돈가스입니다."
    },
    {
      "id": 2,
      "title": "Hello",
      "author": "명동섞어찌개",
      "content": "안녕하세요 명동섞어찌개입니다."
    },
    {
      "id": 3,
      "title": "Good Morning!",
      "author": "남산돈가스",
      "content": "좋은 아침이에요~~"
    }
  ],
  "users": [
    {
      "id": 1,
      "name": "남산돈가스",
      "gender": "male"
    },
    {
      "id": 2,
      "name": "명동섞어찌개",
      "gender": "female"
    }
  ]
}

간단히 설명을 드리면 1Depth에 있는 'posts'와 'users'는 Rest API에서 프로토콜://호스트/{자원} 라면 '자원'에 해당합니다.
그러므로, 'posts'라는 키를 가진 값은 Object Array형태이며 Object는 'id', 'title', 'author', 'content'라는 키를 가진 게시글에 대한 내용을 가진 Object 라는 것을 알 수 있습니다.

json-server 실행

이제 이 json과 json-server 명령을 통해 서버를 실행해보겠습니다.

$ json-server --watch mock.json

  \{^_^}/ hi!

  Loading mock.json
  Done

  Resources
  http://localhost:3000/posts
  http://localhost:3000/users

  Home
  http://localhost:3000

  Type s + enter at any time to create a snapshot of the database
  Watching...

위와 같이 json-server 실행할json파일.json을 실행하면 3000포트를 가진 서버가 실행됩니다. --watch 옵션은 이제 이 서버 요청에 대한 내용을 계속해서 모니터링해주기 위한 옵션입니다.
추가적으로 Resources영역에 위 json에서 등록한 리소스임을 확인하실 수 있습니다. 서버 실행 시 호출이 가능한 주소를 Resources에 나타나고 있습니다.

요청해보기

GET http://localhost:3000/users : 회원 전체 조회

➜  ~ curl -XGET http://localhost:3000/users
[
  {
    "id": 1,
    "name": "남산돈가스",
    "gender": "male"
  },
  {
    "id": 2,
    "name": "명동섞어찌개",
    "gender": "female"
  }
]

GET http://localhost:3000/users/2 : 회원 중 id가 2번인 회원 조회

➜  ~ curl -XGET http://localhost:3000/users/2
{
  "id": 2,
  "name": "명동섞어찌개",
  "gender": "female"
}

POST http://localhost:3000/users : 회원 신규 등록

➜  ~ curl -XPOST http://localhost:3000/users -d '{ "name": "남산도서관", "gender" : "male" }' -H "Content-Type: application/json"
{
  "name": "남산도서관",
  "gender": "male",
  "id": 3
}
## 등록 후 다시 전체 조회로 확인
➜  ~ curl -XGET http://localhost:3000/users
[
  {
    "id": 1,
    "name": "남산돈가스",
    "gender": "male"
  },
  {
    "id": 2,
    "name": "명동섞어찌개",
    "gender": "female"
  },
  {
    "name": "남산도서관",
    "gender": "male",
    "id": 3
  }
]

PUT http://localhost:3000/users/3 : id가 3번인 회원의 정보를 수정

➜  ~ curl -XPUT http://localhost:3000/users/3 -d '{ "name" : "남산케이블카", "gender": "female" }' -H "Content-Type: application/json"
{
  "name": "남산케이블카",
  "gender": "female",
  "id": 3
}                                                                                                                
## 수정한 결과를 확인하기 위해 전체 조회
➜  ~ curl -XGET http://localhost:3000/users
[
  {
    "id": 1,
    "name": "남산돈가스",
    "gender": "male"
  },
  {
    "id": 2,
    "name": "명동섞어찌개",
    "gender": "female"
  },
  {
    "name": "남산케이블카",
    "gender": "female",
    "id": 3
  }
]

DELETE http://localhost:3000/users/3 : id가 3번인 회원정보를 삭제

➜  ~ curl -XDELETE http://localhost:3000/users/3
{}                                                               
## 삭제 된 결과를 확인하기 위해 전체 조회
➜  ~ curl -XGET http://localhost:3000/users
[
  {
    "id": 1,
    "name": "남산돈가스",
    "gender": "male"
  },
  {
    "id": 2,
    "name": "명동섞어찌개",
    "gender": "female"
  }
]

---

결론

단순히 json 파일만 작성했을 뿐인데, RESTful한 Mock API서버가 만들어졌습니다. 거기에 조회뿐만 아니라 생성, 수정, 삭제 기능까지 가능하니 훌륭한 Mock 도구가 될 것 같습니다.

json-server의 github 페이지에 가보시면 제가 설명드린 기본적인 내용 이외에 훨씬 더 다양한 기능을 제공하니 참고하시기 바랍니다.

감사합니다.