SPA(Single Page Application) 란?
- 단일 페이지로 구성된 웹 애플리케이션을 의미
- 현재 웹개발 트랜드
- 브라우저에 최초에 한번 페이지 전체를 로드하고, 이후부터는 특정 부분만 Ajax를 통해 데이터를 바인딩하는 방식
- 렌더링의 역할을 서버에게 넘기지 않고 브러우저에서 처리하는 방식
- 전체 페이지를 새로 로드하지 않고도 필요한 부분만 업데이트
SPA 라이프사이클
-
초기화(Initialization)
SPA가 로드되면 초기화 단계가 시작됩니다. 이 단계에서는 애플리케이션을 초기화하고, 필요한 모듈을 로드하고, 초기 데이터를 가져옵니다. -
라우팅(Routing)
사용자가 페이지를 요청하면 라우팅 단계가 시작됩니다. 이 단계에서는 URL의 경로를 분석하고, 애플리케이션의 상태를 변경합니다. 라우터는 URL 경로와 상태를 연결하여 화면을 변경합니다. -
렌더링(Rendering)
라우터가 상태를 변경하면, 렌더링 단계가 시작됩니다. 이 단계에서는 변경된 상태를 기반으로 화면을 업데이트합니다. 이 때, React와 같은 라이브러리를 사용하는 경우, 가상 DOM을 사용하여 렌더링 성능을 최적화합니다. -
이벤트 처리(Event Handling)
사용자의 입력에 따라 애플리케이션의 상태를 변경할 필요가 있을 때, 이벤트 처리 단계가 시작됩니다. 이 단계에서는 사용자의 입력을 처리하고, 상태를 변경합니다. -
API 요청(API Request)
SPA에서는 브라우저에서 서버로 API 요청을 보내는 경우가 많습니다. 이 단계에서는 API 요청을 보내고, 응답을 받아서 상태를 변경합니다. -
소멸(Destruction)
SPA가 종료되면, 소멸 단계가 시작됩니다. 이 단계에서는 리소스를 정리하고, 메모리를 해제합니다.
SPA에서는 이러한 라이프사이클을 반복적으로 실행하면서, 화면을 업데이트하고 사용자와 상호작용합니다.
SPA 장단점
장점
-
빠른 속도
SPA는 초기에 페이지를 로드할 때 필요한 모든 리소스를 한 번에 다운로드하므로, 이후에는 페이지를 로드할 때마다 서버에서 새로운 HTML을 전달 받을 필요가 없습니다. 이를 통해 빠른 속도를 제공할 수 있습니다. -
좋은 사용자 경험
SPA는 페이지 전환시 화면 깜빡임이 없어 좋은 사용자 경험을 제공할 수 있습니다.
유지보수성이 높음: SPA는 코드의 모듈화가 잘 되어 있으며, 코드의 재사용성이 높아 유지보수성이 높습니다.
단점
-
검색 엔진 최적화(SEO) 문제
SPA는 페이지를 동적으로 업데이트하기 때문에, 검색 엔진이 이를 인식하지 못할 수 있습니다. 이를 해결하기 위해 SSR(Server-Side Rendering)이나 프리렌더링(pre-rendering) 기술 등을 사용할 수 있지만, 이는 추가적인 구현 비용이 발생할 수 있습니다. -
초기 로딩 속도
SPA는 초기에 필요한 리소스를 모두 다운로드하기 때문에, 초기 로딩 속도가 느릴 수 있습니다. 이를 해결하기 위해 코드 스플리팅(code splitting)이나 레이지 로딩(lazy loading) 등의 기술을 사용할 수 있습니다.
SPA를 위한 프레임워크
일반적으로 SPA를 구현할 때 사용되는 프레임워크는 여러가지가 있습니다.
-
Angular.js
-
구글에서 개발한 SPA 프레임워크로, 양방향 데이터 바인딩, 의존성 주입, 템플릿, 라우팅 등 다양한 기능을 제공합니다.
ex) Youtube
-
-
React.js
-
가장 인기 있는 SPA 프레임워크 중 하나입니다. React는 가상 DOM 기반의 컴포넌트 시스템을 사용해 UI를 빠르게 렌더링합니다. 또한, React는 리액트 라우터와 같은 다양한 라이브러리와 함께 사용할 수 있어 개발 생산성이 높아지는 장점이 있습니다.
ex) 페이스북, 에어비앤비, 인스타그램
-
-
Ember.js
-
SPA를 개발하기 위한 다양한 기능들을 포함한 풀 스택 프레임워크입니다. Ember.js는 기본적으로 채택한 아키텍처를 따라 개발해야 하기 때문에 학습 곡선이 다소 높을 수 있습니다.
ex) 넷플릭스, 애플뮤직, 링크드인
-
-
Backbone.js
-
MVC 패턴을 기반으로 한 SPA 프레임워크입니다. 다른 프레임워크에 비해 더 가벼우며, 기능이 적은 SPA에서 사용하기 좋습니다.
ex) Airbnb, SoundCloud
-
-
Vue.js
-
가벼운 SPA 프레임워크로, React와 Angular의 장점을 합쳐놓은 듯한 특징을 가지고 있습니다. 또한, 가상 DOM을 사용하는 것이 아니라 실제 DOM을 사용하기 때문에 상대적으로 빠른 렌더링 속도를 보입니다.
ex) GitLab, Alibaba
-
SPA와 MPA의 차이
MPA(Multi-Page Application) 란?
여러 개의 페이지로 구성된 어플리케이션을 말합니다.
기존에 사용되던 웹사이트의 구조로, 각 페이지는 서버에서 새로운 HTML 파일을 받아와 렌더링합니다.
이 방식은 각각의 페이지가 서로 독립적으로 작동하기 때문에,
브라우저의 새로고침 없이 페이지 이동이 가능하고 검색 엔진 최적화(SEO)에도 유리합니다.
하지만, 페이지 이동마다 서버에서 새로운 HTML 파일을 받아와야 하기 때문에
초기 로딩 속도가 느리고 서버 자원을 많이 사용합니다.
| 항목 | MPA | SPA |
|---|---|---|
| 페이지 로드 방식 | 새로운 페이지를 로드 | 페이지 전환 없이 동적으로 데이터를 갱신 |
| 초기 구동 속도 | 페이지 로드 시간 지연 가능성 있음 | 초기 로딩 속도 빠름 |
| 서버 요청 횟수 | 많음 | 적음 |
| 검색 엔진 최적화 | 용이하지 않음 | 용이함 |
| 개발 속도 및 유지보수 | 상대적으로 느리고 복잡함 | 빠르고 단순함 |
| 적용 가능 분야 | 대규모 웹 어플리케이션,커머스 사이트 등 | 작은 규모의 어플리케이션, 웹 포트폴리오 등 |
