SPA(Single Page Application)

요즘 핫한 기술이다. 

최근 프로젝트 절반 이상은 SPA를 사용하는 거 같다.

특히 모바일 쪽은 대부분 사용한다.

그러면 SPA 란 무엇이고 SPA 를 사용하는 기술은 어떤 것들이 있는지 살펴보고자 한다.

 

먼저 SPA 를 사용하는 프레임워크는 다음과 같다.

Angular

구글의 앵귤러 팀과 개인 및 기업 공동체에 의해 주도되는 타입스크립트 기반 오픈 소스 프론트엔드 웹 애플리케이션 프레임워크이다.

Vue.js

Vue.js는 웹 애플리케이션의 사용자 인터페이스를 만들기 위해 사용하는 오픈 소스 프로그레시브 자바스크립트 프레임워크이다.

React

리액트는 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 페이스북과 개별 개발자 및 기업들 공동체에 의해 유지보수된다. 리액트는 싱글 페이지 애플리케이션이나 모바일 애플리케이션 개발에 사용될 수 있다.

 

크게 위의 세 종류의 프레임워크가 있다.

 

초반에 나왔을 때만해도 Angular 사용자가 많았다.

하지만 요즘은 Vue.js 나 React 사용자가 증가하는 추세이다.

특히 대기업에서는 Vue.js 를 표준프레임워크로 많이 사용하는 듯하다.

 

이유는 여러가지가 있겠지만 개인적으로는 Angular와 Vue.js를 써본 입장에서는 Vue.js 가 학습하기가 훨씬 쉽다.

그리고 Document 도 한글로 잘 나와있다.

사람마다 편차는 있겠지만 굳이 책을 안봐도 Document 만 보고도 금방 익힐 수 있을 정도다.

근데  Angular 를 초반에 사용하고 Vue.js를 써봐서 좀 더 수월했을 수도 있다.

Angular 시작했을 때는 SPA 라는 개념이나 ES6 문법도 생소했고 NPM 사용도 서툴렀을 때라 시행착오가 크긴 했다. Angular의 잦은 업데이트 문제도 있긴 했지만...

 

React는 이제 배워보려고 하는데 아직 사용을 안 해봐서 평가하긴 그렇지만 요즘 React 프로젝트도 많이 올라오는 추세다. React의 강점 중에 하나는 React native 도 있기 때문에 웹과 앱을 개발해보길 원하면 익혀두면 좋을 듯하다.

 

SPA(Single Page Application)

 

영어를 그대로 해석해보면 "단일 페이지 어플리케이션" 이다.

위키백과에서는 다음과 같이 설명한다.

싱글 페이지 애플리케이션(single-page application, SPA, 스파)은 서버로부터 완전한 새로운 페이지를 불러오지 않고 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 말한다.

 

SPA 가 CSR(Client Side Rendering) 방식인데 최초 호출된 페이지(예: index.html)에서 모든 동작이 일어나는 방식이다.

처음 페이지가 호출되고 각 화면이나 컴포넌트의 데이터는 api 통신을 통하여 데이터를 가져와서 동적으로 그려(Rendering) 준다.

 

SSR(Server Side Rendering) 은 기존의 JSP, PHP, ASP를 생각하면 되는데 매번 페이지를 서버에 요청하면 서버에서 페이지를 생성(Rendering) 하여 보내주는 방식이다.

 

각각의 장단점이 있는데

검색엔진 최적화(SEO) 측면에서는 SSR 방식이 좋다.

CSR 은 페이지 전체를 다시 로딩하지 않고 필요한 부분만을 Rendering 하기 때문에 네트워크 측면에서나 사용자 경험 측면에서 유리한 점이 있다.

 

요즘에는 웹이나 모바일에서 SPA를 많이 사용하고 있는데 목적이나 확장성이나 성능 등... 다양하게 고려해야 할 부분이 있어서 정해진 답은 없지만 개인적으로는 큰 틀에서는 웹은 기존 SSR 방식, 모바일에서 CSR 방식을 고려할 수 있을듯하다. 웹에서 CSR 방식의 이점도 있으니 사이트마다 잘 판단하여 사용하면 좋을 듯하다.