"SPA"는 Single Page Application의 약자로, 웹 개발에서 사용되는 하나의 애플리케이션 구조입니다.

사용자가 웹사이트를 탐색할 때 전체 페이지를 새로고침하지 않고 필요한 부분만 동적으로 로드하여 더 빠르고 부드러운 사용자 경험을 제공합니다.

SPA의 핵심 개념

초기 한 번의 페이지 로딩: 최초 접근 시 전체 HTML, CSS, JavaScript를 불러옵니다.

동적 콘텐츠 변경: 페이지 간 이동 시 서버에서 전체 페이지를 다시 받는 것이 아니라, 필요한 데이터만 받아와 JavaScript로 화면을 변경합니다.

브라우저의 히스토리 API 사용: 주소(URL)은 바뀌지만 페이지는 새로고침되지 않으며, 뒤로 가기/앞으로 가기 기능도 지원됩니다.

전통적인 웹사이트(MPA)와의 차이

SPA에 자주 쓰이는 기술

React.js

Vue.js

Angular

Svelte

장점

앱처럼 빠르고 자연스러운 사용자 경험

데이터만 요청하므로 트래픽 감소

백엔드와 프론트엔드가 명확히 분리됨

단점

초기 로딩이 무거울 수 있음

SEO(검색엔진최적화)가 어렵고 별도 처리 필요

브라우저의 자바스크립트 의존도 높음