[Vue] 튜토리얼1. Vue.js란 무엇일까요?

Vue 란?

• Vue는 사용자 인터페이스를 만들기 위한 Progressive Framework 입니다.
  • Progressive Framework: Data 모델이 바뀌면 View(HTML)가 자동으로 업데이트 되는 Framework
• Vue는 요즘 떠오르고 있는 핫한 프론트엔드 프레임워크입니다. 하단의 사진을 보면 Vue.js의 사용량 척도는 해가 갈수록 증가하여 2020년엔 50퍼센트에 육박한 것을 볼 수 있습니다.

프론트엔드 프레임워크 별 사용량 척도

 

• Vue는 Angular의 특징인 양방향 바인딩, React의 특징인 Virtual DOM 렌더링 방식을 가지고 있습니다.
  • 양방향 바인딩: Vue의 directive중 하나인 v-model을 말합니다. Data Model <-> View 가 서로에게 데이터를 주고받고 영향을 미치는 구조입니다. Data Model -> View 로 일방적으로 전달하는 단방향 바인딩과는 다르게 양방향 데이터 전송이 가능합니다. (Vue의 directive중 하나인 v-bind로 단방향 바인딩도 가능합니다.)
  • Virtual DOM Rendering: Element에 변화가 생겼을 때 기존 방식은 DOM을 바로바로 업데이트를 하고 랜더링이 다시 일어났습니다. 이 리랜더링은 사용자 경험에 굉장한 악영향을 끼칩니다. Vue는 Virtual DOM을 두면서 변화내용을 Virtual DOM에 먼저 업데이트를 하고, 업데이트 될 요소를 한꺼번에 처리합니다. 이런 경우 랜더링의 횟수가 1번으로 줄어들어 시간낭비가 줄어들면서 UX도 향상시킬 수 있습니다. 다만 이 Virtual DOM이 메모리에 저장되기 때문에 메모리의 사용량이 증가합니다.

 

• Vue는 MVVM (Model View ViewModel) 패턴에서 ViewModel의 영감을 받아서 탄생했기 때문에 MVVM 모델의 특징을 어느정도 따르고 있습니다. MVVM 패턴에서 Model은 Data, View는 유저가 보는 Template, ViewModel은 Model과 View를 연결(바인딩)해주는 매개체라고 생각하면 쉽습니다. 위에서 Vue는 양방향 바인딩을 제공하는데, ViewModel처럼 Data Model과 View의 바인딩을 하는 역할을 합니다.
  • 장점: Model과 View가 독립되었기 때문에 독립적으로 개발할 수 있습니다. 따라서 유지보수가 쉽습니다. 또한 중간 중재역할을 하기 때문에 View 혹은 Model에 변화가 생겼을 때 상호간의 변경을 최소화할 수 있습니다.
  • 단점: 앱이 거대해지면 데이터 바인딩 때문에 앱의 메모리 소모가 커집니다.