프레임워크 - Vue.js

Vue.js란?

2014년에 출시된 JavaScript 기반의 프론트엔드 프레임워크다. 컨트롤러 대신 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인 되었으며, 재사용이 가능한 UI들을 묶어서 사용할 수 있다.

 

Vue.js 로고

 

Vue.js의 특징

• MVVM(Model-View-ViewModel) 패턴
• Virtual DOM 사용
• React, Angular에 비해 작고 가벼움
• Template와 Component를 사용하여 재사용이 가능한 사용자 인터페이스를 묶고 View Layer를 정리하여 사용

 

 

MVVM 패턴

화면을 모델(Model), 뷰(View), 뷰 모델(VewModel)로 구조화하여 개발하는 방식이다. 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지보수가 편하다.

MVVM 패턴

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

 

Vue.js의 장점

1. 배우기 쉽다.
2. React나 Angular에 비해 성능이 좋고 빠르다.
3. React(가상 돔 기반 렌더링)나 Angular의 장점(데이터 바인딩)을 모두 갖고 있다.