Vue.js란?

Vue.js란?

 웹 페이지 화면을 개발하기 위한 프레임워크로 React와 Angular의 장점을 가져 성능이 우수하고 가볍습니다.

 

Vue.js와 다른 프레임워크 비교표

	Vue.js	React	Angular
Virtual DOM	O	O	X
장점	쉬움, React와 Angular의 장점 적용	이벤트 핸들링 용이, 다양한 플랫폼 개발 가능, 페이스북 지원	잘 된 구조화, 구글지원
단점	래퍼런스가 적음	필수 라이브러리 많음, JSX에서 로직구현	높은 러닝커브(많은 학습시간)
환경	빠른 개발 요구 시	많은 이벤트 필요시	엔터프라이즈
언어	ES6	JSX	TypeScript

 

Vue.js 특징

• MVVM 패턴
• Virtual DOM
• 가벼움
• Template과 Component

 

MVVM 패턴

Vue MVVM 패턴

 MVVM(Mode - View - ViewModel) 패턴은 로직과 UI의 분리를 위해 설계된 패턴입니다. 웹페이지는 DOM과 자바스크립트로 만들어지고 DOM은 View, 자바스크립트는 Model 역할을 맡습니다. 중간에서 연결해주는 것이 ViewModel 역할이며 ViewModel을 가진 이 패턴이 MVVM 패턴입니다.

Virtual DOM

 DOM요소가 많아지면 자바스크립트를 이용해 핸들링하는 것이 무거워집니다. 이것을 방지하기 위해 Virtual DOM을 만들고 이것이 변경될 때마다 DOM과 비교해 차이점만 반영하는 원리로 Virtual DOM이 DOM과 달리 메모리에 올라가있어 비교적 빠른 성능을 보입니다.

컴포넌트(Component)

Vue Component

 View의 단위를 쪼개 재활용가능한 형태로 만든 것이 컴포넌트입니다. 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스입니다. 컴포넌트는 전역 등록과 지역 등록으로 나눠집니다.

 

Vue.js의 라이프사이클

Vue의 라이프사이클

Vue 바인딩

 Vue에는 단방향 바인딩과 양방향 바인딩이 있다. 

단방향 바인딩에는 한쪽으로만 데이터를 보낼 수 있는 것으로 v-on(@), v-bind(:) 가 있다.

양방향 바인딩은 데이터가 양쪽으로 서로 보낼 경우를 의미한다. 대표적인 지시어로 v-model이 있다. 데이터모델이 변경될 시 자동으로 UI가 변경된다.

 

 여담으로 필자는 가이드 문서를 보다가 오타를 발견하여 pull request를 요청하였고 개발자 한 분이 고맙다며 코멘트를 달아 주셨다(뿌듯). 회사에 처음 들어와 Vue.js를 접하게 되었는데 서비스 앱이 Vue.js를 이용해 SPA 구조로 개발되었기 때문이다. 직접 Vue.js를 사용해보니 장점대로 가이드 문서만 보아도 사용하기 쉬운 프레임워크였으며 UI와 분리되어 쓸 수 있는 장점도 느꼈다. 그럼 포스팅을 마친다.

---

오늘 성장에 도움을 주신 개발자분

출처 : vue-js.kr 가이드 문서 https://github.com/vuejs-kr/kr.vuejs.org

출처 : https://wikidocs.net/17701

감사합니다.