[기초]#2 Vue.js가 무엇인가?

Vue.js 는 웹 페이지 화면을 개발하기 위한 Front-end Framework

(점진적인 Framework로서의 Vue의 의미)

위 그림은 Vue의 창시자인 에반 유가 2017년 Vue.js 컨퍼런스에서 발표한 내용 중에 있는 그림이다. Vue 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다. 즉, 라이브러리 역할뿐만 아니라 프레임워크 역할도 할 수 있다는 의미이다. 그래서 Vue를 점진적인 프레임워크라고 표현한다.

1. Vue 의 장점

첫째, 쉽다.

예)

html

<div id="app">
  {{ message }}
</div>

 

 

cdn 선언

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

 

javascript

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
});

 

reulst

Hello Vue.js!

 

Vue가 여타 Front-end Framework보다 배우기 쉬운 이유

Angular1은 Framework로서 완전한 기능을 제공하는 MVC 구조로 출발하여 컴포넌트 기반의 Angular2로 진화했다. 이 과정에서 TypeScript, ES6 등 기타 어느 Framework보다 더 많은 학습이 필요하게 된다. React 또한 ES6, JSX라는 장벽이 존재하며, 신기술이 끝없이 등장하는 상황에서 웹 개발자에게 주어지는 짐은 점점 더 무거워진다. 따라서 쉽게 배울 수 있는 Vue의 등장으로 소규모 혹은 신규 프로젝트가 진행되는 곳에서는 Vue의 사용이 많아지고 있다.

 

둘째, React나 Angular에 비해 성능이 우수하고 빠르다.

Vue 제작팀에서 React와 Angular를 가지고 같은 테스트 케이스에서 성능을 비교한 결과 뷰가 가장 빠른 것으로 나타남.

 

셋째, React와 Angular의 장점을 모두 갖고있다.

Vue는 구글에서 일하던 직원이 Angular를 더 가볍게 쓰고 싶어서 만든 Framework다. Angular의 데이터 바인딩 특성과 React의 가상 돔 기반 랜더링 특징을 모두 가지고 있다.

 

2. Vue 의 특징

1. UI 화면단 라이브러리

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

(MVVM 구조에서의 Vue.js의 위치)

MVVM 패턴이란? 화면을 모델 - 뷰 - 뷰모델 로 구조화하여 개발하는 방식이다. 이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적이고 유지보수가 편하다.

 

<용어설명>

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

 

2. 컴포넌트 기반 프레임워크

Vue가 가지는 또 하나의 큰 특징은 컴포넌트(Component)기반 프레임워크다.

컴포넌트란 마치 레고 블럭과 같다. 레고 블럭을 잘 조합하면 여러가지 원하는 모형을 만들 수 있고 필요할 때 마다 만들어 놓은 레고 블럭들 끼리 조합 할 수 있다. 이와 같이 각 영역을 구분지어 관계를 형성해 놓으면 코드를 재사용하기 쉽다. 따라서 프레임워크 자체에서 컴포넌트 방식을 추구하면 모두가 정해진 방식대로 컴포넌트를 활용할 수 있으므로 빠르게 개발할 수 있을 뿐만 아니라 남이 작성한 코드를 볼 때도 수월하다.

 

 

출처 http://wiki.sys4u.co.kr/pages/viewpage.action?pageId=8552708