안드로이드, 아이폰과 같은 모바일 시대가 대두함에 따라 렌더링 방식은 새로운 국면을 맞이했습니다. 전통적인 서버사이드 렌더링 방식(ASP, PHP, JSP)에서 클라이언트사이드 렌더링으로 렌더링 방식의 변화를 맞이한 것입니다.

이미 고정된 페이지를 리턴하므로 모바일 페이지를 만들기 위해서는 모바일 사이트를 별도로 만들어야 합니다. 즉, 웹용 사이트, 모바일용 사이트 이렇게 두 개를 만들어야 했습니다. 이 형태도 아이폰과 안드로이드에서 웹앱 형태로는 개발할 수 있지만 네이티브 형태로는 만들기가 불가능해집니다. 그래서 서버는 REST api만 제공해주고 클라이언트가 json 데이터를 렌더링해서 만드는 방식이 사용되는 SPA(single-page application, 스파)가 등장합니다.

SPA는 서버로부터 완전한 새로운 페이지를 불러오지 않고, 현재의 페이지를 동적으로 다시 작성함으로써 사용자와 소통하는 웹 애플리케이션이나 웹사이트를 의미합니다. Gmail, Google 지도, Facebook 또는 GitHub 등이 SPA의 대표적인 사이트입니다.
서버사이드 렌더링 방식과 클라이언트사이드 렌더링 방식의 우열을 가리기보다는 각각의 장단점을 살핀 후 사이트의 성격에 맞게 렌더링 방식을 선택하면 되겠습니다. SPA는 마크업과 데이터를 요청하고, 브라우저에 페이지를 바로 그립니다. 이런 것들을 가능하게 해주는 대표적인 JavaScript Framework 3대장인 Angular, React, Vue.js에 대해 알아봅시다.

[그림1] e-nor 블로그
(출처: https://www.e-nor.com/blog/google-tag-manager/tracking-single-page-applications-with-google-tag-manager)

Angular

[그림2] Angular 홈페이지 (출처: https://angular.io/)

• 배경 : Google이 2010년에 출시했습니다. 타입스크립트 기반 JavaScript Framework입니다. 현재는 Angular라고 불리지만 2016년 전에는 이름에 접미사 JS가 있었습니다. JS는 Angular 2+ 출시 후 이름에서 삭제되었습니다. 2019년 5월 28일, 최신 버전인 Angular 8.0.0이 출시되었습니다. Google과 Wix는 Angular를 사용하는 가장 인기 있는 회사 중 하나입니다.
  
  

• 성능 : Angular는 실제 DOM을 사용합니다. 문제가 발생하면 문제를 찾기 위해 코드에 깊이 들어가야 하므로 처리하기가 매우 어렵고 문제를 고치는데 많은 시간이 소요되어 버그를 유치하게 되는데 이는 위험합니다. Angular의 실제 DOM 사용은 동적 소프트웨어 응용 프로그램을 만드는 성능과 기능에 영향을 주어 느려지게 만듭니다.
  
  

• 특징 : Angular는 템플릿에서 테스트 유틸리티에 이르기까지 개발자에게 많은 것을 제공합니다. 따라서 경량 응용 제품에는 적합하지 않습니다. 라우팅에서 템플릿까지 모든 것을 제공하기 때문에 응용 프로그램을 개발하기 위해 다른 도구를 이용할 필요가 없습니다. 응용 프로그램을 구성하는 방법에 대한 의견이 있습니다. 라우팅 라이브러리를 얻거나 선택할 필요가 없습니다. Angular 패키지에 제공된 모든 것을 사용하여 코딩 프로세스로 시작할 수 있습니다

• 배경 : Facebook에서 2013년에 출시되었습니다. Facebook과 같은 트래픽이 많은 웹 사이트에서 주로 사용됩니다. Facebook 광고가 트래픽을 얻기 시작하고 코딩 및 유지 관리에 문제가 발생하여 특정 문제를 해결하기 위해 개발되었습니다. 최신 버전인 16.8.6은 2019년 5월 6일에 릴리스 되었습니다. WhatsApp, Instagram Paypal, Glass door, BBC는 React를 사용하는 인기 있는 대표적인 회사입니다. React는 매우 동적이며 대화식 사용자 인터페이스를 만드는 데 큰 도움이 됩니다.
  
  

• 성능 : 이 Javascript 라이브러리는 가상 DOM을 사용하고 있습니다. 브라우저에 따라 다르고 가벼울 수도 없습니다. React 패키지로 무료로 제공되며 실제 DOM의 성능 저하 문제를 제거합니다.
  
  

• 특징 : 경량 응용 분야에 적합합니다. Angular와 달리 공식 React는 라이브러리를 많이 제공하지 않습니다. 이를 통해 원하는 프로그래밍 도구를 자유롭게 선택할 수 있습니다. React 라우팅과 같은 타사 솔루션을 이 자바 스크립트 Framework와 통합할 수 있습니다. 이외에도 MobX 및 Redux를 사용하여 사무실 관리 작업을 지원할 수 있습니다. 경험이 풍부한 최고의 소프트웨어 개발자를 고용하면 이러한 유연성을 크게 누릴 수 있습니다. 또한, 비즈니스를 위해 개발된 놀랍고 역동적인 응용 프로그램을 개발할 수 있습니다.

• 배경 : 2014년에 출시되었으며, React 및 Angular의 개발사 Facebook과 Google과 같은 큰 회사에 의해 개발되지 않은 진보적인 JavaScript Framework입니다. Google의 전 엔지니어인 Evan You가 만들었으며, 꾸준한 인기를 얻고 있습니다. 최신 버전; 버전 2.6.10은 2019년 3월 20일에 릴리스 되었습니다. Javascript Framework 제품군의 가장 역사가 짧은 Framework입니다. GitLab 및 Alibaba와 같은 웹 사이트는 Vue를 사용하고 있습니다.
  
  

• 성능 : Vue는 이전에 시작된 Framework의 모든 좋은 속성을 취했습니다. 같은 개념으로 Vue는 Virtual DOM을 채택된 React 개념으로 사용합니다. 이것은 더 빠르고 버그 없는 성능을 보장합니다.
  
  

• 특징 : 경량 응용 분야에 적합합니다. Vue.js 생태계는 개발자에게 많은 것을 제공합니다. 추가 기능 중 일부는 라우팅을 위한 Vue 라우터이며 상태 관리를 위해 Vuex가 있습니다. 또한, 응용 프로그램의 서버 쪽 개발을 시작하기 위한 Vue서버 쪽 렌더가 있습니다. 따라서 Angular만큼 의견이 많지 않고 React만큼 유연하지는 않습니다.

• Vue.js와 React는 Angular보다 우수한 성능과 유연성을 제공합니다.
• Vue와 React는 가벼운 응용 프로그램에 더 적합하며 Angular는 큰 UI 응용 프로그램에 가장 적합합니다.
• Angular는 Vue 및 React와 달리 의견이 많으며 라우팅, 템플릿에서 패키지의 테스트 유틸리티에 이르기까지 모든 것을 제공합니다.
• Vue는 가장 인기 있고 사랑받고 성장하는 Javascript Framework입니다.

• http://www.zdnet.co.kr/view/?no=20190418142445 

• https://eastflag.co.kr/fullstack-spa_definition/ 

• https://hackr.io/blog/10-best-javascript-frameworks-2019

• https://web-front-end.tistory.com/63

• https://hackernoon.com/angular-vs-react-vs-vue-which-is-the-best-choice-for-2019-16ce0deb3847

Posted by 人Co