... | ... | @@ -6,11 +6,15 @@ SPA의 대표적인 라이브러리. 프론트프레임워크 React, Vue, Angula |
|
|
|
|
|
## SPA (Single Page Application)란?
|
|
|
|
|
|
단일 페이지 애플리케이션는 모던 웹의 패러다임이다. SPA는 **기본적으로 단일 페이지**로 구성되며기존의 서버 사이드 렌더링과 비교할 때, **배포가 간단**하며 네이티브 앱과 유사한 **사용자 경험을 제공하는 장점**이 있습니다.
|
|
|
* SPA는 **기본적으로 단일 페이지**로 구성
|
|
|
* 기존의 서버 사이드 렌더링과 비교할 때, **배포가 간단**하다.
|
|
|
* 네이티브 앱과 유사한 **사용자 경험을 제공하는 장점**이 있습니다.
|
|
|
|
|
|
link tag를 사용하는 전통적인 웹 방식(서버 사이드 랜더링)은 새로운 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않다. 그리고 변경이 필요없는 부분을 포함하여 전체 페이지를 갱신하므로 비효적입니다.
|
|
|
<!-- link tag를 사용하는 전통적인 웹 방식(서버 사이드 랜더링)은 새로운 페이지 요청 시마다 정적 리소스가 다운로드되고 전체 페이지를 다시 렌더링하는 방식을 사용하므로 새로고침이 발생되어 사용성이 좋지 않다. 그리고 변경이 필요없는 부분을 포함하여 전체 페이지를 갱신하므로 비효적입니다. -->
|
|
|
|
|
|
SPA는 기본적으로 웹 애플리케이션에 필요한 **모든 정적 리소스를 최초에 한번 다운로드** 한다. 이후 새로운 페이지 요청시, 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신하므로 전체적인 트래픽을 감소할 수 있고, 전체 페이지를 다시 렌더링 하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.
|
|
|
* 웹 애플리케이션에 필요한 **모든 정적 리소스를 최초에 한번 다운로드** 한다.
|
|
|
* 이후 새로운 페이지 요청시, 페이지 갱신에 필요한 데이터만을 전달받아 페이지를 갱신
|
|
|
* 전체적인 트래픽을 감소하고, 전체 페이지를 다시 렌더링 하지 않고 변경되는 부분만을 갱신하므로 새로고침이 발생하지 않아 네이티브 앱과 유사한 사용자 경험을 제공할 수 있다.
|
|
|
|
|
|
모바일의 사용이 증가하고 있는 현 시점에 트래픽의 감소와 속도, 사용성, 반응성의 향상은 매우 중요한 이슈이다. SPA의 핵심 가치는 **사용자 경험(UX) 향상**에 있으며 부가적으로 **애플리케이션 속도의 향상**도 기대할 수 있어서 모바일 퍼스트(Mobile First) 전략에 부합한다.
|
|
|
|
... | ... | |