TIL no.44 - SPA 란 ?

 

 SPA란 무엇인가 

 

SPA란, Single Page Application 으로 단일 페이지로 구성된 웹 애플리케이션을 말합니다.

기존의 애플리케이션은 화면 이동 시에 클라이언트가 새로운 페이지에 대한 요청을 보내면 서버로부터 리소스를 전달받아서 이를 렌더링하는 방식으로 동작하였습니다.

SPA는 정적인 파일들을 초기에 받아놓고 이후 필요한 비동기적 데이터 부분만을 서버에 요청합니다.

기존의 애플리케이션과 SPA의 간단한 정의만 놓고 보더라고 매번 모든 데이터를 다 주고받는 경우와 기본적인 페이지의 파일을 가지고 있고 필요한 데이터만 주고받는 것 중 SPA가 더 간단하고 발전된 경우라고 생각할 수 있을 것입니다.

 

SPA는 페이지 이동 시 필요한 데이터 부분만 서버에 AJAX 로 요청하고 서버는 필요한 데이터의 JSON만 줍니다.

받은 JSON으로 변경된 부분만 렌더링 해주는 방식이기 때문에 Client Side Rendering 방식이라고도 하며, 어플리케이션 생명 주기 중에서 한 번만 리소스(HTML, CSS, JavaScript) 를 로딩하고, 새로운 페이지 요청 시 페이지 갱신에 필요한 데이터만을 전달받아 변경된 부분만을 갱신합니다.

 

 

 SPA의 장점 

 

html, css, javascript 를 어플리케이션의 라이프사이클에서 한 번만 로드하기 때문에 구조가 간단해집니다.

구조가 간단해지기 때문에 향상된 성능과 사용자 경험(UX)을 제공합니다.

사용자 친화적인 구조로서 빠른 반응성을 가지며 화면전환 애니메이션에도 쉬운 구조입니다.

중복되는 리소스 없이 필요한 요청만 하게 되므로 효율성이 증가하겠죠.

 

개발이 복잡해지지 않기 때문에 기존의 방식에 비해 손쉬운 운영 배포가 가능합니다.

 

REST API를 통한 데이터 송수신을 하며 서버 요청이 적습니다.

 

 

 

 

 SPA의 단점 

 

검색 엔진 최적화(SEO: Search Engine Optimization )에 어려움이 있습니다.

 

클라이언트 쪽이 무거워져 초기에 로드되는데 시간이 걸립니다. 

 

SPA 를 사용하게 된다면 핵심로직이 클라이언트에서 javascript 를 통해 구현될 수 있기 때문에 이는 코드가 외부에 노출되는 것을 막을 수 없습니다. 그렇기 때문에 보안 부분에서 약점이 발생합니다.

 

 

 

 SPA에 대한 생각 

모던웹에 들어서면서 트렌드 처럼 보여지고 있는 SPA에 대해서 알게 되고 이해하게 됐습니다.

어떤 개념이든 새롭게 들어서면서 장점이 반해 단점도 존재한다는 것은 어찌보면 당연합니다.

어떠한 점을 개선하기 위해 만들어지게 된 개념인 만큼 단점보다 이점에 초점을 맞춰 개발하면 보다 나은 성과를 얻을 수 있을 것 같습니다.

 

보안적인 부분이 중요하게 작용하는 기업이나 큰 프로젝트에서는 보안의 단점이 치명적일 수 있어서 아직 구조가 복잡한 전통적인 방식을 고수하기도 하지만 노출되어서는 안 되는 중요한 로직이 있다면 해당 기능만 API를 통해서 서버에서 처리하는 다른 방법이 있기 때문에 큰 문제는 아닐 것 같습니다. 

검색 엔진 최적화에 대해서는 지속적으로 생각해보아야 할 문제인 것 같습니다.

 

 

 

 

* 검색 엔진 최적화는 웹 페이지 검색엔진이 자료를 수집하고 순위를 매기는 방식에 맞게 웹 페이지를 구성해서 검색 결과의 상위에 나올 수 있도록 하는 작업을 말합니다.