Vue.js 특징

Vue.js 특징 

뷰는 UI 화면단 라이브러리다 

뷰는 UI화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델 ViewModel 에 해당하는 화면단 라이브러리이다. 

MVVM 패턴이란 화면을 모델 Model - 뷰 View - 뷰 모델 ViewModel 로 구조화하여 개발하는 방식이다. 

화면 요소 제어 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 유지보수가 편해진다. 

용어정의 

뷰 View  

사용자에게 보이는 화면 

돔 DOM

HTML 문서에 들어가는 태그, 클래스, 속성 등의 정보를 담고 있는 데이터 트리

돔 리스너 DOM Listener

돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치

모델 Model

서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장하는 데이터를 담는 용기

데이터 바인딩 Data Binding

뷰에 표시되는 내용과 모델의 데이터를 동기화 

뷰 모델 ViewModel

뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역

MVVM 패턴 Model-View-ViewModel

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

화면단의 동작과 관련된 로직과 뒷단의 데이터베이스 데이터 처리 로직을 분리한다는 뜻

뷰는 컴포넌트 기반 프레임워크다 (컴포넌트)

최신 프론트엔드 프레임워크(리액트, 앵귤러 등)는 모두 컴포넌트 기반 개발 방식이다. 

컴포넌트 기반 방식으로 개발하는 이유는 코드 재사용이 쉽기 때문

뷰의 경우 화면 구조를 직관적으로 파악할 수 있고, 빠르게 구현 가능하며, 타인이 작성한 코드를 이해하기도 쉽다.  

뷰는 리액트와 앵귤러의 장점을 가진 프레임워크다 (데이터바인딩)

리액트의 단방향 데이터 흐름의 장점과 앵귤러의 양방향 데이터 바인딩 장점을 결합한 프레임워크로, 

양방향이란 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 어느 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것.

단방향이란 컴포넌트간에 값이 전달될때 상위 컴포넌트에서 하위 컴포넌트 한 방향으로 전달.

리액트의 가상 돔 Virtual DOM 렌더링 방식을 적용해서 화면 렌더링이 빠르다.

이 가상 돔을 활용하면 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다.