Vue.js 특징 MVVM패턴의 의미와 장점 컴포넌트기반 프레임워크

Vue.js :  웹 페이지 화면을 개발하기 위한 프런트 엔드 프레임워크

           화면단 라이버러리 이자 프레임 워크라고 볼 수 있음

점진적인 프레임워크로서의 뷰의 의미

-> 뷰의 창시자인 에반 유가 2017년 vue.js  컨퍼런스에서 발표한 프리젠테이션에 사용한 그림

- 뷰 커어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다.

 

뷰 공식사이트 : www.vuejs.org  

Vue.js - The Progressive JavaScript Framework | Vue.js

- 뷰는 2014년 2월에 처음으로 공식 배포됨.

구글 트렌드 검색 결과

뷰의 장점

 - 배우기가 쉽다

 - 리엑트와 앵귤러에 비해 성능이 우수하고 빠르다

 - 리엑트의 장점과 앵귤러의 장점을 모두 가지고 있다.

 - 앵귤러의 데이터 바인딩 특성과 리액트의 가상돔 기반 렌더링 특징을 모두 가지고 있음

 

https://v2.vuejs.org/v2/guide/comparison.html?redirect=true

Comparison with Other Frameworks — Vue.js

 

Vue.js 의 특징

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

MVVM 구조에서 Vue.js 의 위치

- MVVM 패턴 :  화면을 모델(Model) - 뷰 (View) - 뷰 모델(ViewModel)로 구조화 하여 개발하는 방식

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

 

- 뷰는 화면의 요소가 변경되거나 조작이 일어날 때 즉각 반응하여 화면의 데이터를 갱신하여 보여주는 역할을 하며 화면의 표현에 주로 관연하는 라이브러리 이기 때문에 화면단 라이브러리 라고도 한다.

 -MVVM(Model - View - ViewModel) : 마크업 언어나 GUI 코드를 비지니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트 웨어 디자인 패턴

 - 화면 앞단(프론트엔ㄷ)의 화면 동작과 관련된 로직과 화면 뒷단(백엔드)의 데이터 베이스 데이터 처리 로직을 분리하여 더 깔끔하게 코드를 구성한다.

화면을 컴포넌트로 구조화 한 컴포넌간 관계도

뷰의 컴포넌트를 조합하여 화면을 구성할 수 있다

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

- 뷰의 경우 컴포넌트를 사용했을때 HTML 코드에서 화면의 구조를 직관적으로 파악할 수 있다

- 프레임 워크 자체에서 컴포넌트 방식을 추구하면 모두가 정해진 방식대로 컴포넌트를 활용하므로 빠르게 구현 가능하며 타인이 작성한 코드를 볼때도 수월해진다.

 

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

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

- 단방향 데이터 흐름 : 컴포넌트의 단방향 통신으로써 컴포넌트간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한방향으로만 전달하게끔 프레임워크가 구조화 되어 있는것

 

- 빠른 화면 랜더링을 위해 리액트의 가상 돔 렌더링 방식을 적용하여 사용자 인터랙션이 많은 요즘의 웹 화면에 적합한 동작 구조를 갖추고 있다.