SPA(Single Page Application)란?

📘 SPA란?

한 마디로 '페이지가 하나처럼 보이는 웹앱'을 말한다. 

 

로그인을 예시로 들면,

🟡 MPA (Multi Page Application) = 전통적인 웹앱 

로그인 클릭 → 서버에서 새로운 HTML 페이지 전체를 응답해서 새로고침

🟡 SPA (Single Page Application)

로그인 클릭 → 기존 페이지 유지한 채, 필요한 데이터만 서버에서 받아와서 화면 일부만 바뀜

 

---

✅SPA 환경에서 백엔드 개발자가 여기서 알아야 할 Point★

SPA는 화면 전환을 브라우저가 직접 하고, 백엔드는 데이터만 제공하는 구조다.
그래서 Spring Boot는 REST API 서버처럼 동작해야 함!

 

💬 예시

React 로그인 화면에서 아이디/비번 입력 → POST /auth/login API로 백엔드에 요청

→ 백엔드는 JSON 응답만 줌 ({ token: "..." })

 

React/Vue/Angular로 만든 프론트는 다 SPA인데, 지금 개인적으로 진행하는 프로젝트가 Spring Boot + React 조합이라 SPA 개념을 다시 복습하고자 한다.

📍 CORS (Cross-Origin Resource Sharing)	프론트 서버(3000) ↔ 백엔드 서버(8080) 서로 다른 도메인이라 요청 막힘 → CORS 설정 필요
📍 REST API	SPA는 HTML이 아니라 JSON만 요청함 → 백엔드는 API만 제공
📍 JWT 인증	SPA에서는 서버가 세션을 들고 있지 않기 때문에 세션 기반 로그인(쿠키+서버 세션) 보다 무상태 인증 방식인 토큰 기반(JWT) 이 적합함 → 클라이언트가 토큰을 저장하고, 요청마다 Authorization 헤더에 붙여서 인증
📍 프론트 빌드 배포	React 빌드된 결과물을 백엔드에서 함께 서빙할 수도 있음 (/static, /public) but, 보통은 프론트+백 분리가 더 일반적