Vue.js 특징

Vue.js는 UI 화면 개발 방접 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다.
MVVM 패턴은 안드로이드 UI를 제작할 때에도 데이터 바인딩을 하기 위해 쓰이기도 한다.

MVVM 패턴

정의 : 마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴

해당 패턴은 모델 (Model) - 뷰 (View) - 뷰 모델 (View Model)로 구조화 하여 개발하는 방식을 의미한다.
이러한 방식으로 개발을 하면 화면 요소를 제어하는 코드와 데이터제어로직을 분리하여 코드를 직관적으로 이해하기 쉬워지기 때문에 유지보수가 편해진다는 장점이 있다.

용어 정리

용어	설명
뷰 (View)	사용자에게 보이는 화면
돔 (DOM)	HTML 문서에 들어가는 요소(태그, 클래스, 속성)등 의 정보를 담고 있는 데이터 트리
돔 리스너 (DOM Listener)	돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행 하는 장치
모델 (Model)	데이터를 담는 용기, 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장, 비즈니스 코드를 담고 있다
데이터 바인딩(Data Binding)	뷰(View)에 표시되는 내용과 모델의 데이터를 동기화
뷰 모델(View Model)	뷰와 모델의 중간 영역으로, 돔 리스너와 데이터 바인팅을 제공하는 영역

컴포넌트 기반 프레임워크

뷰의 특징은 컴포넌트 기반 프레임워크이다.
뷰의 컴포넌트를 조홥하여 화면을 구성할 수 있다.

컴포넌트 기반 방식 특징

각 역할에 따른 컴포넌트를 따로 제작하여 연결하는 방식으로 코드를 재사용하기 쉽고 화면 구조를 직관적으로 파악할 수 있다.

리액트와 앵귤러의 장점을 가진 프레임워크

뷰는 앵귤러의 데이터 바인딩, 리액트의 단방형 데이터 흐름의 장점을 모두 결합한 프레임워크이다.

양방향 데이터 바인딩

화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화 되면서 다른 한쪽도 자동으로 변경되는 것을 말한다.

단방향 데이터 흐름

컴포넌트 간의 데이터 전달은 상위 컴포넌트에서 하위 컨포넌트 한 방향으로만 전달되도록 하는 것을 말한다.

가상 돔 방식

가상 돔 활용으로 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다 그리지 않고, 프레임워크에서 정의한 방식에 따라 화면을 갱신한다. -> 성능 부하가 줄어들어 화면 렌더링이 빨라진다.