웹 개발에서 **SPA(Single Page Application)**는 모던 웹 애플리케이션을 구축하는 대표적인 방식입니다. 기존의 MPA(Multi Page Application)와 비교하여 성능이 개선되고, 사용자 경험이 향상되는 장점이 있습니다.
💡 1. SPA란?
- *SPA(Single Page Application)**는 웹 애플리케이션이 하나의 HTML 페이지에서 실행되는 구조를 의미합니다.
👉 페이지가 새로고침(F5) 없이 동작하며, 필요한 데이터만 서버에서 가져와서 화면을 갱신합니다.
👉 전통적인 MPA(Multi Page Application)에서는 페이지를 이동할 때마다 서버에서 새로운 HTML을 받아오지만, SPA는 클라이언트 측(JavaScript)에서 화면을 동적으로 렌더링합니다.
🧐 2. SPA의 동작 방식
✅ 1) 초기 로딩 (첫 페이지 요청)
사용자가 웹사이트에 접속하면, 브라우저는 단 하나의 HTML 파일(index.html)을 다운로드하고, JavaScript와 CSS 등을 로드합니다.
📌 이 과정에서 React, Vue, Angular 같은 JavaScript 프레임워크가 실행되면서 페이지가 초기 렌더링됨.
✅ 2) 클라이언트 사이드 라우팅 (CSR, Client Side Rendering)
페이지 이동이 필요하면, 서버에서 전체 HTML을 다시 요청하는 것이 아니라, JavaScript가 필요한 데이터만 요청하여 기존 화면을 업데이트합니다.
- 사용자가 버튼을 클릭하면 AJAX 또는 Fetch API를 사용하여 필요한 데이터만 받아옴.
- 받은 데이터를 기반으로 화면을 업데이트하여, 새로운 페이지로 이동한 것처럼 보이게 함.
- 화면이 깜빡이지 않고, 빠르게 페이지 전환이 이루어짐.
✅ 3) API 통신을 통한 데이터 갱신
일반적으로 REST API 또는 GraphQL API를 사용하여 백엔드 서버와 통신하며, 필요한 데이터를 가져와 화면을 동적으로 업데이트합니다.
fetch('<https://api.example.com/data>')
.then(response => response.json())
.then(data => console.log(data));
➡️ 서버에서 데이터만 받아오기 때문에, 전체 페이지를 다시 불러오는 것보다 훨씬 빠름.
🌍 3. SPA vs MPA 비교
SPA (Single Page Application) MPA (Multi Page Application)
| 페이지 로드 | 초기 한 번 로드 후, 동적 업데이트 | 요청할 때마다 새로운 HTML 다운로드 |
| 사용자 경험 (UX) | 부드러운 전환, 빠른 속도 | 페이지 깜빡임, 느린 속도 |
| 서버 요청 | JavaScript가 필요한 데이터만 요청 | 전체 HTML 페이지를 매번 요청 |
| SEO(검색 최적화) | 어려움 (SSR 필요) | 용이 |
| 초기 로딩 속도 | 느릴 수 있음 (JS 다운로드 필요) | 빠름 |
💡 한마디로
- SPA는 빠른 페이지 전환, 부드러운 UI, 데이터 요청 최소화가 장점이지만, 초기 로딩 속도가 느리고, SEO 최적화가 어렵다는 단점이 있음.
- 반면, MPA는 SEO에 유리하지만, 페이지 전환 속도가 느리고 UX가 떨어짐.
⚡ 4. SPA의 장점과 단점
✅ SPA의 장점
1️⃣ 빠른 페이지 전환:
- 서버에서 전체 HTML을 다시 요청하지 않고, 필요한 데이터만 받아오기 때문에 속도가 빠름.
- 화면이 부드럽게 전환되어 사용자 경험(UX)이 좋아짐.
2️⃣ 서버 부하 감소:
- API를 통해 필요한 데이터만 주고받으므로 서버 부하가 줄어듦.
- 클라이언트에서 데이터를 캐싱하여 다시 요청할 필요 없이 사용 가능.
3️⃣ 더 나은 사용자 경험(UX):
- 페이지가 새로고침되지 않기 때문에, 앱과 같은 부드러운 인터페이스 제공.
4️⃣ 프론트엔드와 백엔드 분리 가능:
- 프론트엔드와 백엔드를 독립적으로 개발할 수 있어, 개발 효율성이 증가.
- 백엔드는 REST API 또는 GraphQL API만 제공하면 됨.
❌ SPA의 단점
1️⃣ 초기 로딩 속도가 느릴 수 있음
- SPA는 JavaScript 파일이 크기 때문에, 처음 접속할 때 로딩 시간이 길어질 수 있음.
- 해결책: 코드 스플리팅 (Code Splitting) 및 **Lazy Loading(지연 로딩)**을 사용하여 초기 로딩 속도를 줄일 수 있음.
2️⃣ SEO(검색엔진 최적화) 문제
- 검색 엔진 크롤러는 주로 서버에서 제공하는 HTML을 읽는데, SPA는 초기 HTML이 비어있고 JavaScript가 실행되어야 내용이 로드되므로 SEO가 어려움.
- 해결책: SSR(Server Side Rendering) 또는 SSG(Static Site Generation) 적용 (예: Next.js 사용).
3️⃣ 브라우저 히스토리 관리 문제
- 일반적으로 SPA는 기본적으로 페이지가 전환되지 않기 때문에, 브라우저의 뒤로 가기/앞으로 가기 버튼이 제대로 작동하지 않을 수 있음.
- 해결책: react-router-dom 같은 라우팅 라이브러리를 사용하여 History API를 활용하면 해결 가능.
🚀 5. SPA 구현 방법 (React 예제)
SPA를 직접 구현할 때는 React, Vue, Angular 같은 프레임워크/라이브러리를 사용합니다.
✅ React로 간단한 SPA 만들기
1️⃣ React 프로젝트 생성
npx create-react-app my-spa
cd my-spa
npm start
2️⃣ react-router-dom을 설치하여 라우팅 구현
npm install react-router-dom
3️⃣ App.tsx에서 라우팅 설정
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
function Home() {
return <h2>홈 페이지</h2>;
}
function About() {
return <h2>소개 페이지</h2>;
}
function App() {
return (
<Router>
<nav>
<Link to="/">홈</Link> | <Link to="/about">소개</Link>
</nav>
<Routes>
<Route path="/" element={<Home />} />
<Route path="/about" element={<About />} />
</Routes>
</Router>
);
}
export default App;
➡️ 위 코드에서 페이지를 이동해도 전체 HTML을 다시 불러오지 않고, JavaScript가 동적으로 페이지를 갱신합니다.
🎯 6. SPA 정리
개념 설명
| SPA란? | 하나의 HTML 페이지에서 실행되는 웹 애플리케이션 |
| MPA와 차이점 | MPA는 페이지 이동 시 새로운 HTML을 로드하지만, SPA는 필요한 데이터만 받아와서 렌더링 |
| 장점 | 빠른 페이지 전환, 서버 부하 감소, 좋은 사용자 경험 |
| 단점 | 초기 로딩 속도 느림, SEO 최적화 어려움, 브라우저 히스토리 문제 |
| 최적화 방법 | 코드 스플리팅, SSR/SSG 적용 (Next.js 사용), History API 활용 |
💡 결론:
SPA는 빠른 페이지 전환과 좋은 UX를 제공하지만, SEO 문제와 초기 로딩 속도 문제가 있음.
🚀 최적화 기법을 활용하면 문제를 해결할 수 있으며, Next.js 같은 프레임워크를 사용하면 SSR을 적용하여 SEO 문제도 해결 가능!