들어가며
기존의 html을 이용해 웹사이트를 제작한다면 분명 큰 난관을 맞닥뜨릴것이다. 더욱이 많은 정보를 담고, 수많은 웹페이지들로 이루어진 웹사이트라면 말이다. 코딩은 중복을 피하도록 발전해왔다. SPA도 그 발전 중의 하나의 방법이다.
Link(anchor) tag
link tag를 사용하는 전통적인 화면 전환 방식은 새로운 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않다. 그리고 변경이 필요없는 부분까지 포함하여 전체 페이지를 갱신하므로 비효율적이다. 이러한 중복을 해결하기 위해 SPA(Single Page Application)이 사용되기 시작했다.
SPA
Single Page Application
단어 그대로 하나의 웹페이지로 구현되는 application을 말한다.
SPA는 기본적으로 웹 애플리케이션에 필요한 모든 정적 리소스를 최초 접근시 단 한번만 다운로드한다. 이후 새로운 페이지 요청 시, 페이지 갱신에 필요한 데이터만을 JSON으로 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소시킬 수 있고, 전체 페이지를 다시 렌더링하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험(UX)을 제공할 수 있다.
Benefits
Quick loading time
전통적인 html의 link tag만으로 만들어진 웹사이트는 각각의 요청에 따라 다른 하나의 완전한 웹페이지를 로드해야 하기 때문에 속도가 상대적으로 느리다.
반면에, 같은 템플릿을 사용하는 웹사이트의 경우(유튜브, 넷플릭스, 지메일, 페이스북 등) SPA를 사용하면 상당한 시간이 단축된다. 여담으로 Google Research에 따르면 로딩시간이 200ms 이상이 걸리는 웹사이트의 경우에 비즈니스에 상당부분 영향을 준다고 한다.
Good caching abilities
단지 한번의 요청으로 서버로부터 모든 데이터를 저장할 수 있다. 사용자는 offline에서도 접근가능케 할 수 있다. 또한 local data는 서버와 동기화된다.
Cache
일시적인 특징이 있는 데이터 하위 집합을 저장하는 고속 데이터 스토리지 계층이다. 따라서 이후에 해당 데이터에 대한 요청이 있을 경우 데이터의 기본 스토리지 위치에 액세스할 때보다 더 빠르게 요청을 처리할 수 있다. 캐싱을 사용하면 이전에 검색하거나 계산한 데이터를 효율적으로 재사용할 수 있다.
Improved user experience
사용자들의 대기시간을 줄여줌으로써 원활한 경험(seamless experience)을 가능케 한다.
Rapid Front-end development
decoupled single page application architecture가 프런트엔드와 백엔드 시스템을 분리시킨다. 이러한 것들로 인해 개발자들은 프런트엔드를 독립적으로 실행하고 배포할 수 있다.
API들은 이것들을 가능케 한다.
Drawbacks
Search Engine Optimization(SEO) 검색엔진최적화
SPA 웹 어플리케이션은 SSR(server side rendering) 방식이 아닌 자바스크립트 기반 비동기 모델의 CSR(client side rendering) 방식으로 실행되기 때문에 브라우저 주소창의 URL이 바뀌지 않는다. 따라서 검색에 용이하지 않다. 이러한 문제점은 Google Search가 해결하기 위해 노력하고 있지만 이를 위해선 SPA 웹 앱의 자바스크립트 파일이 구글에 의해 indexed 되어야 한다.
Complex SPAs Comes with Issue
말 그대로 복잡한 SPA는 용량문제로 인해 로딩에 시간이 오래 걸릴수 있다. 이는 결국에 UX를 낮추며 user engagement를 낮출 수 밖에 없다.
Analytics
Google Anlytics와 같은 분석 도구들을 SPA에 적용하기란 어려운 일이다. 일반적인 링크로 연결된 홈페이지에 analytics tools를 사용하기 위해선 간단한 코드만 추가하면 되지만, SPA의 경우엔 cumbersome(크고 무거운)한 logic을 기존 코드에 추가해야한다.
When to Use SPA?
Social netword stuff, SaaS platform 등에서 이용될 수 있다. 또한 실시간 업데이트가 필요한 페이지에 적합하다.
SPA 구축
JS 프레임워크 이용
위 그림 속의 네가지 프레임워크를 이용해 SPA를 구현할 수 있다.
백엔드 기술 사용
필요에 따라 어떤 기술이던 선택하여 사용하면 된다.
PHP 프레임워크나 Node.js 등이 있다.
데이터베이스
경험과 유명세를 따지면, MongoDB와 MySQL이 SPA에 좋은 database이다.
AJAX
SPA에 필수적인 기술이다. 클라이언트와 서버의 데이터 교환을 가능케한다.
Routing
출발지에서 목적지까지의 경로를 결정하는 기능이다. 애플리케이션의 라우팅은 사용자가 태스크를 수행하기 위해 어떤 화면(view)에서 다른 화면으로 화면을 전환하는 내비게이션을 관리하기 위한 기능을 의미한다. 일반적으로 라우팅은 사용자가 요청한 URL 또는 이벤트를 해석하고 새로운 페이지로 전환하기 위해 필요한 데이터를 서버에 요청하고 페이지를 전환하는 위한 일련의 행위를 말한다.
브라우저가 화면을 전환하는 경우는 다음과 같다.
- 브라우저의 주소창에 URL을 입력하면 해당 페이지로 이동한다.
- 웹페이지의 링크(a 태그)를 클릭하면 해당 페이지로 이동한다.
- 브라우저의 뒤로가기 또는 앞으로가기 버튼을 클릭하면 사용자 방문 기록(history)의 뒤 또는 앞으로 이동한다. history 관리를 위해서는 각 페이지는 브라우저의 주소창에서 구별할 수 있는 유일한 URL을 소유해야 한다.
SPA와 Routing
전통적 링크 방식
아래와 같은 link tag를 클릭하면 href 속성값인 리소스 경로가 URL의 path에 추가되어 주소창에 나타나고 해당 리소스를 서버에 요청한다.
<a href="/service.html">Service</a>
참고
