[Web][Javascript] Vue로 SPA: Single Page App 개발

Vue를 이용하여 SPA를 개발할 수 있다

SPA는 Multi-page App에 비하여 굉장히 빠른 속도를 제공함으로써 native app을 사용하는 것 같은 User Experience를 제공한다

기존에 Web에 관심이 없던 필자도 Vue와 SPA를 통해 Web에 흥미를 가지게 되었다

그정도로 SPA는 강력한 웹 개발 패러다임?이다

Vue로 SPA를 구현하려면

Vue-router가 필요하고, Server-side가 아닌 Client-side에서 rendering과 routing이 이루어져야한다

기본적인 개발방법은 HTML 파일에 <script> 태그로 vue 라이브러리를 로드하고, 코드를 작성하는 것이다

이것은 매우 간단한 페이지를 작성하는데에는 효과적이지만, reusability, 코드관리/유지보수 측면에서 매우 비효율적이다

그래서 HTML 파일에서는 vue 사용법 정도만 매우 간단하게 익히고, 

실질적인 개발은 vue-loader을 이용하여 single file component에서 진행하는 것이 좋아보인다

vue-loader는 webpack(build tool)의 plug-in같은 존재이고, vue-CLI를 통해 사용할 수 있다

그리고 vue-CLI는 npm을 통해 설치할수 있다

npm install -g vue-cli

vue init webpack-simple myapp1

위 커맨드를 통해 프로젝트를 생성하고 src/main.js 파일을 보았다

new Vue(...) 안에 render: h => h(App) 라는 코드가 있을것이다

h => h(App)은 lambda이다

render의 형식은 아래와 같다

render: function (createElement) { 

return createElement(App); 

}

즉 h == createElement이고, h(tag, body) 형태로 사용한다

단 h(vue_single_file_component)의 형태로 사용할 경우, component의 <template>이 render 된다

https://alligator.io/vuejs/introduction-render-functions/

추가작성예정