뷰 Vuejs란?

Vuejs란? 

대화형 웹 프론트엔드를 쉽게 구축할 수 있게 하는 Javascript 프레임 워크.

UI를 빠르게 개발하기 위해서 만들어진 자바스크립트 프레임워크.

MVVC (Model-View-ViewModel) 패턴을 따르며, 어플리케이션 로직과 UI 의 분리를 위해 설계되었다.

Angular.js나 React.js보다 많이 알려지지 않았지만 급속도로 확산하고 있다.

 

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

 

Vuejs의 장점

유연하고 가볍다.

Angular js와는 달리 전체 아키텍쳐를 새롭게 구성할 필요 없이 기존 웹 어플리케이션의 일부 UI만 적용이 가능하다.

SPA - Single Page Application 단일 페이지 어플리케이션 구성을 위해 필요한 라우터 지원.

React.js와 마찬가지로 가장 돔(DOM)을 지원하여 빠른 UI 랜더링이 가능하다.

 

Vue는 Anglar와 React의 장점을 가지는 프레임 워크라고 할 수 있다.

Vue는 Angular의 양방향 데이터 바인딩과, React의 단방향 데이터 흐름의 장점을 모두 결합.

 

* 양방향 데이터 바인딩?

 - 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화 되어 한쪽이 변경되면 다른 한쪽도 자동 변경됨.

* 단방향 데이터 바인딩?

 - 컴포넌트 단방향 통신을 의미하는데 컴포넌트 간 데이터를 전달할 때 항상 상위컴포넌트에서 하위컴포넌트 방향으로 전달하도록 구조화 되어 있는 것을 의미. 

 

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

가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때

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

따라서 브라우저 입장에서는 부하가 줄어들어 일반 렌더링 방식보다 더 빠르게 화면을 그릴 수 있다.