[GPT가 알려주는] SPA (Single Page Application)란?

좋아, 아주 중요한 개념 질문이야!
정리해서 설명해줄게 😊

 

✅ SPA란? (Single Page Application)

**SPA (Single Page Application)**는 한 개의 HTML 페이지로 구성된 웹 애플리케이션이야.
화면 전환이 있을 때 페이지 전체를 다시 로드하지 않고, JavaScript가 필요한 부분만 바꿔주는 방식이지.

 

🧠 핵심 특징

항목 설명

📄 페이지 로딩	최초에 한 번 HTML + JS 로딩 후, 그 뒤로는 페이지 리로딩 없이 작동
🔁 라우팅	주소(URL)는 바뀌지만, 전체 페이지는 다시 로드되지 않음 (JS로 처리됨)
⚡️ 성능	빠른 사용자 경험 (페이지 전환이 부드러움)
📦 데이터 통신	서버와는 Ajax/fetch 등으로 JSON 데이터를 주고받음
❌ 새로고침	일반적인 페이지 이동처럼 새로고침이 발생하지 않음

 

✅ React / Vue는 SPA 프레임워크?

**맞아! 둘 다 SPA 개발을 위한 대표적인 프레임워크(또는 라이브러리)**야.

프레임워크 SPA 지원 여부 설명

React	✅ 가능 (기본 구조)	Facebook이 만든 JS 라이브러리. Virtual DOM 기반.
Vue.js	✅ 가능 (기본 구조)	쉽고 가벼운 SPA 프레임워크.
Angular	✅ 가능	Google이 만든 완전한 SPA 프레임워크.
Next.js, Nuxt.js	SPA + SSR 지원	React/Vue 기반 프레임워크로, SSR도 함께 사용 가능

 

⛔️ 반대 개념: MPA (Multi Page Application)

예시:

• 전통적인 JSP, PHP, Django 템플릿 기반 웹사이트
• 게시판, 쇼핑몰 등 HTML 페이지를 매번 새로 로딩함

항목 SPA MPA

페이지 구조	단일 HTML 페이지	여러 HTML 페이지
전환 방식	JS로 DOM 조작	서버에서 새로운 페이지 전체 전달
속도	빠름 (초기 로딩만 길 수 있음)	매번 전체 페이지 새로고침
프레임워크	React, Vue, Angular 등	Django, PHP, Spring JSP 등

 

 

✅ 요약

질문 대답

SPA가 뭐야?	한 번만 페이지를 로드하고, 이후엔 JS로 화면만 바꾸는 앱
React/Vue가 SPA야?	✔️ 맞아. SPA 구조로 동작하도록 만들어진 JS 프레임워크야
장점은?	빠른 전환, 부드러운 UX, 앱 같은 느낌
단점은?	SEO(검색엔진최적화)에 불리할 수 있음 (하지만 보완 가능)

 

필요하다면 SPA 구조로 프로젝트를 구성하는 법, 또는 MPA에서 SPA로 전환하는 방법도 알려줄게! 😎