json-server, RESTful API

React에서 json-server와 REST API는 프론트엔드 애플리케이션을 API와 연동하고, 더미 데이터를 이용해 개발 환경을 구축하는 데 매우 유용합니다. 이를 통해 실제 백엔드 서버가 준비되지 않은 상태에서도 API 요청을 테스트할 수 있습니다.

1. REST API란?

REST API(Representational State Transfer API)는 HTTP를 통해 데이터와 리소스를 교환하는 방식입니다. REST는 자원을 URL로 표현하고, HTTP 메서드(GET, POST, PUT, DELETE)를 사용하여 자원에 대한 CRUD(Create, Read, Update, Delete) 작업을 수행합니다. REST API는 일관된 규칙을 따르기 때문에, 다양한 클라이언트가 서버와 데이터를 주고받을 수 있습니다.

REST API의 주요 요소

• 자원(Resource): 각 자원은 고유한 URL로 식별됩니다. 예를 들어 /users, /posts/1 같은 경로로 자원을 구분합니다.
• HTTP 메서드:
  • GET: 자원을 조회합니다.
  • POST: 새로운 자원을 생성합니다.
  • PUT: 기존 자원을 업데이트합니다.
  • DELETE: 자원을 삭제합니다.
• JSON 형식: 대부분의 REST API는 데이터를 JSON 형식으로 주고받습니다.

예시

REST API의 예를 들어, /users에 대한 요청이 있다고 가정합니다.

HTTP 메서드	경로	설명
GET	/users	모든 사용자 목록 조회
POST	/users	새로운 사용자 생성
GET	/users/1	ID가 1인 사용자 조회
PUT	/users/1	ID가 1인 사용자 정보 수정
DELETE	/users/1	ID가 1인 사용자 삭제

---

2. json-server란?

json-server는 로컬 환경에서 빠르게 REST API 서버를 구축할 수 있는 툴입니다. JSON 파일을 데이터베이스처럼 활용해 데이터를 저장하고, RESTful API 인터페이스를 제공합니다. 이를 통해 프론트엔드 개발자가 실제 서버 없이도 더미 데이터를 이용해 API 요청을 테스트할 수 있습니다.

json-server 설치

npm install -g json-server

이 명령어로 json-server를 전역으로 설치합니다. 또는, 프로젝트에만 설치하고 싶다면 npm install json-server로 설치합니다.

---

3. json-server로 가상 REST API 서버 생성

json-server는 JSON 파일을 API의 데이터베이스처럼 사용할 수 있도록 합니다. db.json이라는 이름의 JSON 파일을 생성하고, 데이터 구조를 설정하면 됩니다.

예제: db.json 파일 생성

{
  "users": [
    { "id": 1, "name": "Alice", "age": 25 },
    { "id": 2, "name": "Bob", "age": 30 },
    { "id": 3, "name": "Charlie", "age": 28 }
  ],
  "posts": [
    { "id": 1, "title": "Hello World", "content": "Welcome to my blog" },
    { "id": 2, "title": "Another Post", "content": "Here is some content" }
  ]
}

위 JSON 파일을 json-server로 가상 서버에서 API로 제공할 수 있습니다.

서버 시작하기

json-server --watch db.json --port 5000

• --watch db.json: db.json 파일의 데이터를 사용하여 서버를 실행합니다.
• --port 5000: 기본 포트는 3000이지만, 5000번 포트에서 실행하도록 지정합니다.

이렇게 실행하면 http://localhost:5000에서 db.json 파일을 기반으로 한 RESTful API 서버가 실행됩니다.

---

4. REST API 요청 예제 (json-server)

json-server를 통해 API 요청을 수행할 수 있습니다. 예를 들어, http://localhost:5000/users 경로에서 사용자 데이터를 관리할 수 있습니다.

예제: API 요청과 응답

• GET 요청: 모든 사용자 조회

  [
    { "id": 1, "name": "Alice", "age": 25 },
    { "id": 2, "name": "Bob", "age": 30 },
    { "id": 3, "name": "Charlie", "age": 28 }
  ]

• GET http://localhost:5000/users
• POST 요청: 새로운 사용자 추가

  {
    "name": "David",
    "age": 35
  }

• POST http://localhost:5000/users
• PUT 요청: 특정 사용자 정보 수정

  {
    "name": "Alice",
    "age": 26
  }

• PUT http://localhost:5000/users/1
• DELETE 요청: 특정 사용자 삭제
• DELETE http://localhost:5000/users/1

이처럼 json-server는 HTTP 요청에 맞춰 가상 데이터를 생성, 조회, 수정, 삭제할 수 있어 API 연동 테스트에 매우 유용합니다.

---

5. React에서 json-server와 연동하기

React 애플리케이션에서 Axios나 Fetch API를 사용해 json-server의 데이터를 가져오고 관리할 수 있습니다.

예제: React에서 Axios를 사용하여 json-server와 통신하기

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function UserList() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    axios.get('http://localhost:5000/users') // json-server의 엔드포인트
      .then((response) => {
        setUsers(response.data); // 응답 데이터로 상태 업데이트
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
      });
  }, []);

  return (
    <div>
      <h1>User List</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name} - Age: {user.age}</li>
        ))}
      </ul>
    </div>
  );
}

export default UserList;

설명

• useEffect: 컴포넌트가 마운트될 때 한 번 실행됩니다. axios.get으로 json-server의 /users 엔드포인트에 요청을 보내 사용자 목록을 받아옵니다.
• setUsers(response.data): 응답 데이터를 users 상태에 저장하여, 화면에 목록으로 출력합니다.

---

6. POST, PUT, DELETE 요청 처리

json-server는 RESTful API 규칙을 따르기 때문에, POST, PUT, DELETE 요청도 React에서 쉽게 구현할 수 있습니다.

예제: 새 사용자 추가하기

function addUser() {
  axios.post('http://localhost:5000/users', {
    name: 'Eve',
    age: 22
  })
  .then((response) => {
    console.log('User added:', response.data);
    // 데이터 다시 불러오기
  })
  .catch((error) => {
    console.error('Error adding user:', error);
  });
}

이 코드는 /users 엔드포인트에 새 사용자 데이터를 POST 요청으로 보내고, 추가 완료 시 데이터를 다시 불러오거나 화면을 업데이트할 수 있습니다.

---

7. REST API와 json-server를 활용한 개발의 장점

1. 빠른 개발 환경 구축: json-server를 사용하면 백엔드 없이도 즉시 가상 서버를 설정할 수 있습니다.
2. API 통합 테스트: 실제 서버와 연동하기 전에, API 요청을 통해 React 컴포넌트가 정상적으로 동작하는지 테스트할 수 있습니다.
3. 일관된 RESTful 인터페이스: json-server는 REST API 표준을 따르기 때문에, 실제 백엔드 서버와 유사한 요청/응답 구조로 실제 서버 교체 시에도 코드 수정이 최소화됩니다.

---

정리

• REST API는 HTTP 메서드를 활용하여 클라이언트와 서버 간에 데이터를 주고받는 인터페이스입니다.
• json-server는 로컬 환경에서 가상의 REST API 서버를 설정하고 JSON 파일을 데이터베이스처럼 사용할 수 있는 툴입니다.
• React와 연동하여 json-server로부터 데이터를 읽고, 추가하고, 업데이트하며, 삭제하는 작업을 수행할 수 있습니다.

json-server와 REST API를 잘 활용하면 React 애플리케이션에서 백엔드와 데이터 연동을 효율적으로 구현할 수 있어, 개발 초기 단계에서 매우 유용하게 사용됩니다.