세션 1. SPA의 기본적인 이해
SPA 정의
- 웹페이지가 하나인 어플리케이션으로, 사용자와의 상호작용을 통해 동적으로 내용을 업데이트하는 웹 어플리케이션.
- 페이지 리로드 없이 사용자와 실시간으로 상호작용
SPA의 작동 원리
- 초기 전체 페이지를 로드하며 HTML, CSS, JavaScript를 포함
- 사용자 상호작용에 따라 필요한 데이터를 서버에 요청하고 받은 데이터로 페이지의 특정 부분을 동적으로 업데이트
- 페이지는 새로고침 되지 않고 빠르고 부드러운 사용자 상호작용을 제공
기존 전통적인 MPA
- Multi Page Applications
- 각 페이지가 별도의 HTML 파일로 존재
- 페이지 간 이동 시 전체 페이지를 새로 로드
- 전통적인 웹사이트 구조
- 페이지 리로드에 따른 사용자 경험 중단
SPA와 MPA 비교
MPA
- 각 페이지 별도의 HTML 파일
- 서버 사이드 라우팅
- 각 페이지 로드 시 서버 부하
- SEO 친화적
SPA
- 페이지 전환 없이 동적 콘텐츠 업데이트
- 클라이언트 사이드 라우팅
- 초기 로딩 시간이 길 수 있음
- SEO 최적화에 도전적
SEO: Search Engine Optimization / 검색 엔진 최적화
SPA의 핵심 구성 요소
클라이언트 사이드 라우팅
- 브라우저에서 URL 변경에 따른 뷰 전환 처리
- 페이지 리로드 없는 빠른 사용자 경험 제공
- History API나 React Router, Vue Rputer와 같은 라이브러리로 구현
뷰 렌더링
- 사용자 인터페이스의 동적 업데이트
- 컴포넌트 기반 아키텍쳐
상태 관리
- 어플리케이션 상태의 중앙집중식 관리
- 데이터 흐름의 일관성 유지
데이터 통신
- 서버와 비동기 통신
- 필요한 데이터만 로드하여 효율적인 데이터 관리
SPA의 장점과 한계
SPA의 장점
사용자 경험 개선
- 빠른 페이지 전환
- 원활한 사용자 인터페이스
- 사례: 대화형 웹 에플리케이션 - 대시보드
개발 효율성
- 프론트엔드와 백엔드 분리
- 재사용 가능한 컴포넌트
- 사례: 모듈화된 컴포넌트의 재사용
SPA의 한계
- 초기 로딩시간
최적화 전략:
코드 스플리팅(애플리케이션 분리, 사용자가 필요한 순간에만 해당하는 코드만 로드),
레이지 로딩 (필요한 순간에만 로드) - SEO 최적화 문제
해결 전략:
서버 사이드 렌더링(SSR),
프리렌더링 - 브라우저 호환성 문제
대응 전략:
폴리필(구형 브라우저에서 지원되지 않는 최신 기능을 제공하는 코드 조각),
Babel과 같은 트랜스파일러 사용
SPA 요약
- SPA란 무엇인가요?
답: SPA는 하나의 페이지로 이루어진 웹 애플리케이션이고 사용자와의 상호작용에 따라 필요한 부분만 동적으로 업데이트 합니다. SPA는 전체 페이지를 새로 로드하는 대신에 필요한 데이터만 서버로부터 비동기적으로 가져와서 현재 페이지를 업데이트합니다. 빠른 사용자 경험을 제공하고 서버 부하를 줄이는 데 도움이 됩니다.
- SPA의 주요 장점은 무엇인가요?
답: 빠른 사용자 경험, 개선된 클라이언트 사이드 퍼포먼스, 개발 과정에서의 효율성입니다. 사용자는 페이지 전환 없이 애플리케이션 내에서 원활하게 상호작용할 수 있고 SPA는 필요한 부분만 업데이트하기 때문에 브라우저의 불필요한 리로드가 감소하게 됩니다. 또한 프론트엔드와 백엔드가 분리되어 있기 때문에 개발과 유지 보수가 용이하게 됩니다.
- SPA에서 초기 로딩 시간이 긴 이유는 무엇인가요?
답: 애플리케이션이 시작될 때 필요한 모든 JavaScript와 CSS를 한번에 로드하기 때문입니다. 애플리케이션의 전체 로직과 리소스를 브라우저에서 로드해야 되기 때문에 발생합니다. 이를 해결하기 위해서 코드 스플리팅과 같은 기술 사용해서 필요한 리소스만 초기에 로드하고 나머지는 필요한 때 로드하는 방식으로 최적화할 수 있습니다.
- SPA의 SEO 최적화에 어려움이 있는데 그 이유와 해결법은?
답: SPA가 클라이언트 사이드 렌더링이기 때문입니다. 이로 인해서 검색 엔진 크롤러가 SPA 컨텐츠를 제대로 크롤링하거나 인덱싱하기가 어렵습니디. 검색엔진은 전통적인 정적인 HTML 컨텐츠를 크롤링하는데 SPA의 경우 자바스크립트가 실행된 후에 콘텐츠가 생성되기 때문입니다.
이 문제를 해결하기 위한 방법으로는 서버 사이드 렌더링, 프리렌더링을 사용하는 것이고 서버 사이드 렌더링은 서버에서 초기페이지를 렌더링하고 클라이언트에 보내는 반면에 프리렌더링은 빌드 시간에 정적 HTML 파일을 생성하게 됩니다.
- SPA에서 라우팅은 어떻게 작동하나요?
답: 클라이언트 사이드에서 주로 처리가 됩니다. 전통적인 웹애플리케이션은 사용자가 다른 페이지로 이동할 때마다 서버에 요청을 하고 서버에 요청한 페이지 가 로드가 되서 클라이언트에 로드가 됩니다. 하지만 싱글 페이지 애플리케이션에서는 url의 변경이 발생해도 실제로 새 페이지를 로드하는 대신에 자바스크립트를 사용해서 현재페이지의 내용을 동적으로 변경합니다.
세션 2. SPA 개발 고려사항
SPA 아키텍처 이해
SPA의 기본 구조와 작동 원리
- SPA는 웹 애플리케이션 또는 웹사이트가 단일 HTML 페이지에서 동적으로 업데이트 되어 사용자와의 상호작용을 효율적으로 관리하는 구조
- 사용자가 다른 페이지로 이동할 때 전체 페이지를 새로고침하지 않고 필요한 데이터만 서버에서 가져와서 현재 페이지를 업데이트. 이는 Ajax와 같은 기술을 사용하여 구현됨.
- SPA의 핵심은 효율적인 사용자 경험과 빠른 페이지 로딩시간. 초기 로딩에는 시간이 걸리지만, 그 후의 상호작용은 매우 빠름
클라이언트 사이드 렌더링(CSR)과 서버 사이드 렌더링(SSR)의 차이점
- 클라이언트 사이드 렌더링(CSR)은 브라우저가 서버로부터 데이터를 받아 클라이언트 측에서 HTML을 생성하는 방식. SPA 대부분은 이 방식을 사용.
- 서버 사이드 렌더링(SSR)은 서버에서 모든 HTML을 생성하고 완성된 페이지를 클라이언트에 보내는 방식. 초기 로딩속도가 빠르고 SEO(검색엔진최적화)에 유리하지만, 페이지간 이동 시 전체 페이지를 다시 로드해야함.
- CSR은 사용자 상호작용이 많고 동적인 웹 애플리케이션에 적합, SSR은 콘텐츠 중심의 웹사이트에 적합.
SPA의 라이프 사이클 관리
- 애플리케이션은 초기화, 뷰 렌더링, 이벤트 처리, 데이터 업데이트 등 여러 단계를 거침.
- 상태 관리는 사용자 인터페이스(UI)의 일관성을 유지하고 복잡한 데이터 흐름을 관리하는 데 중요함. FE 프레임워크 (React, Angular, Vue)는 이러한 과정을 용이하게 함
- 라이프 사이클 관리는 애플리케이션의 성능 최적화와 사용자 경험 향상에 중요한 역할을 함. 예를 들어, 불필요한 데이터 로딩을 피하고, 사용자 상호작용에 빠르게 반으하는 등의 방법이 있음
라이프 사이클 단계
- 초기화 단계 (Initialization)
- 뷰 렌더링 단계 (View Rendering)
- 이벤트 처리 단계 (Event Handling)
- 데이터 업데이트 단계 (Data Update)
- 종료 단계 (Termination)