SPA 웹 #1: Vue.js + REST API Server

들어가면서 

현재 만들고 있는 시스템 트레이딩 프로그램은 클라이언트와 서버를 C++로 만들고 있습니다. C++로 만들고 있다보니 간단한 시뮬레이션 조회를 만드는 것도 많은 시간을 필요로 합니다. 이런 생산성 문제를 해결하기 위하여 간단한 데이터 조회는 웹과 REST API 서버를 이용하여 빠르게 개발하려고 하였습니다. 이와 같은 생각으로 구성한 것이 Vue.js + REST API서버 조합이었습니다. 솔직히 이쪽 기술은 깊게는 잘 모르다보니 실제로 구현하면서 많은 것을 배우게 되었고 이글은 배운 내용과 최근의 개발 흐름에 대한 것입니다.

Vue.js

처음에는 너무 유명해서 구현시 자바스크립트 라이브러리로 사용하려고 했는데 배우고 사용하다 보니 일반적인 자바스크립트 라이브러리가 아니라서 결국 Vue.js + REST API 서버 구조를 만들게 한 장본인 입니다. 뷰(Vue.js)는 리액트(React.js), 앵글러(Angular.js)와 함께 현재 SPA(Single Page Application), 싱글 페이지 어플리케이션을 CSR(Client Side Rendering), 클라이언트 사이드 렌더링으로 구현해주는 자바스크립트 프레임워크 입니다. Vue.js를 알기 위해서는 SPA와 CSR을 우선적으로 이해해야 합니다. 이해를 위하여 현재 만든 아래 스크린 샷을 살펴보겠습니다.

SPA(Single Page Application), 싱글 페이지 어플리케이션
스크린 샷에서 보시면 1번 영역에 있는 내용을 클릭하면 2, 3번 영역의 내용이 변경됩니다. 이것은 싱글 페이지 어플리케이션으로 뷰를 이용하여 구현하였기 때문입니다. 이것을 싱글 페이지 어플리케이션이라고 하는 이유는 1번 영역 클릭시 다른 페이지로 이동 없이 2, 3번 영역이 바뀌기 때문입니다. 기본적으로 웹 어플리케이션은 사용자와의 인터렉션을 새로운 페이지로 이동하여 처리합니다. 하지만 싱글 페이지 어플리케이션은 새로운 페이지로 이동하지 않고 처리하기 때문에 즉 이름 그대로 하나의 페이지에서 처리하기 때문에 싱글 페이지 어플리케이션이라고 불립니다.

CSR(Client Side Rendering), 클라이언트 사이드 렌더링
클라이언트 사이드 렌더링을 이해하기 위해서는 기본의 ASP, ASP.NET, JSP, Servlet, PHP, Spring Boot 렌더링 엔진 등이 SSR(Server Side Rendering)을 한다는 것을 이해하는 것이 좋습니다. 서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이를 이해하기 전에 두 용어에 렌더링이라는 용어가 들어간다는 것을 살펴보겠습니다. 여기서 말하는 렌더링의 의미는 스크린샷의 2, 3번 영역의 테이블 행들이 동적으로 생성 및 삭제되는 것과 같이 HTML 내용의 동적인 부분을 표시하는 것을 말한다고 볼 수 있습니다. 서버 사이드 렌더링에서는 서버쪽 코드에 의하여 동적인 내용이 표시됩니다. 그에 반하여 클라이언트 사이드 렌더링은 클라리언트 자바 스크립트 코드에 의하여 동적인 내용을 표시합니다. 
클라이언트 사이드 렌더링은 자바스크립트를 이용하여 데이터를 가져오기 위하여 다양한 방법으로 서버와 통신합니다. 여기서는 동적으로 REST API를 이용하였습니다.
클라이언트 사이드 렌더링은 서버에 부하를 주지 않으며 페이지를 이동하지 않는 관계로 화면이 부드러운 장점이 있지만 처음 자바스크립트 코드 양으로 인하여 로딩에 시간이 상대적으로 더 걸리고 검색 엔진에 검색 인덱싱이 어렵다는 단점을 가지고 있습니다.

웹 개발 트렌드: CSR + REST API 
웹 개발이 스프링 같은 프레임워크와 템플릿 엔진(서버 단에 존재하는 스크립트와 HTML 코드가 혼재하는 소스, 그냥 PHP, JSP같은 형태로 다른 스크립트 언어를 가지고 있다고 생각하면 편합니다.)이 유행이었다가 최근에 CSR + REST API서버 형태로 많이 변했다고 합니다. 
CSR + REST API 구조의 가장 큰 장점은 REST API 서버 하나로 웹과 앱을 동시에 서비스할 수 있다는 점인거 같습니다. 그렇지 않다면 웹과 앱을 지원하다고 했을때 앱용 REST API서버와 웹용 서버를 별도로 개발해야 합니다. 

REST API 서버는 같은 내용을 노드(Node.js)와 스프링부트(Spring Boot) 두개로 구현하여 보았습니다. 다음 편에서는 이 두 구현의 차이점을 살펴보도록 하겠습니다.