[240521 TIL] JSON server

오늘은 mock 데이터를 보내주는 가상 서버를 만들어 연습 등등에 사용할 수 있는 방법을 배웠습니다.
JSON Server 가 그것으로, JSON Server는 간단한 REST API 서버를 만들기 위해 사용되는 라이브러리라고 합니다.

JSON Server를 통해 JSON 파일을 기반으로 빠르게 Mock API를 생성할 수 있습니다. JSON Server의 설치 및 기본 사용법을 정리합니다.

1. JSON Server 설치

먼저 JSON Server를 글로벌로 설치합니다.

npm install -g json-server

2. JSON 파일 준비

JSON Server는 JSON 파일을 데이터베이스로 사용합니다. 프로젝트 루트 디렉토리에 db.json 파일을 생성하고 다음과 같이 데이터를 준비합니다.

// db.json
{
  "posts": [
    { "id": 1, "title": "Hello World", "author": "John Doe" },
    { "id": 2, "title": "JSON Server", "author": "Jane Doe" }
  ],
  "comments": [
    { "id": 1, "postId": 1, "body": "Nice post!" },
    { "id": 2, "postId": 2, "body": "Very useful!" }
  ],
  "profile": { "name": "John Doe" }
}

3. JSON Server 실행

JSON Server를 실행하여 REST API 서버를 시작합니다.

json-server --watch db.json

이 명령어를 실행하면 JSON Server는 기본적으로 http://localhost:3000에서 실행됩니다.

4. REST API 사용

JSON Server가 실행되면 다음과 같은 RESTful 엔드포인트를 사용할 수 있습니다:

• GET /posts: 모든 게시물을 가져옵니다.
• GET /posts/1: ID가 1인 게시물을 가져옵니다.
• POST /posts: 새로운 게시물을 생성합니다.
• PUT /posts/1: ID가 1인 게시물을 업데이트합니다.
• DELETE /posts/1: ID가 1인 게시물을 삭제합니다.

5. REST API 예제

curl 명령어를 사용하여 JSON Server의 REST API를 호출하는 예제는 다음과 같습니다.

1. 모든 게시물 가져오기

curl http://localhost:3000/posts

2. ID가 1인 게시물 가져오기

curl http://localhost:3000/posts/1

3. 새로운 게시물 생성하기

curl -X POST -H "Content-Type: application/json" -d '{"title": "New Post", "author": "Alice"}' http://localhost:3000/posts

4. ID가 1인 게시물 업데이트하기

curl -X PUT -H "Content-Type: application/json" -d '{"title": "Updated Post", "author": "John Doe"}' http://localhost:3000/posts/1

5. ID가 1인 게시물 삭제하기

curl -X DELETE http://localhost:3000/posts/1

6. React에서 사용하기

React 애플리케이션에서 JSON Server와 통신하는 방법은 다음과 같습니다

1. 프로젝트 설정

npx create-react-app json-server-demo
cd json-server-demo
npm install axios

2. API 호출

App.js 파일을 수정하여 JSON Server에서 데이터를 가져오도록 합니다.

// src/App.js
import React, { useEffect, useState } from 'react';
import axios from 'axios';

const App = () => {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:3000/posts')
      .then(response => {
        setPosts(response.data);
      })
      .catch(error => {
        console.error('There was an error fetching the posts!', error);
      });
  }, []);

  return (
    <div>
      <h1>Posts</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>{post.title} by {post.author}</li>
        ))}
      </ul>
    </div>
  );
};

export default App;

이제 React 애플리케이션을 실행하면 JSON Server에서 데이터를 가져와서 화면에 표시합니다.

7. JSON Server 커스터마이징

JSON Server는 다양한 옵션으로 커스터마이징이 가능합니다.

• 포트 변경: 기본 포트를 변경하려면 --port 옵션을 사용합니다.

  json-server --watch db.json --port 4000

• 라우팅 설정: routes.json 파일을 사용하여 커스텀 라우트를 설정할 수 있습니다.

  // routes.json
  {
    "/api/": "/"
  }

  json-server --watch db.json --routes routes.json

• **Middleware 사용: server.js 파일을 생성하여 Middleware 를 추가할 수 있습니다.

  // server.js
  const jsonServer = require('json-server');
  const server = jsonServer.create();
  const router = jsonServer.router('db.json');
  const middlewares = jsonServer.defaults();
  
  server.use(middlewares);
  server.use(jsonServer.bodyParser);
  
  server.use((req, res, next) => {
    if (req.method === 'POST') {
      req.body.createdAt = Date.now();
    }
    next();
  });
  
  server.use(router);
  
  server.listen(3000, () => {
    console.log('JSON Server is running');
  });

  node server.js

이처럼 JSON Server를 사용하여 빠르게 Mock API 서버를 만들고, 이를 통해 애플리케이션을 개발하고 테스트가 가능합니다.