웹 개발에서 '서버'의 개념과 활용
개인 프로젝트를 진행해야 하는데, 갑자기 JSON 서버가 등장하면서 혼란에 빠졌다. 알고 나면 그렇게 어렵지 않은 개념인데도, 늘 개념을 받아들이는 태도가 너무 시리어스하다,,;;
서버(Server)란?
✔ 사용자의 브라우저로부터 요청을 받고 응답을 보내는 컴퓨터
✔ 사용자의 데이터를 저장하고 관리하는 역할
✔ REST API를 통해 데이터를 주고받음
📌 서버의 역할
✔ 데이터 저장 → 데이터베이스에 사용자 정보, 게시글, 댓글 등 컨텐츠 저장
✔ 클라이언트 요청 처리 → 프론트엔드에서 요청을 보내면 서버(백엔드)에서 응답
✔ 보안 관리 → 사용자의 비밀번호 암호화, 인증(로그인) 처리
JSON Server와 로컬 스토리지의 상호작용
✔ JSON Server에서 데이터를 가져와 로컬 스토리지에 저장
1️⃣ 프론트엔드에서 JSON Server에 요청하여 데이터를 가져옴
2️⃣ 가져온 데이터를 로컬 스토리지에 저장하여 빠르게 접근 가능
3️⃣ 사용자가 새로고침해도 로컬 스토리지에서 데이터 유지됨
// axios 로 데이터 패치
import axios from "axios";
// 엔드포인트
const API_URL = "http://localhost:5000/testResults";
// 테스트 결과 가져오기
export const getTestResults = async () => {
try {
const response = await axios.get(API_URL);
return response.data;
} catch (error) {
console.error("테스트 결과 불러오기 오류:", error);
throw error;
}
};
프로젝트에서의 예시를 들자면, 위처럼 api 폴더 안에 공통으로 API를 요청하는 함수를 만들어 여러 곳에서 재사용을 하는 로직을 짰다.
import { getTestResults } from "./api";
const fetchData = async () => {
try {
const testResults = await getTestResults();
// 로컬스토리지에 데이터 저장
localStorage.setItem("testResults", JSON.stringify(testResults));
console.log("데이터 저장 완료:", testResults);
} catch (error) {
console.error("데이터 가져오기 실패:", error);
}
};
fetchData();
이렇게 JSON 서버에서 데이터를 받아와서 로컬 스토리지에 저장하면, 이후에는 로컬 스토리지에서 데이터를 불러와서 사용할 수 있다. 이 부분은 사용자의 토큰이 만료되거나 login 정보를 유지해야 하는 때에 유용하다.
그리고 사용자가 입력한 데이터는 JSON Server에 저장하면, 같은 서버에 요청하면 누구나 사용 가능한 데이터베이스 서버 시스템이 구축된다.
✔ 로컬 스토리지에서 데이터를 JSON Server로 전송
사용자가 폼을 입력하면 데이터를 JSON Server 에 저장하고, 다른 사용자가 이후에 GET /testResults 요청을 하면 이 데이터를 볼 수 있다.
import axios from "axios";
const saveTestResult = async (testData) => {
try {
const response = await axios.post("http://localhost:5000/testResults", testData, {
headers: { "Content-Type": "application/json" },
});
console.log("서버에 저장 완료:", response.data);
} catch (error) {
console.error("저장 실패:", error);
}
};
// 사용 예시
const testResult = {
userId: "abc123",
mbtiType: "ENTP",
description: "토론을 즐기는 혁신적인 사상가입니다.",
};
saveTestResult(testResult);📌 웹 개발에서 서버의 역할 → 데이터 저장, 요청 처리, 보안 관리
다음 프로젝트에 앞서 슈퍼베이스 사용에 필요한 데이터베이스 관련 공부도 시작해야겠다!
