SPA 최종 수정일 2026-06-18 19:59 조회수 6
홈 대시보드

SPA

#it#웹개발#프론트엔드#react#vue#spa#javascript

기본 정보

  • 명칭: SPA
  • 영문명: Single Page Application
  • 한글명: 단일 페이지 애플리케이션
  • 분류: 웹 애플리케이션 아키텍처
  • 주요 용도: 빠른 사용자 경험 제공
  • 관련 주제: #SPA #React #Vue #JavaScript #프론트엔드

개요

SPA(Single Page Application)는 최초 한 번만 웹페이지를 로드한 뒤, 이후에는 필요한 데이터만 서버와 통신하여 화면을 동적으로 변경하는 웹 애플리케이션 방식이다.

기존 웹사이트처럼 페이지 전체를 새로고침하지 않고 필요한 부분만 변경하기 때문에 앱과 같은 자연스러운 사용자 경험을 제공할 수 있다.

React, Vue.js, Angular 등 대부분의 현대 프론트엔드 프레임워크가 SPA 방식을 기반으로 동작한다.

SPA 구조

사용자

↓

브라우저

↓

SPA(App)

↓

REST API

↓

백엔드 서버

↓

Database

↓

JSON

↓

화면 갱신

동작 방식

최초 접속

↓

HTML + CSS + JavaScript 다운로드

↓

SPA 실행

↓

사용자 클릭

↓

API 요청

↓

JSON 응답

↓

화면 일부 업데이트

페이지 전체를 다시 불러오지 않는다.

기존 웹과 비교

MPA(Multi Page Application)

페이지 이동

↓

서버 요청

↓

새 HTML 생성

↓

브라우저 렌더링

SPA

페이지 이동

↓

JavaScript 실행

↓

API 호출

↓

화면 일부 변경

주요 특징

  • 페이지 새로고침 최소화
  • 빠른 화면 전환
  • 앱과 유사한 사용자 경험
  • API 중심 구조
  • 프론트엔드와 백엔드 분리
  • 컴포넌트 재사용 가능

대표 기술

API 통신

SPA는 대부분 REST API를 이용한다.

GET /api/users

응답

{
  "name": "구름",
  "age": 30
}

라우팅

SPA는 JavaScript가 화면 이동을 처리한다.

예시

/home

/user

/admin

/product

실제로는 페이지 이동 없이 화면만 변경된다.

React Router

<Route

path="/user"

element={<User />}

/>

Vue Router

createRouter({

routes:[]

})

상태 관리

SPA에서는 화면 간 데이터를 공유하기 위해 상태 관리 라이브러리를 사용한다.

대표 기술

  • Redux
  • Zustand
  • Context API
  • Pinia
  • Vuex

장점

  • 빠른 화면 전환
  • 사용자 경험 향상
  • 서버 부하 감소
  • 프론트엔드와 백엔드 분리
  • 컴포넌트 재사용 가능
  • 모바일 앱과 유사한 느낌 제공

단점

  • 초기 로딩 속도가 느릴 수 있음
  • SEO 대응이 어려울 수 있음
  • JavaScript 의존도가 높음
  • 번들 크기가 커질 수 있음

SEO 문제

SPA는 JavaScript 실행 후 화면이 생성되므로 검색 엔진 최적화(SEO)에 불리할 수 있다.

이를 해결하기 위해 SSR(Server Side Rendering) 또는 SSG(Static Site Generation)를 사용하는 경우가 많다.

대표 기술

SSR과 비교

SPASSR
클라이언트 렌더링서버 렌더링
초기 로딩 다소 느림초기 로딩 빠름
화면 전환 빠름페이지 요청 필요
SEO 약함SEO 강함
React, VueNext.js, Nuxt

SPA 폴더 구조 예시

src/

├── components/

├── pages/

├── router/

├── stores/

├── hooks/

├── services/

├── assets/

└── App

주요 활용 분야

  • 관리자 페이지
  • ERP
  • CRM
  • SaaS
  • 쇼핑몰
  • 대시보드
  • 커뮤니티
  • 프로젝트 관리 시스템

실무 메모

실무에서는 다음과 같은 방식이 권장된다.

  • 컴포넌트 단위 개발
  • API 중심 구조
  • TypeScript 적용
  • Lazy Loading 적용
  • Code Splitting 적용
  • 상태 관리 라이브러리 활용
  • Axios 또는 Fetch 사용
  • JWT 인증 적용
  • 환경 변수 분리
  • 에러 처리 공통화

SPA와 함께 사용하는 기술

대표 개발 도구

  • Visual Studio Code
  • Chrome DevTools
  • Vite
  • npm
  • pnpm
  • Postman

관련 문서

출처

  • MDN Web Docs
  • web.dev
  • React 및 Vue 공식 문서

백링크

JSXAJAXManifestVue.jsService WorkerReactPWANext.jsFetch APIJWT