2019.06.07
Vue.js(간단히 Vue, /vjuː/, 뷰/view)는 사용자 인터페이스 빌드를 위한 오픈 소스 프로그레시브 자바스크립트 프레임워크, 컨트롤러 대신 뷰 모델을 가지는 MVVM 패턴을 기반으로 디자인됨
MVVM 패턴
Model-View-ViewModel의 줄임말로 로직과 UI의 분리를 위해 설계된 패턴
웹페이지는 돔과 자바스크립트로 만들어지게 되는데 돔이 View 역할을 하고, 자바스크립트가 Model 역할을 함
용어
1. 뷰(View) : 사용자에게 보이는 화면
2. 돔(DOM) : HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
3. 돔 리스너(DOM Listener) : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
4. 모델(Model) : 데이터를 담는 용기, 일반적으로 서버에서 가져온 데이터를 javascript객체로 저장
5. 뷰 모델(View Model) : 뷰와 모델의 중간 영역, 돔리스너와 데이터 바인딩을 제공하는 영역
Component
뷰가 가지는 다른 특징은 컴포넌트(Component) 기반 프레임워크라는 점
화면에 비춰지는 뷰의 단위를 쪼개어 재활용이 가능한 형태로 관리하는 것이 컴포넌트
Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스이고
뷰의 컴포넌트를 조합하여 위의 그림처럼 화면을 구성할 수 있음
최신 프론트엔트 프레임워크인 React, Angular 모두 컴포넌트 기반의 개발 방식을 추구함.
컴포넌트 기반 방식으로 개발하는 이유는 코드를 재사용하기 쉽기 때문
뷰의 경우 컴포넌트 사용 시 HTML코드에서 화면의 구조를 직관적으로 파악하기 쉬움