[DEV]SPA 알아보기 - Single Page Application

Single Page Application - SPA에 대해서 알아보자

SPA?

SPA란 Single Page Application 의 약자로, 단일 페이지 어플리케이션 이라고 불립니다. 말 그대로

'페이지가 1개인 어플리케이션' 입니다.

기존에 있던 웹 페이지들은 여러 페이지로 구성이 되어 있었습니다. 그래서 사용자가 요청할 때마다

페이지가 새로고침 되며 그때마다 서버에 요청하고 응답받은 내용을 브라우저에 표현해주었습니다.

하지만 과도한 네트워크 트래픽을 유도하게 되었고, 편의성마저 떨어지게 됩니다. 

이는 현재 매우 많은 데이터를 가진 웹 환경을 표현하기에는 문제가 있었고, 이것을 나름대로 캐싱, 압축

하는 방법으로 해소하고자 하였지만, 결국에는 한번에 모든 HTML, CSS, JS를 해석한 뒤에 화면에 렌더링 하게 됩니다.

현재 공공데이터포털 사이트 전체 에서 SPA를 적용한 것을 볼 수 있습니다. 텍스트를 클릭해서 확인해보시길 바랍니다.

대표적인 SPA 개발 라이브러리로는 Backbone.js, Angular.js 등의 자바스크립트 라이브러리를 사용합니다.

SPA 장점

페이지 전체를 리로드 하지 않기 때문에 브라우저 상에서 1. 자연스러운 사용자 경험을 유도할 수 있습니다.

또한 이 때문에 더 적은 대역폭이 필요하기 때문에 2. 성능향상을 기대할 수 있습니다.

SPA 단점

초기 구동시에 데이터를 불러오기 때문에 1. 시간이 조금 걸릴 수 있습니다.

또한 2. 검색 엔진 최적화 (SEO) 에는 어려움이 있습니다. 

ㄴ> 최근까지도 검색 엔진들이 SPA로 개발된 어플리케이션들을 올바르게 색인화 하는데 어려움을 겪었다고 합니다.

그리고 Google의 공식 발표에서도 아직 완전히 색인화를 수행할 수 없다는 일부 보고서가 있다고 합니다.

참고

http://devsh.tistory.com/entry/SPASingle-Page-Application-%EC%9D%B4%EB%9E%80

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