Vue 입문

Vue란?

• UI를 빠르게 개발하기 위해서 만들어진 자바스크립트 프레임워크
• MVVM(Model-View-ViewModel) 패턴을 따르며, 어플레케이션 로직과 UI 분리를 위해 설계
• Angular.js나 React.js보다 알려지지는 않았지만 최근 급속도로 확산되고 있고, 실제 Google Trends의 검색어 비율과 GitHub에서 Vue.js의 관심이 크게 올라감
• 자바스크립트 프레임워크 트렌드 실시간 보기
• Vue.js 공식사이트

Vue의 특징

• 키보드 입력 또는 마우스 클릭 등과 같은 이벤트 발생 시 DOM Listener가 이벤트를 잡아서 자바스크립트의 이벤트를 변경해준다.
• 이벤트가 변경되면 Data Bindings를 이용하여 자바스크립트의 데이터가 변경되어 화면까지 동시에 반영된다.

Vue의 장점

• 다른 프레임워크와는 달리 유연하고 가볍고, 학습곡선이 낮다.
• 컴포넌트 기반의 프레임워크이고 DOM을 작은 단위로 쪼개어 개발하는 방식(최신개발동향)으로 유지보수와 재사용성이 높다.
• Angular.js와 달리 전체 아키텍처를 새롭게 구성할 필요가 없고 기존의 웹 어플리케이션의 일부 UI만 적용하는 것도 가능
• SPA(Single Page Application: 단일 페이지 어플리케이션) 구성을 위해 필요한 라우터 기능도 지원
• React.js와 마찬가지로 가상 DOM을 지원하여 빠른 UI렌더링이 가능
• MVVM 패턴으로 기존 jQuery를 통한 DOM 조작이 더이상 필요하지 않다.

* Vue는 React와 Angular의 장점을 가진 프레임워크

Vue는 Angular의 양방향 데이터 바인딩과 React의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크.
양방향 데이터 바인딩이란? 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화 되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것을 의미.
단방향 데이터 바인딩이란? 컴포넌트 단방향 통신을 의미하고 컴포넌트 간 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 방향으로 전달하게끔 구조화 되어있는 것을 의미.