SPA(Single Page Application)

SPA란 Single Page Application의 약자로, 사용자가 웹 애플리케이션을 이용할 때 페이지 전체를 새로 로드하지 않고 필요한 데이터나 UI만 동적으로 변경하는 웹 애플리케이션입니다.

💡 특징

1. 단일 HTML 페이지
   • 최초 로드 시 하나의 HTML 페이지 (index.html)를 서버에서 받아오고 이후부터는 필요 데이터만 비동기로 요청
2. 빠른 화면 전환
   • 페이지 전환 속도가 빠름(전체 리로드가 없으므로).
3. 클라이언트 사이드 라우팅
   • URL이 바뀌어도 전체 페이지가 새로고침되지 않으며, 필요한 컴포넌트만 동적으로 렌더링
4. API 중심 구조
   • 서버는 주로 JSON 데이터를 RESTful API나 GraphQL로 제공

🖥 동작 방식

1. 초기 로드
   • 사용자가 웹 앱에 처음 접속하면 index.html, JavaScript 번들, CSS 파일을 다운로드
2. 페이지 이동
   • 사용자가 링크를 클릭하면 브라우저는 전체 페이지 리로드 대신 필요한 데이터나 컴포넌트를 업데이트
3. 비동기 데이터 로드
   • 서버로부터 필요한 데이터만 AJAX 요청으로 받아서 화면을 업데이트

📚 장점

1. 빠른 사용자 경험
   • 페이지 리로드가 없으므로 사용자 경험(UX)이 향상
2. 네트워크 효율성
   • 필요한 데이터만 요청하기 때문에 네트워크 트래픽이 감소
3. 모바일 앱과 유사한 인터페이스
   • 자연스러운 화면 전환과 빠른 응답 속도를 제공해 모바일 앱과 유사함

⚠️ 단점

1. 초기 로딩 시간 증가
   • 초기 로딩 시 모든 스크립트를 다운로드해야 하므로 로딩 시간이 길어짐
2. SEO(검색 엔진 최적화) 문제
   • 클라이언트 렌더링 방식으로 인해 검색 엔진 크롤러가 콘텐츠를 제대로 인식어려움
   (해결: 서버 사이드 렌더링(SSR) 또는 프리렌더링 도입)
3. 브라우저 메모리 사용
   • 클라이언트가 모든 페이지 상태를 관리하기 때문에 메모리 부담이 증가 

     • 

🛠 주요 SPA 프레임워크

1. React
2. Vue.js
3. Angular

🌐 예시 사이트

• Gmail
• Facebook
• Twitter
• Trello