단일 페이지 애플리케이션
단일 페이지 애플리케이션(Single-Page Application, SPA)은 하나의 기본 HTML 문서를 로딩한 뒤 JavaScript가 사용자 동작에 따라 화면 내용을 변경하며 여러 기능을 제공하는 웹 애플리케이션 구조다. 모든 탐색마다 새로운 HTML 문서를 내려받는 방식과 달리...
| 분류 | 웹 애플리케이션 아키텍처 |
|---|---|
| 주요 용도 | 페이지를 재로딩하지 않고 화면을 갱신하는 응용 구조 |
| 관련 기술 | World Wide Web, HTML, URL, 웹 브라우저 |
| 참고 자료 | MDN: SPA |
단일 페이지 애플리케이션(Single-Page Application, SPA)은 하나의 기본 HTML 문서를 로딩한 뒤 JavaScript가 사용자 동작에 따라 화면 내용을 변경하며 여러 기능을 제공하는 웹 애플리케이션 구조다. 모든 탐색마다 새로운 HTML 문서를 내려받는 방식과 달리 브라우저의 현재 문서를 유지하고 필요한 데이터를 비동기적으로 가져오는 경우가 많다. 다만 단일 페이지라는 이름이 사용자에게 보이는 화면이나 URL이 하나만 존재한다는 의미는 아니다.
SPA는 초기 로딩에서 스크립트와 스타일, 기본적인 문서 구조를 준비한 뒤 클라이언트 라우터로 내부 화면 전환을 제어할 수 있다. History API를 이용하면 실제 새 문서를 로딩하지 않고 주소와 탐색 기록을 관리할 수 있다. 브라우저의 새로고침이나 직접 링크 접근 시에도 올바른 화면을 표시하려면 서버의 경로 처리와 클라이언트 라우터가 함께 동작해야 한다.
데이터는 Fetch API나 다른 네트워크 통신 수단으로 서버 API에서 가져오고 필요에 따라 화면의 DOM을 수정한다. 대규모 프로젝트에서는 상태 관리와 컴포넌트 시스템, 데이터 캐시 및 오류 경계를 분리하여 애플리케이션을 구성한다. 실시간 정보가 필요하다면 WebSocket이나 Server-Sent Events를 추가할 수도 있다.
SPA는 화면의 일부만 변경하므로 연속적인 사용자 작업 경험을 제공하기 쉽지만 초기 스크립트 크기와 클라이언트 렌더링 비용이 커질 수 있다. 검색 엔진이 문서를 해석하는 과정과 접근성 기술의 화면 변화 감지도 고려해야 한다. 서버 측 렌더링과 정적 사전 렌더링을 결합한 하이브리드 방식은 초기 콘텐츠 표시와 검색 가능성을 개선하는 선택지다.
SPA의 탐색에서는 문서 제목과 초점 위치, 스크롤과 브라우저 뒤로 가기 동작을 적절히 관리해야 한다. 페이지 간 이동처럼 보이더라도 전체 문서가 교체되지 않으므로 보조 기술이 상태 변화를 인지하도록 별도의 처리가 필요할 수 있다. 인증과 권한 검사는 클라이언트 라우팅만으로 보장되지 않으며 모든 민감한 API는 서버에서 접근 제어를 수행해야 한다.[1]