웹 개발에서 서버의 개념을 정리해보자

JSON 서버가 뭐야,,,

📌 1. JSON Server란?

✔ JSON 파일을 기반으로 가상의 REST API를 생성해주는 툴
✔ 백엔드 없이도 API 요청을 처리할 수 있도록 만들어줌
✔ GET, POST, PUT, DELETE 등 HTTP 요청을 처리 가능
✔ 실제 데이터베이스(DB)는 없지만, JSON 파일을 DB처럼 사용
✔ 프론트엔드에서 데이터를 저장하고 불러오는 연습을 할 때 유용

---

JSON Server 실행하기

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

각 서버가 정상적으로 실행되었는지 확인하려면

1. Vite 확인:
   브라우저에서 http://localhost:5173 (기본 Vite 포트)로 접속

2. JSON Server 확인:
   브라우저에서 http://localhost:5000로 접속하면 db.json의 내용이 보임

---

✔ Vite와 JSON Server가 따로 실행되므로 필요할 때만 각각 실행 가능
✔ JSON Server를 끄거나 다시 실행할 때 프론트엔드 서버에 영향 없음
✔ 패키지 설치 없이 간단하게 관리 가능

---

// JSON Server 실행 시 terminal

yarn json-server --watch db.json --port 5000
yarn run v1.22.22
$ json-server --watch db.json --port 5000 --watch db.json --port 5000
--watch/-w can be omitted, JSON Server 1+ watches for file changes by default
JSON Server started on PORT :5000
Press CTRL-C to stop
Watching db.json...

(˶ᵔ ᵕ ᵔ˶)

Index:
http://localhost:5000/

Static files:
Serving ./public directory if it exists

Endpoints:
http://localhost:5000/testResults

📌 Endpoint란?

✔ Endpoint = 프론트엔드와 백엔드간에 데이터를 주고받기 위해 정해진 API 주소 (URL 경로)
✔ JSON Server가 db.json을 기반으로 자동으로 REST API를 생성
✔ 프론트엔드에서 fetch/axios로 요청을 보내 데이터를 받을 수 있음

Endpoints:
http://localhost:5000/testResults

=> JSON Server가 db.json의 데이터를 API 형식으로 제공하고 있으며, http://localhost:5000/testResults 주소로 요청을 보내면 testResults 데이터를 받을 수 있다는 뜻이다.

즉, 프론트엔드에서 이 URL을 사용하면 백엔드 없이도 REST API처럼 데이터를 요청하고 받을 수 있다.

---

✅ Endpoint를 확인하는 방법

1. 브라우저에서 확인
   👉 http://localhost:5000/testResults 를 입력하면 db.json 내부의 testResults 데이터가 JSON 형식으로 보인다.

2. 프론트엔드에서 fetch 요청

fetch("http://localhost:5000/testResults")
  .then(response => response.json())
  .then(data => console.log(data));

실행하면 console.log(data)에서 testResults의 JSON 데이터가 출력된다.

---

로컬 스토리지(LocalStorage)가 뭐야,,,

로컬 스토리지는 브라우저 내부에 데이터를 저장하는 공간이다.

✔ 브라우저 내부에만 저장되기 때문에 서버와는 상관 없음
✔ 사용자가 브라우저를 닫아도 데이터가 유지됨
✔ JSON Server와 달리 HTTP 요청이 필요 없음

// 데이터 저장 (객체 -> 문자열)
localStorage.setItem("userData", JSON.stringify({ userId: "abc123", nickname: "John" }));

// 데이터 불러오기 (문자열 -> 객체 혹은 배열)
const userData = JSON.parse(localStorage.getItem("userData"));
console.log(userData);

---

📌 JSON Server vs Local Storage

구분	JSON Server	로컬 스토리지 (LocalStorage)
저장 위치	서버 (db.json 파일에 저장)	사용자의 브라우저 내부 (localStorage)
데이터 유지	서버가 유지되는 한 지속	브라우저에 저장되지만, 사용자가 삭제 가능
접근성	같은 서버에 요청하면 누구나 사용 가능	각 사용자의 로컬 브라우저에서만 사용 가능
API 요청	fetch, axios로 HTTP 요청	필요 없음
데이터 동기화	여러 사용자가 동일한 데이터에 접근 가능	각 사용자의 로컬 브라우저마다 별도의 데이터