본문 바로가기

IT Story

뚝딱! 나만의 가짜 백엔드 서버, JSON Server

반응형

프런트엔드 개발하다 보면 백엔드 API가 아직 없어서 답답할 때가 많죠? 그럴 때 JSON Server가 있으면 마치 마법처럼 나만의 가짜 백엔드 서버를 만들 수 있습니다. 데이터베이스도 필요 없고, 복잡한 코드도 필요 없어요! 그냥 JSON 파일 하나면 모든 게 해결됩니다.

자, 그럼 JSON Server로 가짜 API 서버를 만드는 예시를 함께 볼까요?

뚝딱! 나만의 가짜 백엔드 서버, JSON Server
뚝딱! 나만의 가짜 백엔드 서버, JSON Server


1. JSON Server 설치하기

가장 먼저, JSON Server를 전역으로 설치해 줍니다. 터미널(명령 프롬프트)을 열고 다음 명령어를 입력하세요:

npm install -g json-server@0.17.4
# 또는 yarn 사용 시:
# yarn global add json-server

이 명령어는 여러분의 컴퓨터 어디서든 json-server 명령어를 사용할 수 있게 해 줍니다.


2. 데이터베이스 역할을 할 JSON 파일 만들기

이제 가짜 API 서버가 제공할 데이터를 정의하는 JSON 파일을 만들어야 합니다. 이 파일이 바로 우리 가짜 백엔드의 '데이터베이스' 역할을 할 거예요.

프로젝트 폴더 안에 db.json이라는 이름으로 파일을 생성하고, 다음과 같이 내용을 작성해 보세요.

{
  "posts": [
    { "id": 1, "title": "JSON Server로 만든 첫 게시글", "author": "코치" },
    { "id": 2, "title": "가짜 데이터, 진짜처럼 쓰기!", "author": "제로" },
    { "id": 3, "title": "프론트엔드 개발이 쉬워진다", "author": "장미" }
  ],
  "comments": [
    { "id": 1, "body": "정말 유용하네요!", "postId": 1 },
    { "id": 2, "body": "굿굿! 감사합니다.", "postId": 3 }
  ],
  "profile": {
    "name": "코드 잘고친는 코치"
  }
}
  • posts, comments, profile처럼 최상위 키는 곧 API의 엔드포인트가 됩니다.
  • 각 배열 안의 객체들은 *개별 리소스(게시글, 댓글)*를 나타냅니다. id 필드를 포함하는 것이 좋습니다.

3. JSON Server 실행하기

db.json 파일을 저장했다면, 이제 터미널에서 해당 파일이 있는 디렉터리로 이동한 후 다음 명령어를 입력하여 JSON Server를 실행합니다:

Bash
 
json-server --watch db.json --port 3001
  • --watch db.json: db.json 파일의 변경 사항을 감지하여 서버를 자동으로 업데이트합니다. (파일을 수정하고 저장하면 서버가 자동으로 재시작됩니다.)
  • --port 3001: 서버를 3001번 포트로 실행합니다. (기본 포트는 3000번입니다. React 앱이 3000번을 사용한다면 다른 포트를 지정해 주는 것이 좋습니다.)

명령어를 실행하면 터미널에 다음과 비슷한 메시지가 나타날 거예요:

$ json-server --watch db.json --port 3001

  Loading db.json
  Done

  Resources
  http://localhost:3001/posts
  http://localhost:3001/comments
  http://localhost:3001/profile

  Home
  http://localhost:3001

  Type s + enter to restart
  Watching db.json...

이제 여러분만의 가짜 백엔드 API 서버가 성공적으로 실행된 겁니다!


4. API 테스트해 보기 (브라우저 또는 코드)

이제 브라우저나 여러분의 React 코드에서 이 API를 호출해 볼 수 있습니다.

브라우저에서 테스트:

위에 표시된 URL들을 직접 브라우저 주소창에 입력해 보세요.

  • 모든 게시글 조회: http://localhost:3001/posts
  • ID가 1인 게시글 조회: http://localhost:3001/posts/1
  • 모든 댓글 조회: http://localhost:3001/comments
  • 내 프로필 조회: http://localhost:3001/profile

React 코드에서 사용 예시:

React 컴포넌트에서 fetch 또는 axios를 사용하여 JSON Server로 만든 API를 호출할 수 있습니다.

// src/components/PostList.js (React 컴포넌트 예시)
import React, { useState, useEffect } from 'react';

function PostList() {
  const [posts, setPosts] = useState([]);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    // JSON Server API 호출
    fetch('http://localhost:3001/posts') // JSON Server 주소와 엔드포인트
      .then(response => {
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        return response.json();
      })
      .then(data => {
        setPosts(data);
        setLoading(false);
      })
      .catch(err => {
        setError(err);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>게시글 불러오는 중...</div>;
  if (error) return <div>에러 발생: {error.message}</div>;

  return (
    <div>
      <h1>게시글 목록 (JSON Server에서 가져옴)</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>작성자: {post.author}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PostList;

5. 더 많은 기능 활용하기

JSON Server는 단순한 GET 요청 외에도 다양한 기능을 지원합니다.

  • POST (생성): fetch('http://localhost:3001/posts', { method: 'POST', body: JSON.stringify({ title: '새 글', author: '테스트' }), headers: { 'Content-Type': 'application/json' } })
  • PUT/PATCH (수정): fetch('http://localhost:3001/posts/1', { method: 'PUT', body: JSON.stringify({ title: '수정된 첫 글' }), headers: { 'Content-Type': 'application/json' } })
  • DELETE (삭제): fetch('http://localhost:3001/posts/1', { method: 'DELETE' })
  • 필터링: http://localhost:3001/posts? author=코난
  • 관계형 데이터 조회: http://localhost:3001/posts?_embed=comments (게시글과 해당 게시글의 댓글을 함께 가져옴)

JSON Server는 프런트엔드 개발자가 백엔드에 의존하지 않고 빠르게 UI와 클라이언트 로직을 테스트할 수 있도록 도와주는 정말 강력하고 편리한 도구입니다. 백엔드 팀과 API 명세를 확정하기 전이나, 간단한 데모 앱을 만들 때 활용해 보세요!

 

6. JSON Server 다층 구조 엔드포인트 만들기!

그런데 보통 실제 API들은 /api/posts처럼 루트에 바로 붙는 경우도 있지만, /api/v1/users/profile처럼 버전을 포함하거나, /api/products/categories처럼 더 깊은 계층 구조를 가지는 경우가 많습니다.

JSON Server도 이런 다층 구조 엔드포인트를 지원하는데, 어떻게 하는지 알아볼까요?

 

JSON Server는 사용자 정의 라우팅(Custom Routes) 기능을 제공합니다. routes.json 파일을 사용하여 특정 URL 패턴을 다른 내부 URL로 리다이렉트 하거나, 더 복잡한 매핑 규칙을 정의할 수 있습니다. 이것이 다층 구조 엔드포인트를 구현하는 가장 효과적인 방법입니다.

 

단, 아래 방법은 json-server v0.17.4까지 작용되고, 1.0 버전부터는 제공되지 않습니다.  많은 커뮤니티에서 이슈가 되고 있는데, 1.0이 설치되어 있다면, 제거 후 (npm uninstall -g json-server) 재설치해야 합니다.(npm install -g json-server@0.17.4)

 

  1. routes.json 파일 생성:
    • "요청될_경로": "실제_db.json_내부_경로" 형태로 매핑합니다.
    • :id는 URL 파라미터로, :id를 통해 동적으로 매핑됩니다.
      routes.json:
      {
        "/api/v1/posts": "/posts",            // /api/v1/posts 요청 -> /posts로 매핑
        "/api/v1/posts/:id": "/posts/:id",    // /api/v1/posts/1 요청 -> /posts/1로 매핑
        "/api/v1/commtents": "/commtents",
        "/api/v1/commtents/:id": "/commtents/:id",
        "/api/v1/profile": "/profile"      // profile 단일 객체에 대한 매핑
      }
       
      json-server --watch db.json --routes routes.json --port 3001
      

이제 다음과 같은 URL로 API를 호출할 수 있습니다!

  • http://localhost:3001/api/v1/posts: 모든 게시글 목록
  • http://localhost:3001/api/v1/posts/1: ID가 1인 게시글 -- 이 부분은 작동이 안돼서? id=1 이런 식으로 파라미터로 넘기면 가능했습니다. 아마도 이러한 버그로 인해서 v1.0에서는 route기능을 제거했을지도 모르겠네요
  • http://localhost:3001/api/v1/comments: 모든 내용 목록
  • http://localhost:3001/api/v1/profile: 사용자 프로필 정보

장점:

  • 실제 API 구조와 유사하게 모킹 가능: 버저닝(v1, v2), 리소스 계층 구조(user/profile, products/categories) 등을 자유롭게 정의할 수 있습니다.
  • 유연한 매핑: db.json의 구조를 그대로 유지하면서, 외부로 노출되는 API 엔드포인트만 원하는 대로 바꿀 수 있습니다.

결론

테스트환경에서 실제환경으로 API URL만 수정하면 적용이 가능하도록 , 다층 구조의 엔드포인트를 JSON Server로 모킹 하려면 routes.json 파일을 사용하는 것이 가장 강력하고 유연한 방법입니다. 이를 통해 실제 백엔드 API와 거의 동일한 URL 구조를 미리 만들고, 프런트엔드 개발을 더 현실적인 환경에서 진행할 수 있답니다.

현재 시점에서 --routes 옵션을 사용하여 편리하게 라우팅을 구성하고 싶다면, JSON Server v0.17.4와 같은 안정적인 이전 버전을 사용하는 것이 가장 좋습니다.

만약 최신 버전의 JSON Server (1.0 이상)의 다른 기능들을 사용해야 하거나, 더 복잡한 모킹 시나리오를 구현하고 싶다면, server.js 파일을 통한 프로그래밍 방식의 라우팅 설정을 고려해야 합니다.

 

반응형