json-server 사용하기

김민석·2025년 4월 16일

json-server

서버가 없을경우 json 파일을 이용해 모의로 RESTful API 서버 및 DB를 구축할 수 있는 도구입니다.

json-server 설치 및 실행

json-server 패키지를 설치합니다.
그리고 모의 API 서버는 프론트엔드 개발 서버와 따로 실행해야 하므로, 동시에 스크립트 실행이 가능한 concurrently 패키지도 함께 설치해 사용해봅시다.

{
  "scripts": {
    "watch:json-server": "json-server db.json --port 3000",
    "watch:vite": "vite",
    "dev": "concurrently npm:watch:*"
  }
}

Vite 프로젝트의 기본 포트는 5173번이고 JSON Server의 기본 포트는 3000번입니다.
--port 플래그를 사용해 JSON Server의 포트를 변경할 수 있습니다.

데이터 가져오기

DB에서 원하는 데이터를 가져오기 위해, 다음과 같이 함수를 작성할 수 있습니다.
쿼리스트링으로 조건을 추가하면, 조건에 맞는 데이터만 필터링해 가져올 수 있습니다.
쿼리스트링을 사용하지 않으면, 해당 컬렉션의 모든 데이터를 가져옵니다.

export const getProducts = async (query = "") => {
  try {
    const res = await axios.get(`${BASE_URL}/?${query}`);  // GET요청
    return res.data;
  } catch (error) {
    console.error("API 요청 실패:", error);
    throw error;
  }
};

데이터 받기

 const fetchProducts = useCallback(async () => {
    try {
      setLoading(true);
      // catagory 가 new인 상품만 가져오기
      const data = await getProducts("category=new&_limit=8");
      setProducts(data);
      setError(null);
    } catch (err) {
      console.error("상품 데이터를 가져오는 중 오류 발생:", err);
      setError(
        err.message ||
          "상품 데이터를 불러올 수 없습니다. 네트워크 연결을 확인해주세요."
      );
    } finally {
      setLoading(false);
    }
  }, []);

조건

getProducts(” 필드_조건=값 ”) : 상품을 가져오는 함수

_lt: Less Than, 미만(<)
_lte: Less Than or Equal, 이하(<=)
_gt: Greater Than, 초과(>)
_gte: Greater Than or Equal, 이상(>=)
_ne: Not Equal, 같지 않음(!=)

ex) getProducts(”price_lt=10000“) : 상품 가격이 10,000원 미만인 상품

범위

_start: 가져올 시작 인덱스를 지정합니다.
_end: 가져올 종료 인덱스를 지정합니다.
_limit: 가져올 개수를 지정합니다.

ex) getProducts(”_limit=2”) : 0번부터 2개

페이지

_page: 가져올 페이지를 지정합니다.
_per_page: 페이지 당 데이터 개수를 지정합니다. 기본값은 10입니다.

ex) getProducts(”_page=2&_per_page=2“) : 한페이지당 2개씩 2번째 페이지

응답 결과를 확인하면, 다음과 같은 페이지 정보가 포함되어 있습니다.

실제 데이터는 data 속성에 포함되어 있습니다.

first: 첫 페이지 번호
prev: 이전 페이지 번호
next: 다음 페이지 번호
last: 마지막 페이지 번호
pages: 전체 페이지 수
items: 전체 아이템 수
data: 응답 데이터

정렬

어떤 필드를 기준으로 정렬할지 지정할 수 있습니다.

기본적으로 오름차순(asc)으로 정렬됩니다.

만약 가져오는 데이터를 내림차순(desc)으로 정렬하고 싶다면, 필드 앞에 - 기호를 붙이면 됩니다.

_sort: 정렬할 필드를 지정합니다.

ex) getProducts(”_sort=-price“) : 가격 낮은 순으로 정렬

ex) getProducts(”_sort=-price,id“) : 가격이 같은 데이터는 id 순으로 오름차순

데이터 추가하기

import axios from 'axios';

export async function createUser(user) {
  try {
    const res = await axios.post('http://localhost:3000/users', user);
    return res.data;
  } catch (error) {
    console.error('유저 생성 실패:', error);
    throw error;
  }
}