Web Basic · SPA

SPA 전환이 바꾸는 책임 경계

SPA는 페이지를 새로 받지 않는 기술 자체보다, 라우팅·상태·데이터 로딩 책임이 브라우저 쪽으로 이동한다는 점이 핵심이다.

01

초기 진입

HTML과 JS 번들이 내려오고 앱이 부트스트랩된다.

02

라우트 매칭

URL에 맞는 화면 컴포넌트와 데이터 요구사항을 결정한다.

03

상태 갱신

사용자 입력과 API 응답이 메모리 상태를 바꾸고 화면을 갱신한다.

04

부분 전환

다음 화면은 전체 문서 로드 대신 필요한 코드와 데이터만 가져온다.

장점
빠른 화면 전환 반복되는 레이아웃과 상태를 유지하며 이동
앱형 제품에서 강점
초기 로드
큰 JS 비용 첫 화면 전에 파싱·실행 비용이 발생
코드 분할과 SSR 검토
SEO
콘텐츠 노출 방식 검색·공유 미리보기는 렌더링 전략에 영향
정적·서버 렌더링 조합 가능
복잡도
클라이언트 책임 증가 라우팅, 캐시, 오류, 권한 처리를 브라우저에서 다룸
상태 모델을 초기에 설계

라우트 · 로딩 · 오류 점검

라우트 새로고침과 직접 URL 접근이 같은 화면을 연다.
로딩 데이터 대기 중 빈 화면 대신 명확한 상태를 제공한다.
오류 API 실패와 권한 실패가 화면 단위로 처리된다.
번들 첫 화면에 필요 없는 코드는 지연 로드된다.