11/15일 3주차 TIL (SPA / Single Page Application)

오늘은 싱글페이지 애플리케이션 SPA / Single Page Application 에대해서 알아보자

싱글페이지 에플리케이션 (SPA / Single Page Application)는 서버로 부터 새로운 페이지를

불러오지않고 현재의 페이지를 동적으로 다시 작성하여 사용자와 소통하는

웹 애플리케이션이나 웹사이트를 말한다

 

SPA 에서 html, javascript, css 등 필요한 모든 코드는 하나의 페이지로 불러오거나

적절한 자원들을 동적으로 불러들여서 필요하면 문서에 추가하는데, 보통 사용자의 동작에 응답하는방식이다

 

전통적인 웹방식은 새로운 페이지를 요청할때마다 정적 리소스가 다운로드되고 전체페이지를 다시 랜더링하는

방식으로 사용하므로 새로고침이 발생되어 사용성이 좋지않고 변경이 필요없는 부분을 포함하여 전체페이지를

새로고침하므로 비효율적이다

예전부터 개발자들은 지속적으로 웹 서비스와 개발방식을 발전시켜왔다

html, css, javascript 리소스등을 CDN형태로 캐싱 및 압축하고, view 에서템플릿 엔진들을 사용하고

초기의 SPA개념인 Backbone.js , Angular.js 라이브러리들이 나왔고 지금은 템플릿 개념을지나서

컴포넌트 개념인 react.js , vue.js, Angular2등 이렇게 다양한 라이브러리와 프레임워크가 등장했다

이처럼 javascript를 이용한 기술을 계속해서 발전해가고 있다

 

SPA특징

 

라우팅

(Routing)

라우팅은 출발지에서 목적지까지의 경로를 결정하는 기능이다

애플리케이션의 라우팅은 사용자가 테스크를 수행하기위해 어던화면에서 다른화면으로

전환하는 네비게이션을 관리하기위한 기능을 의미한다

일반적으로 사용자와 요청한 URL 또는 이벤트를 해석하고 새로운 페이지로 전환하기위한

데이터를 취득하기위해 서버에 필요데이터를 요청하고 화면을 전화하는 위한 일련의 행위를 말한다

 

이러한 라우팅을 백단 서버가아닌 브라우저 단에서 구현해야하는것이 SPA개발의 핵심이다 

이방식을 쉽게 말핮자면 요청 URI에 따라 브러우저에서 돔(DOM)을 변경하는 방식이다

따라서 요청 경로에 따라 동적으로 랜더링 되도록 만들면 라우팅에 따라 다른화면을 구현할수있는것이다

 

컴포넌트

(component)

컴포넌트들이 모여 한페이지를 작성하고 특정부분만 데이터를 바인딩하는 개념입니다

쉽게말하면 index.html파일 하나에서 js, css등 리소스 파일들과 모듈들을 로드해서 

페이지이동없이 특정영역만 새로 모듈을 호출하고 데이터를 바인딩하는개념이다

SPA의 장점

 

1 .단일 페이지로 구성되며 기존의 서버 사이드 랜더링과 비교할때

    배포가 간단하며 네이트브 앱과 유사한 사용자 경험을 제공한다

2.웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번만 다운로드한다.

3. 이후 새로운 페이지 요청시, 페이지 갱신에 필요한 데이터만을 전달바당 페이지를 갱신하므로 전체적인

   트래픽 감소

4. 전체페이지를 다시 렌더링하지않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지않아 

   네이티브앱과 유사한 사용자 경험을 제공한다

 

SPA의 단점

1.웹 애플리케이션에 필요한 모든 정적 리소스를 최초에 한번 다운로드하기 때문에

  초기구동속도가 상대적으로 느리다

2.SPA는 서버 렌더링 방식이아닌 자바스크립트 기반 비동기 모델 클라이언트랜더링 방식이기때문에 

  검색엔진 최적좌 이슈가 있다

 

스마트폰 사용이 증가하고있는 현시대에 트래픽감소와 속도, 사용성, 반응성의 향상은 매우 중요한 이슈이다

SPA의 핵심가치는 사용자경험 향상에 있으며 부가적으로는 애플리케이션 속도의 향상도 

기대할수있어 모바일퍼스트 전략에부합하다