JSON Server로 나만의 가짜 API 만들기｜프론트엔드 개발자를 위한 실전 백엔드 환경 구축 가이드

🛠 JSON Server로 나만의 가짜 API 만들기｜프론트엔드 개발자를 위한 실전 백엔드 환경 구축 가이드

안녕하세요, 퍼블리셔 노미입니다!
이전 글에서 API가 무엇이고 어떻게 호출하는지에 대해 알아봤다면, 이제 직접 내 PC에서 작동하는 가짜 API 서버를 만들어보고 싶지 않으신가요?

오늘은 프론트엔드 개발자가 가장 쉽게 사용할 수 있는 도구, JSON Server를 활용해 데이터를 자유롭게 추가, 수정, 삭제하며 API를 테스트하는 방법을 기초부터 실전 fetch 연동까지 완전 정복해볼게요!

---

📌 JSON Server란?

JSON Server는 간단한 JSON 파일만 있으면 바로 작동하는 API 서버입니다.
Node.js 기반으로 돌아가며, RESTful API 형태로 가짜 데이터를 주고받을 수 있어요.

✅ 장점

• 설치가 간단
• JSON만 작성하면 자동으로 API 생성
• fetch/axios 등과 실전 테스트 가능
• 프론트엔드 개발자에게 최적

---

🖥 설치 준비 - Node.js 설치

JSON Server는 Node.js 기반이기 때문에 먼저 Node.js가 설치되어 있어야 합니다.

1. Node.js 공식 사이트 접속
2. LTS 버전 설치
3. 터미널에서 node -v로 버전 확인

---

📦 JSON Server 설치하기

npm install -g json-server

• -g 옵션은 전역 설치 (어디서든 실행 가능)
• 설치 완료 후 json-server -v로 확인

---

📁 프로젝트 폴더와 db.json 만들기

아래처럼 폴더를 하나 만들고 그 안에 db.json 파일을 생성해요.

{
  "products": [
    { "id": 1, "name": "노트북", "price": 1200000 },
    { "id": 2, "name": "마우스", "price": 30000 }
  ],
  "users": [
    { "id": 1, "name": "홍길동", "email": "hong@example.com" }
  ]
}

이제 이 JSON이 하나의 데이터베이스처럼 작동합니다!

---

🚀 JSON Server 실행하기

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

• --watch: 실시간 변경 감지
• --port: 원하는 포트 지정 가능 (기본 3000)

🌐 접속 주소 예시

• http://localhost:3001/products → 상품 목록
• http://localhost:3001/users → 사용자 목록

---

📡 fetch로 연동해보기

1. 상품 목록 가져오기

fetch("http://localhost:3001/products")
  .then(res => res.json())
  .then(data => {
    console.log("상품:", data);
  });

2. 상품 추가 (POST)

fetch("http://localhost:3001/products", {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "키보드",
    price: 50000
  })
})
.then(res => res.json())
.then(data => console.log("등록됨:", data));

3. 상품 수정 (PUT)

fetch("http://localhost:3001/products/2", {
  method: "PUT",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify({
    name: "무선 마우스",
    price: 35000
  })
});

4. 상품 삭제 (DELETE)

fetch("http://localhost:3001/products/1", {
  method: "DELETE"
});

---

🧪 실전 UI 연동 예제

<ul id="productList"></ul>

<script>
fetch("http://localhost:3001/products")
  .then(res => res.json())
  .then(data => {
    const list = document.getElementById("productList");
    data.forEach(item => {
      const li = document.createElement("li");
      li.textContent = item.name + " - " + item.price + "원";
      list.appendChild(li);
    });
  });
</script>

---

✅ 활용 팁 & 테스트 도구

• Postman으로 API 테스트
• _sort, _limit, _page 쿼리로 목록 제어
• json-server-auth로 로그인 기능 확장 가능

---

📚 마무리하며

JSON Server는 프론트엔드 개발자가 실제 API와 거의 유사한 환경을 손쉽게 구축할 수 있도록 도와주는 최고의 도구입니다.
오늘 배운 내용대로 db.json을 만들어 직접 데이터를 넣고, 수정하고, fetch로 가져와 보세요.

다음 편에서는 json-server-auth를 활용한 로그인 API 시뮬레이션을 이어서 알려드릴게요!

---

#JSONServer #가짜API #프론트엔드개발 #RESTAPI테스트 #fetch실습 #백엔드없이API #퍼블리셔노미 #웹개발도구 #프론트엔드실전