JSON Server를 활용하여 간편하게 가상 API 만들기

프론트엔드 개발자로서 새로운 프로젝트를 시작하거나 프로토타입을 빠르게 개발해야 할 때, 백엔드 서버 없이 데이터 API를 간단하게 모의하고 테스트가 필요할 때가 있다.  이럴 때 효과적으로 JSON Server를 이용하여 도움을 받을 수 있다.

 

JSON Server는 가상 RESTful API를 생성하고 관리하는 데 사용되는 강력한 도구로, 데이터베이스 없이도 모의 데이터를 제공하고 CRUD (Create, Read, Update, Delete) 작업을 수행할 수 있다.

 

JSON Server를 먼저 알기전에 RESTful API에 관해서 알아 보고 가자!!

 

RESTful API는

“Representational State Transfer”의 약자로

자원의 이름으로 구분해해당 자원의 상태를 주고받는 것을 말한다.

 

HTTP 프로토콜은 GET, POST, PUT, PATCH, DELETE의 Method를 제공한다. ( CRUD )

GET	Read : 정보 요청, URI가 가진 정보를 검색하기 위해 서버에 요청한다.
POST	Create : 정보 입력, 클라이언트에서 서버로 전달하려는 정보를 보낸다.
PUT	Update : 정보 업데이트, 주로 내용을 갱신하기 위해 사용한다. (데이터 전체를 바꿀 때)
PATCH	Update : 정보 업데이트, 주로 내용을 갱신하기 위해 사용한다. (데이터 일부만 바꿀 때)
DELETE	Delete : 정보 삭제, (안전성 문제로 대부분 서버에서 비활성화한다.)

디테일 한 정보는 다음에 더 알아보고 지금은 JSON-Server에 관하여 더 알아보자!!!

 

JSON-Server의 장점은 무엇이 있을까?

1. 빠르고 간편한 설정을 할 수 있다. 별도의 데이터베이스, 백엔드 서버를 설정 할 필요가 없다.
2. 실제 API와 유사한 데이터 : JSON Server를 사용하면 JSON형식의 데이터 값을 RESPONSE 해주는 API를 제공할 수 있어 실제 데이터와 유사하게 사용할 수 있다.
3. HTTP메서드 지원 : JSON Server 는 HTTP메서드(GET, POST, PUT, DELETE 등)을 지원하므로 데이터의 조회, 추가, 수정, 삭제 등의 시뮬레이션할 수 있다.
4. 루트 API 엔드 포인트 : JSON Server는 루트 API 엔드포인트를 제공하며, 복잡한 경로나 엔드포인트를 설정하지 않고도 데이터에 접근 할 수 있다.

 

JSON Server 시작하기

1. Node.js 설치 : Json Server를 사용하려면 Node.js 먼저 설치해야한다.

2. JSON Server설치 : 터미널 또는 명령 프롬프트에서 JSON Server를 전역으로 설치한다.

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

3. JSON 파일 작성 : JSON Server는 JSON 파일을 사용하여 데이터를 정의한다. Db.json 파일을 생성하고 데이터를 작성한다. 

{
  "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 Server 실행 : 터미널에서 명령어로 JSON Server를 실행한다. 포트번호를 지정할 수 도 있다.

## watch 옵션 적용
$ json-server --watch db.json--port 5000

5. API 사용 : 웹 브라우저 또는 HTTP클라이언트를 사용하여 모의 API에 GET, POST, PUT, DELETE 요청을 보낼 수 있다.

 

커스텀 라우트(Router를 커스텀하여 사용하기 위하여)

커스텀 라우트를 추가하기 위해 아래와 같이 lowdb를 설치하고, server.js를 프로젝트 루트에 생성한다.

## https://github.com/typicode/lowdb
npm install lowdb

server.js 를 이렇게 생성하면 된다.

// server.js
const jsonServer = require('json-server');
const server = jsonServer.create();
const router = jsonServer.router('db.json');
const middlewares = jsonServer.defaults();

// db.json를 조작하기 위해 lowdb를 사용
const low = require('lowdb');
const FileSync = require('lowdb/adapters/FileSync');
const adapter = new FileSync('db.json');
const db = low(adapter);

// Set default middlewares (logger, static, cors and no-cache)
server.use(middlewares);

// Add custom routes before JSON Server router
server.delete('/todos/completed', (req, res) => {
  // lowdb를 사용해서 db.json에서 completed: true인 todo를 제거
  db.get('todos')
    .remove({ completed: true })
    .write();

  // todos를 응답
  res.send(db.get('todos').value());
})

// Use default router
server.use(router);

server.listen(3000, () => {
  console.log('JSON Server is running')
});

package.json을 아래와 같이 수정한다면 바로 실행

...
- "scripts": {
-   "start": "json-server --watch db.json"
- },
+ "scripts": {
+   "start": "node server.js"
+ },
...

Router에 커스텀을 하여 사용 할 수 있다.