반응형
MPA(Multi-Page Application)란?
페이지가 여러 개로 구성되어 있고, 사용자가 어떤 링크를 클릭하면 브라우저가 서버에 새 HTML 페이지를 요청하고,
전체 페이지를 새로 로드한다. (각 페이지마다 별도의 HTML, CSS, JS 파일이 있음)
[작동 방식 ⚙️]
1) 사용자가 만약 /about을 클릭하면,
2) 브라우저는 서버에 /about 요청을 보내고,
3) 서버는 완전히 새로운 HTML 페이지를 다시 보냄.
4) 기존 페이지는 새로고침되고, 새로운 페이지가 열림.
MPA의 장단점은 뭘까?
| 장점 | 단점 |
| - SEO에 유리 (서버가 완성된 HTML을 보내주기 때문에 크롤링 쉬움) | - 페이지 이동 시 전체 새로고침 => UX 저하 |
| - 간단한 구조 (전통 방식이라 이해하기 쉬움) | - 개발 시 중복 코드가 많아질 수 있음 |
| - 각 페이지가 완전히 분리되어 있으므로 보안상 이점이 있음 | - 클라이언트 측 동적 인터랙션 구현이 복잡 |
SPA(Single Page Application)란?
하나의 HTML 파일로 구성되어 있고, 최초 로딩 시 모든 JS, CSS, HTML을 로드한다.
사용자가 이동하는 페이지는 사실 컴포넌트 단위의 동적 화면 전환으로, 페이지 전환처럼 보이지만 실제로는 전체 페이지 리로드가 없다.
[작동 방식 ⚙️]
1) /about을 클릭하면,
2) 브라우저는 서버에 HTML을 요청하지 않음.
3) 자바스크립트가 내부적으로 URL을 변경하고, 필요한 데이터만 비동기로 불러와서 화면을 동적으로 렌더링
SPA의 장단점은 뭘까?
| 장점 | 단점 |
| - 빠른 사용자 경험 (페이지 전환 시 부드럽고 빠름) | - 초기 로딩 속도가 느릴 수 있음 (전체 JS 파일을 다 받아오기 때문) |
| - 클라이언트에서 다양한 동작을 할 수 있어 앱처럼 사용 가능 | - SEO 불리 (크롤러가 자바스크립트를 제대로 실행하지 못하는 경우가 있음) → SSR or SSG로 해결 |
| - 컴포넌트 재사용성 ↑ → 유지보수 효율 ↑ | - 복잡한 상태 관리 필요 (라우팅, 인증 등 모두 클라이언트 측에서 처리) |
MPA와 SPA 요약 비교 🔍
| 항목 | MPA | SPA |
| 페이지 수 | 여러 개 | 한 개 |
| 새로고침 | 매번 새로고침 | 없음 (동적 렌더링) |
| SEO | 좋음 | 나쁨 (대체 기술 필요) |
| 속도 | 느릴 수 있음 (전환 시) | 빠름 (전환 부드러움) |
| 구현 복잡도 | 낮음 | 상대적으로 높음 |
| 사용 기술 | 전통적인 서버 렌더링 | 프론트엔드 프레임워크 중심 (React 등) |
반응형
'공부 > CS' 카테고리의 다른 글
| [CS] 프론트엔드 성능 최적화 방법 알아보기 🔍 (0) | 2025.04.22 |
|---|---|
| [CS] REST API란? (0) | 2025.04.20 |
| [CS] CSR vs SSR vs SSG (웹 페이지 렌더링 방식 정리 🔍) (0) | 2025.04.16 |
| [CS] 쿠키 vs 세션 vs 로컬 스토리지 (0) | 2025.04.15 |
| [CS] HTTP(Hyper Text Transfer Protocol)란? (0) | 2025.04.14 |