[Web] SPA란?

SPA란 무엇인가?

SPA(Single Page Application)가 필요한 이유는 단일 페이지 응용 프로그램은 수년간 사용되어 왔지만, 일반적인 웹에서는 찾아보기 힘들었음.

하지만 앞으로 많은 웹 사이트가 SPA로 개발될 아주 좋은 계기가 있음.

 

SPA는 SaaS(Software as a Service)  플랫폼 또는 인터넷 서비스의 상황판 같은 대시보드 부분을 구축하고 기업의 데이터 기반 및 폼 기반 애플리케이션을 구축하기 위해 지난 몇 년 동안 많이 채택되어 왔으며, 추후에 개발될 웹 어플리케이션에서 우선적으로 고려될 것으로 예상

 

SPA의 정의

1개의 페이지만 있는 어플리케이션. 실제 하나의 페이지에서만 내용이 바뀜. 페이지는 다시 로드되지 않으며, 화면 전환시마다 REST API 서버를 통해 데이터를 바인딩.

 

단일 페이지 응용 프로그램은 기존의 서버 측 렌더링 응용 프로그램과 비교할 때 매우 간단하게 배포 할 수 있음. 실제로는 CSS Bundle과 JavaScript 번들이 포함된 index.html 파일 하나뿐.

이 정적 파일들은 Apache, Nginx, Amazon S3 또는 Firebase Hosting과 같은 정적 컨텐츠 서버에 업로드 할 수 있음.

또한, 애플리케이션은 데이터를 얻기 위해 Node, Java 또는 PHP와는 완전히 다른 기술로 구축 할 수 있는 별도의 BackEnd 서버를 호출해야함.

 

실제로 Node에서 REST API 또는 다른 유형의 BackEnd 서버를 개발하는 경우 Typescript로도 빌드 할 수 있으므로 서버와 클라이언트 모두에서 동일한 언어를 사용할 수 있고 심지어 소스를 공유 할 수도 있음.

 

단일 페이지 응용 프로그램 및 사용자 경험으로 볼때, 사용자 측면에서 일정한 전체 페이지 새로 고침 혹은 웹사이트에서 정보를 얻기 위해 앞뒤로 왔다갔다하는 것은 과도한 네트워크 트래픽을 유도하고 편이성 마저 떨어짐.

 

단일 페이지 어플리케이션에서 근본적으로 다른 아키텍처 접근 방식을 사용하여 문제를 해결 할 수 있으며, 초기 페이지 로드 후에 SPA에서 네트워크를 통해 더 이상 HTML이 전송되지 않음. 대신 JSON 및 XML 같은 데이터만 서버에서 요청되거나 서버로 전송됨.

 

SPA가 실행되는 동안 데이터만 유선을 통해 전송되므로 HTML을 지속적으로 보내는 것보다 시간과 대역폭이 훨씬 적음. 단일 페이지 프로그램의 장점으로 적은 페이지 전체 재로드로 인한 사용자 경험 향상과 더 적은 대역폭이 필요하기 때문에 전반적인 성능 향상이 있음.

 

항상 SPA를 사용하지 않는 이유는?

비교적 최근까지 Google과 같은 검색 엔진은 단일 페이지 응용 프로그램을 올바르게 색인화하는데 어려움을 겪었음. 또한 과거에는 더 이상 사용되지 않는  Ajax 크롤링 스킴을 사용하는 몇 가지 권장 사항이 있었음. Google이 Ajax를 완벽하게 렌더링 할 수 있냐고 묻는다면 공식적인 발표에서 Google 검색이 일반적으로 Ajax를 크롤링 할 수 있는 정보를 가지고 있지만 아직 완전히 수행 할 수 없다는 일부 보고서가 있다고함.

 

검색엔진 친화적인 SPA

SPA의 성능과 사용자 경험을 가질 수 있지만, 검색 엔진 최적화 *(SEO)에는 어려움이 있음. 이를 해결하기 위해서는 Angular Universal의 사전 렌더링 엔진을 사용 할 수 있음.

검색엔진 최적화 (Search Engine Optimization, SEO)는 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록하는 작업을 말함.

 

SPA 작동 방식

SPA 어플리케이션은 실제 서버에서 HTML을 거의 로드하지 않고 어플리케이션 시작시에 데이터만 네트워크를 통해 전달됨.

오늘날의 공용 인터넷의 대다수인 전통적인 웹 어플리케이션에서 데이터를 HTML 변환(또는 렌더링)하는 것은 서버에서 수행됨. 반면에 단일 페이지 응용 프로그램은 다른 방식으로 이를 수행함.

응용 프로그램 시작 후 SPA에서 데이터-HTML 변환 프로세스가 서버에서 클라이언트로 이동되고, SPA에는 브라우저에서 실행되는 템플릿 엔진과 동일한 기능이 있음.

 

SPA 장점과 단점

(장점)

- 손쉬운 운영 배포(Production Devployment)

- 사용자 친화적(빠른 반응성, 화면전환 애니메이션 등)

- 서버 요청이 적음(REST APIT를 통핸 데이터 송수신)

 

(단점)

- 검색 엔진 최적화 *(SEO)에는 어려움이 있음

- 초기 구동에 시간이 걸림

 

 

출처 : devstory.ibksplatform.com/2017/08/spasigle-page-applications.html