[PART1] 웹/디자인 - TERMS 15

[ TERMS 15 ]  SPA

SPA를 설명하는 이미지 (출처 : https://medium.com/@teamtechsis/single-page-applications-spa-48b1b845b446)

1. SPA(Single Page Application)의 정의

 SPA는 웹 사이트의 전체 페이지를 하나의 페이지로 구현하고, 새로운 콘텐츠를 요구할 때마다 하나의 페이지 안에서 필요한 부분만 동적으로 처리하는 개발 방법이다.

 

2. SPA는 어떻게 접하게 될까?

 초기의 웹 사이트는 단순한 문서 작성 용도로 활용되었기에 웹 페이지를 이동할 때마다 서버로부터 새로운 페이지를 받아와도 큰 문제가 없었다. 하지만 최근 웹 사이트가 고도화 됨에 따라 한 페이지가 처리해야 하는 데이터의 크기 및 복잡도가 점점 증가하여 기존의 웹 개발 방식으로는 사용자 경험을 만족시킬수가 없어졌다. SPA는 웹에서도 모바일과 같은 사용자 경험을 제공하기 위해 등장했다.

 

3. SPA 알아보기

>  개념

 SPA는 단일 페이지로 구성된 웹 또는 앱이다. 단일 페이지란 한 페이지 안에서 모든 것을 한다는 의미이다. 기존 방식의 웹 앱은 서버가 클라이언트 요청에 응답할 때마다 새로운 페이지를 로드한다. 따라서 페이지를 이동 할때마다 서버에 요청하고 해당 페이지에 데이터들을 다시 로드하니 페이지 전환 속도가 늦어진다는 단점이 존재한다.

 

SPA는 기존 방식과는 다르게 새로운 페이지를 로드하지 않고 필요한 부분만 변경한다. 즉, 렌더링 역할을 서버에 넘기지 않고 브라우저에서 처리하는 것이다.

기존의 방식과 SPA 방식을 설명하는 이미지 (출처 : https://www.linkedin.com/pulse/main-key-difference-between-spa-single-page-ssr-server-sachin-yadav-zcncf)

>  장점

 단일 페이지로 만든 웹 사이트는 서버 사이드 렌더링 방식과 비교했을 때 배포가 간단해진다는 장점이 존재한다. 또한 웹 앱에 필요한 모든 정적 리소스를 최초로 받기 때문에 새로운 페이지를 요청했을 때 빠른 속도로 개선된다. 원하는 콘텐츠만 개선 되므로 네이티브 앱과 유사한 느낌을 받는다. 또한 다양한 운영체제로 웹 앱을 만들 때도 용이하다. 서버에서 제공하는 데이터를 각 운영체제의 기술에 맞게 브라우저에서 가공하면 되기 때문이다.

 

>  단점

 SPA 방식의 단점은 웹 페이지를 최초로 열었을 때 모든 정적 리소스를 받아야 하기 때문에 초기 콘텐츠 로딩 속도가 기존 웹 개발 방식에 비해 느리다. 또한 사용자가 방문하지 않을 수도 있는 페이지의 리소스까지 모두 받아 오기 때문에 상화에 따라서는 오히려 비효율적이다.

 

또한 SEO(검색 엔진 최적화)에 적합하지 않다. 구글에서 어떤 페이지를 노출시키려면 해당 페이지의 HTML에 검색 엔진에 유리한 정보를 기록해야 하는데, SPA는 각 페이지에 최적화된 정보를 기록할 수 없기 때문이다.

 

4. SPA를 사용하는 이유

 기존의 방식을 유지한다면 사용자가 여러 콘텐츠가 존재하는 웹 앱에서 콘텐츠 기능을 수행할 때마다 변경된 데이터와 기존 데이터들을 다시 가져오게 된다. 만약 한 웹 페이지 안에 사소한 기능들이 많다면 기존의 방식은 불필요한 데이터 요청과 시간 소모가 증가된다. 따라서 SPA는 주로 많은 콘텐츠를 제공하는 웹 페이지를 개발할 때 사용한다. 뿐만 아니라  프런트엔드와  백엔드 역할을 명확하게 구분하기 때문에 다양한 운영체제로 서비스를 제공할 때 사용하기도 한다.

 

5. SPA 더 알아보기

>  SPA 프레임워크

 SPA를 쉽고 확장성 있게 구현하기 위해 SPA 프레임워크가 존재한다. 대표적으로는 앵귤러, 리액트, 뷰가 있다. 이들은 공통적으로 브라우저와의 불필요한 상호 작용을 최소화하면서 동적인 웹 사이트를 만드는 것을 도와준다. 이러한 특징을 기반으로 하지만 각 프레임워크마다 다른 특징도 존재한다.

앵귤러, 리액트, 뷰의 로고 이미지 (출처 : https://www.tatvasoft.com/blog/angular-vs-react-vs-vue/)

• 앵귤러 : 구글에서 제작, 타입스크립트를 기반(안정적이고 탄탄한 프런트 개발 가능), 무겁고 다루기 어려움
• 리액트 : 페이스북 제작, 자바스크립트(또는 타입스크립트) 가반, 자료가 다양하여 유연한 설계 가능
• 뷰 : 앵귤러와 리액트의 장점 수용, 코드가 깔끔하여 배우기 용이

 

>  함께 알아 두면 좋은 용어

• AJAX
• 비동기, 동기
• 프레임워크
• 자바스크립트