- SPA(Single Page Application)란?
SPA는 'Single Page Application'의 약자로 단일 페이지로 구성된
클라이언트 사이드 렌더링(CSR) 방식을 채택한 웹 애플리케이션을 뜻합니다.
기존 웹 애플리케이션은 요청시마다 서버로부터 리소스와 데이터를 해석하여 화면에 렌더링하는 서버 사이드 렌더링(SSR) 방식을 사용했습니다.
- 서버 사이드 렌더링(SSR)
페이지 로드 시 브라우저가 초기 html/css/javascript파일 다운로드 > 링크 클릭으로 페이지 이동 시 해당 페이지 html/css/javascript파일 다운로드
페이지가 이동할 때마다 위 과정을 반복
렌더링이 빠른 장점이 있지만 페이지를 이동할 때마다 화면 깜박임 (화면이 로드될 때마다 화면이 백지로 변하고 다시 화면이 출력되는 과정)이 있습니다.
웹페이지의 용량이 가벼울 경우에는 문제가 없지만 무거워질 경우에는 화면 깜박임이 길어져 사용자 경험이 나빠질 수 있습니다.
서버 사이드 렌더링(SSR)을 기반으로 렌더링한 방식을 MPA(Multiple Page Application)라고 부릅니다.
- 클라이언트 사이드 렌더링(CSR)
페이지 로드 시 브라우저 웹문서가 가지고있는 모든 정보와 링크페이지의 html/css/javascript파일 다운로드
초기 화면 로드가 느리지만 로드가 되고 나면 사이트 내에서 페이지 이동 시 로드되는 과정이 없어지므로 사용성이 좋아집니다.
예를 들면 우리가 흔히 보는 페이스북, 인스타그램 같은 플랫폼이 있습니다. 이러한 대형 플랫폼들을 보면 화면이 많은 사진과 정보가 있음에도 페이지를 이동할 때 화면 깜박임이 없고 자연스러운 이유가 바로 CSR로 구성되어 있기 때문입니다.
CSR 방식은 보통 링크 이동을 할 때 자바스크립트를 이용해 동적으로 화면을 바꿔주므로, html 문서가 가지고 있는 정보가 적어서 검색엔진들이 검색 시 웹사이트를 분석해서 뿌려주어야 할 때 제대로 걸러지지 못 하게 됩니다.
때문에 SEO(검색엔진최적화)가 좋지 못하다 는 단점도 있습니다.
클라이언트 사이드 렌더링(CSR)을 기반으로 렌더링한 방식을 SPA(Single Page Application)라고 부릅니다.
- SPA(Single Page Application) 구현방식
HTML 파일 하나에서 JS, CSS등 리소스 파일들과 모듈들을 로드해서 페이지 이동 없이
특정영역만 새로 모듈을 호출하고 데이터를 바인딩하는 개념입니다.
SPA를 구현하기 위하여 위 이미지처럼 각 영역을 컴포넌트화 하여 페이지를 구성합니다.
- 대표적인 프레임워크 / 라이브러리
대표적으로 Angular, React, Vue 가 있습니다.
사용자와 만나는 화면단인 Front-end 개발을 목적으로 하는 프레임워크 / 라이브러리이며
SPA 개발을 기반으로 만들어졌습니다.
- Angular
2009년 구글에서 등장한 프레임워크
1.0버전에서는 AngularJS 였으며 2.0버전부터 Angular로 구분되었습니다.
양방향 데이터 바인딩을 지원하며 TypeScript를 기본 언어로 채택하였으며 필요한 요소들을 모두 포함하고있다는 특징이 있습니다.
장점
1. 컴포넌트 단위로 모듈화가 가능하여 수정이 용이
2. 화면 구성에 필요한 다양한 기능을 제공
단점
1. 러닝 커브가 너무 심함
2. 버전 변경이 잦아 업그레이드를 자주 하기에는 리스크가 너무 큼
3. 초기 로딩 속도 이슈
4. CLI 관련 문서가 너무 불친절함
- React
페이스북에서 개발한 UI 컴포넌트 라이브러리
단방향 데이터 바인딩을 지원하며 JSX라는 개념을 사용하여 동작
장점
1. React 공식 문서 가이드와 방대한 커뮤니티를 통해 자료를 통해 쉽게 접하고 배움
2. 컴포넌트로 구성되어있어 재사용성이 좋음
3. SEO호환 가능
4. 다른 프레임워크와 혼용 가능
5. 프론트엔드와 백엔드의 확실한 분리로 협업이 용이
6. 가상DOM(VitualDOM)을 사용하여 대규모 애플리케이션에서도 높은 성능 유지
단점
1. 상태관리 복잡도
2. View만 관리하기 때문에 그 외 데이터 모델링은 직접 구현하거나
라이브러리를 사용해야 함
3. 낯선 JSX 사용
- Vue
사용자 인터페이스 개발을 위한 프레임워크
양방향 데이터 바인딩을 지원하며 가상DOM(VitualDOM)을 지원하여
간결한 코드와 고성능 애플리케이션을 구현할 수 있다.
장점
1. 직관적이고 낮은 러닝커브
2. 컴포넌트로 구성되어있어 재사용성이 좋음
3. Angular의 장점(Data Binding)과 React의 장점(Virtual DOM)을 제공
단점
1. 다른 종류의 프레임워크에 비해 플러그인이나 구성요소가 제한적
2. 1명의 개발자에 의해 제작되었기 때문에 업데이트 주기가 일정하지 못함
- 결론
SPA
로딩속도, 코드 재사용성, 개발속도, 모바일 최적화 부분에 적합
사용자 경험(UX) 향상이 중요한 웹사이트 개발
MPA
SEO 최적화, 자바스크립트의 영향에서 적합
네이버, 구글 같은 검색 사이트에 노출되는 것이 중요한 웹사이트 개발
