JSON Server 활용하기

JSON Server는 개발 단계에서 프로토타이핑이나 모의(Mocking) API를 신속하게 생성하기 위한 도구이다. 실제 백엔드 서비스 없이 프론트엔드 애플리케이션 개발에 필요한 RESTful API를 모방할 수 있다.

 

빠른 설치

JSON Server 설치는 Node.js와 npm이 설치된 React 개발 환경에서 간단하게 이루어진다. 글로벌 설치를 원한다면 터미널에 다음을 입력한다.

npm install -g json-server

 

React 프로젝트 내에서만 사용하려면 해당 디렉토리로 이동 후 다음 명령어를 실행한다.

npm install json-server --save-dev

 

이후 package.json에 실행 스크립트를 추가하여 쉽게 서버를 시작할 수 있다.

"scripts": {
  "start-json-server": "json-server --watch db.json --port 3001"
}

그리고 npm run start-json-server를 통해 서버를 구동시킨다. 이렇게 하면 포트 3001에서 db.json 파일을 기반으로 하는 API 서버가 실행되어 React 애플리케이션에서 백엔드가 없이도 데이터를 송수신할 수 있는 환경이 마련된다. React 컴포넌트 내에서 axios나 fetch를 사용해 이 서버와 통신하며 개발을 진행한다.

 

간편한 사용 - RESTful 지원

JSON Server를 사용하는 가장 큰 장점 중 하나는 간단한 JSON 파일을 통해 복잡한 API를 모의할 수 있다는 점이다. 기본적으로 JSON Server는 제공된 JSON 파일을 데이터베이스로 사용하여, 해당 데이터에 대한 REST API를 자동으로 생성한다.

예를 들어, 아래와 같은 db.json 파일이 있다고 가정하자.

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

위와 같은 db.json 파일을 기반으로 JSON Server를 실행하면 다음과 같은 API 엔드포인트가 생성된다.

• GET /posts
• GET /posts/1
• POST /posts
• PUT /posts/1
• PATCH /posts/1
• DELETE /posts/1
• GET /comments
• GET /comments/1
• ...
• GET /profile
• POST /profile
• PUT /profile
• ...

이를 통해 각각의 데이터 타입에 대해 CRUD(Create, Read, Update, Delete) 연산을 수행하는 API를 갖게 된다. 예를 들어, 새로운 post를 추가하고 싶다면, POST 요청을 /posts 엔드포인트에 보내면 되고, 특정 post를 수정하고 싶을 때는 PUT 또는 PATCH 요청을 /posts/{id} 엔드포인트에 보내면 된다.

 

React 개발 환경에서 fetch API를 사용하여 엔드포인트와 통신하는 코드이다.

// 새로운 post 추가
fetch('/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ title: 'React', author: 'Facebook' })
})
.then(response => response.json())
.then(json => console.log(json))

// 특정 post 업데이트
fetch('/posts/1', {
  method: 'PATCH',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ title: 'Updated Title' })
})
.then(response => response.json())
.then(json => console.log(json))

이와 같이 JSON Server는 간단한 설정과 적은 코드로 빠르게 백엔드 프로토타이핑을 할 수 있게 도와준다. 개발자는 복잡한 백엔드 설정 없이 프론트엔드 개발에 집중할 수 있으며, API 응답을 테스트할 수 있다.

 

유연성

JSON Server의 유연성은 사용자가 API의 동작을 쉽게 커스터마이징 할 수 있음을 의미한다.

1. 동적 데이터 생성: 사용자는 자바스크립트 함수를 활용하여 가짜 데이터를 동적으로 생성할 수 있다. 이는 개발 과정에서 다양한 시나리오를 테스트하는 데 유용하다.
2. 라우팅 규칙 커스터마이징: JSON Server는 URL 라우트를 재정의할 수 있는 기능을 제공하여, 사용자가 특정 API 엔드포인트의 동작을 변경할 수 있다. 예를 들어, /api/posts/1과 같은 요청이 들어왔을 때, 사용자는 서버가 /posts/1로 라우팅 하도록 설정할 수 있다.
3. 미들웨어 사용: JSON Server는 Express.js 기반으로 구축되어 있으므로, Express 미들웨어를 사용하여 API 요청과 응답을 중간에서 가공할 수 있다. 예를 들어, 요청 로그를 기록하거나 API 응답에 공통적인 헤더를 추가하는 것 등이 가능하다.
4. 응답 시뮬레이션: 개발자는 지연 응답, 상태 코드 변경, 헤더 커스터마이징 등을 통해 다양한 응답 시나리오를 시뮬레이션 할 수 있다. 이를 통해 프론트엔드 애플리케이션이 다양한 백엔드 상황에 어떻게 반응하는지 테스트 할 수 있다.
5. 데이터베이스 스냅샷: 언제든지 현재의 데이터베이스 상태를 파일로 저장하여 스냅샷을 만들 수 있다. 이는 데이터를 복원하거나 특정 상태로 API를 다시 시작하는 데 유용하다.
6. 커스텀 라우트 핸들러: 개발자는 특정 API 요청에 대해 커스텀 라우트 핸들러를 작성할 수 있으며, 이를 통해 복잡한 로직이나 외부 시스템과의 통신 등을 처리할 수 있다.

유연성은 JSON Server가 단순한 프로토타이핑 도구를 넘어서, 실제 애플리케이션의 복잡한 요구 사항을 모의할 수 있도록 만드는 핵심적인 특징이다.

 

데이터 저장

JSON Server는 사용자의 데이터를 db.json 파일에 저장함으로써 데이터의 지속성을 제공한다. 이는 실제 데이터베이스를 모방한 것으로, 파일 시스템을 사용하여 데이터를 저장하고 검색한다.

db.json 파일의 초기 상태가 다음과 같이 주어져 있다고 가정하자.

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

 

이 상태에서 사용자가 새로운 게시글을 추가하는 HTTP POST 요청을 JSON Server에 보내면, 서버는 이를 처리하여 db.json 파일에 해당 데이터를 추가한다.

POST /posts HTTP/1.1
Host: localhost:3000
Content-Type: application/json

{
  "title": "My New Post",
  "author": "Jane Doe"
}

 

JSON Server는 위와 같은 요청을 받으면 다음과 같이 db.json 파일을 업데이트한다.

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" },
    { "id": 2, "title": "My New Post", "author": "Jane Doe" } // 새로 추가된 데이터
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

여기서 중요한 점은, JSON Server가 데이터의 추가, 수정, 삭제가 이루어질 때마다 db.json 파일을 자동으로 갱신한다는 것이다. 이를 통해 개발자는 서버를 재시작하더라도 이전 상태를 유지할 수 있으며, 실제 백엔드 서비스에 필요한 데이터 관리 기능을 모의할 수 있다.

 

이와 같은 방식은 프론트엔드 개발 시 백엔드 서버의 구현 전 또는 백엔드 서버가 사용 불가능한 상황에서도 애플리케이션의 데이터 처리 로직을 개발하고 테스트할 수 있게 해주는 효과적인 방법이다. JSON Server의 이러한 데이터 저장 기능은 빠른 프로토타이핑과 테스트를 가능하게 하여 개발 과정을 가속화한다.