json-server 사용하기

json-server란?

json-server는 간단한 API 서버를 빠르게 만들 수 있는 도구이며 JSON 파일을 RESTful API로 변환해줌

프론트엔드 개발 시 데이터를 처리하거나 간단한 백엔드 기능을 구현할 때 유용함

 

 

설치 및 설정

 

프로젝트에 json-server 설치

npm install json-server 

yarn add json-server

 

 

프로젝트 루트에 db.json 파일을 생성하고, 해당 파일에 초기 데이터를 작성

{
  "users": [
    { "id": 1, "name": "Alice" },
    { "id": 2, "name": "Bob" }
  ]
}

 

 

서버 실행하기

npx json-server db.json --port 3000

yarn json-server db.json --port 3000

 

 

API 호출

 

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

const Users = () => {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch('http://localhost:5000/users')
      .then((response) => response.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <div>
      <h1>사용자 목록</h1>
      <ul>
        {users.map((user) => (
          <li key={user.id}>{user.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default Users;

 

 

fetch 또는 axios를 사용하여 API를 호출하여 사용!!

axios 설치 => npm install axios 또는 yarn add axios

 

 

POST, PUT, DELETE 요청

json-server는 GET뿐만 아니라 POST, PUT, DELETE 요청도 가능함

React에서 데이터를 추가하거나 수정하려면  똑같이 fetch나 axios로 요청을 보내면 됨!!

 

 

POST 요청을 통해 데이터를 추가하는 방법

const addUser = async (name) => {
  await fetch('http://localhost:5000/users', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ name })
  });
};