pgg-dev
SPA (Single Page Application) 본문
SPA 란?
SPA는 단일 HTML 페이지를 사용하는 단일 페이지 어플리케이션으로, 현재 웹 개발의 트렌드이다.
동적 업데이트를 제공하여 페이지를 새로 고치지 않고 상호 작용할 수 있다.
전통적인 웹어플리케이션 구조는 여러 페이지로 구성되어있다.MPA (Multiple Page Applications)
클라이언트가 요청할 때마다 페이지가 새로고침 되고, 페이지를 로딩할 때마다 서버로부터 리소스를 전달받아 해석후 렌더링을 한다.
요즘은 웹에서 제공되는 정보가 많기 때문에 속도적인 측면에서 문제가 있다.
SPA 형태는 브라우저에 최초 한번 페이지 전체를 로드하기 때문에 속도를 향상할 수 있다.
전체 페이지가 로드된 상태에서 특정 부분만 AJAX를 통해 데이터를 바인딩하는 방식으로, JSON 데이터를 사용하여 페이지를 다시 로드하지 않고 동적으로 업데이트한다.
SPA 장점
- SPA는 원하는 컨텐츠만 업데이트하므로 로딩 시간이 향상된다. HTML, CSS, JavaScript 는 처음에 한 번만 로드된다.
- 개발자가 웹과 네이티브 모바일 앱의 동일한 백엔드 코드를 재사용할 수 있기 때문에 쉽게 적용할 수 있다.
- SPA는 로컬 데이터를 캐시 할 수 있다. 어플리케이션은 하나의 요청을 웹 서버에 보내고 그 후에 모든 데이터를 저장한다.
- 빠른 반응성, 화면 전환 및 애니메이션 효과와 함께 시차 스크롤을 사용하여 사용자 친화적인 UX 를 지원한다.
SPA 단점
- SPA는 클라이언트의 요청에 따라 데이터를 JavaScript로 로드하는 작업을 수행하므로 SEO 최적화가 어렵다.
- 비교적 새로운 기술인 단일 페이지 앱은 문제를 해결하기 위해 많은 노력과 지식이 필요합니다. NPM, Webpack, SystemJS 및 Gulp와 같은 특정 프레임 워크 및 도구를 다루는 경험이 있는 단일 페이지 웹 응용 프로그램을 개발할 팀을 찾을 수 있습니다. 또한 특히 모듈, 플러그인 및 확장과 같은 타사 요소를 통합하려고 할 때 코드를 추적하기가 어렵습니다.
- 웹 어플리케이션에 필요한 모든 리소스를 처음에 다운로드하기 때문에 초기 구동 속도가 상대적으로 느리다.
- 전통적인 어플리케이션과 비교했을 때 SPA는 보안에 취약하다. 다른 사용자가 클라이언트 사이드 스크립트를 통해 Cross-Site Scripting(XSS)으로 공격할 수 있다.
[참고]
https://gearheart.io/blog/pros-and-cons-building-single-page-applications-2019/
Comments