SPA 란?

안녕하세요. 공부를 하면서 헷깔리는 개념들에 대해서 정리 해둘까합니다.
SPA라고 하면 조금 생소하게 보이실 수 있지만 우리가 이미 알고 있는 개념일 가능성이 있습니다.
 
 

단일 페이지 애플리케이션(Single Page Application)

 
SPA는 말 그대로 한 페이지 안에서 동작하는 앱이라는 뜻이며
필요한 데이터만 비동기로 받아와서 동적으로 현재 화면에 다시 렌더링 하는 방식으로 동작합니다.
 

단일/다중 페이지 어플리케이션

 기존 방식인 다중 페이지 어플리케이션과 비교한 이미지 입니다. 개념적으로는 이와 같지만 단 하나의 페이지만 존재하는 애플리케이션을 의미하지는 않고, 다수의 페이지를 표시하는 데 페이지 전환을 수행하지 않고,
마치 하나의 페이지인 것처럼 처리하는 기술을 의미합니다.
 
 
 

SPA를 사용하는 이유와 장점

사용자가 애플리케이션과 상호작용을 통해 화면전환이나 업데이트되는 일은 빈번히 일어나기 때문에
HTML을 수신하고 렌더링 하는 방식에 따라 반응속도와 페이지 전환에 걸리는 시간의 차이가 많이 납니다. 
사용자가 특정 액션을 취할 때 전체가 아닌 해당 영역만 동적으로 업데이트할 경우, 응답속도와 사용자의 의도에 반응하는 화면의 리액션이 훨씬 자연스럽게 느껴집니다. 
 

이처럼 SPA(Single Page Application)는
필요한 영역에만 즉각적인 화면의 변화를 줄 수 있어 빠르고,
자연스러워 사용자가 느끼는 사용감을 극대화 할 수 있습니다.

 
 
 

빠른 로딩 속도와 반응성

SPA(Single Page Application)의 주요 장점은 페이지 전환 시 서버에서 전체 화면을 새로 내려받지 않기 때문에,
뛰어난 반응성과 빠른 페이지 로딩을 가능케 합니다.
최초 한번 방문으로 전체 웹 애플리케이션 용 파일이 다운로드 됩니다.
이후 웹서버 쪽에서는 더 이상 화면구성을 위한 HTML이나 CSS를 전송하지 않습니다. 
 
기존 방식의 경우 새 데이터가 요청될 때마다 서버로부터 전체 HTML 페이지가 다시 로드 되었었는데, SPA는 한 번에 필요한 데이터들을 전송받고, 필요한 부분만 업데이트하기 때문에 로딩 속도와 반응이 빠릅니다.
 
 
 

향상된 사용자 경험 (뛰어난 속도 및 성능으로 인한)

SPA를 활용할 경우 고객 체류시간이 늘어나는 효과를 누릴 수 있습니다.
SPA(Single Page Application)를 이용한 빠른 렌더링 속도와 반응성은 웹 애플리케이션(Web)이지만 네이티브 애플리케이션(Native Application)을 사용하는 듯한 향상된 사용자 경험을 제공하게 되어, 사용자의 사용시간이 늘어나는 효과를 얻을 수 있습니다.
 
 
 

웹/ 모바일 공통 아키텍처 사용(웹/모바일 API 공유)

PHP나 JSP 또는 Thymeleaf, EJS 등 Web Application Server에서 화면구성을 위한 템플릿 엔진(Template Engine)을 사용하는 전통적인 개발 방식은 모바일 앱(Mobile App)용 백엔드용 API 서버를 별도로 구성해야 합니다. 
 
하지만 SPA를 활용할 경우에는 별도의 백엔드용 API 서버 구현 없이 웹 애플리케이션 서비스를 제공할 수 있습니다. SPA 환경은 UI와 별개로 서버 측의 데이터를 조회하기 위한 API 백엔드(Backend) 서버를 구성하여 비동기(Async) 방식으로 데이터를 가져와서 처리하기 때문에 아키텍처 구성은 별도의 백엔드 API 서버 없이  웹 애플리케이션(Web App) 뿐만 아니라 모바일 앱(Mobile App) 서비스를 구현할 수 있습니다.



 

복잡한 대규모 애플리케이션 개발(트래픽 핸들링)

많은 기업이 현재 직면한 큰 과제는 트래픽입니다. 사용자와의 상호 작용이 원활한 웹 앱을 만들기 위해 다양한 기능이 추가되는데, 이럴 경우 발생하는 트래픽이 높아집니다. 이럴 경우 SPA를 사용하면 애플리케이션 사용 시 트래픽이 줄어들어 도움을 얻을 수 있습니다. 현재 많이 사용되는 자바스크립트 프레임워크인 React, Vue, Angular 등은 이러한 문제를 해결하기 위해 SPA(Single Page Application) 원칙을 도입하고 있습니다. 
 
SPA(Single Page Application)로 앱을 개발하면 복잡한 사용자 화면에 높은 반응성을 유지할 수 있어서 특히 좋습니다. 비동기 방식으로 필요한 부분만 따로 업데이트가 가능하기 때문에 실시간 업데이트나 데이터 시각화와 같은 동적 요소가 많은 웹 앱을 만들 때 SPA(Single Page Application) 방식은 정말 유용합니다. 
 
 
 
 
 
참고사이트 : SPA란? 웹 개발 트렌드 SPA의 특징부터 구현 방법까지 모두 알려드립니다!
https://www.elancer.co.kr/blog/view?seq=214