[Vue.js] Vue.js 란?

1. Vue.js 란

• Vue.js는 MVVM(Model-View-ViewModel)을 기반으로 설계된 프론트엔드 프레임워크입니다.

2. Vue.js의 장점

• UI를 Component 단위로 개발하여, 기능의 재사용이 쉽습니다. 
• 가상 돔(Virtual DOM)을 사용하며, 다른 프론트엔드 프레임워크와 비교했을 때, 상대적으로 가볍고 빠릅니다.
• 문법이 직관적이고 단순해서 초기 학습 비용이 낮습니다.
• 다양한 모듈(vuex, vue-router, vue-validator, vue-resource...)를 제공합니다.

3. MVVM 패턴이란?

출처 : https://docs.microsoft.com/en-us/xamarin/xamarin-forms/enterprise-application-patterns/mvvm

MVVM 패턴은 페이지를 Model, View, ViewModel 단위로 분리해서 단위 별로 의존성을 줄이고, 화면 처리에 초점을 맞춘 개발 패턴입니다.

자세한 내용은 아래 링크를 이용해주세요.

2020/05/09 - [IT/디자인 패턴] - MVVM 패턴이란?

4. 가상 돔 (Virtual DOM)

돔은 트리 구조로 되어있고, 돔을 탐색하여 웹 페이지의 내용을 추가, 수정, 삭제할 수 있습니다. 돔을 이용해서 웹 페이지를 갱신하는 것은 쉽지만, 화면을 그리는 코드가 복잡해질수록 돔 트리의 Depth가 깊어지기 때문에 탐색 비용이 높아집니다.  

하지만 가상 돔(Virtual DOM)을 이용하면 불필요한 작업을 줄여서 효율적으로 화면을 렌더링할 수 있습니다.
그리고 가상 돔은 돔 관리를 자동화하고 추상화하여 개발자가 돔을 조작하지 않아도 되게 합니다.

결과적으로 가상 돔을 이용하면 성능뿐만 아니라 유지보수성도 향상 시킬 수 있습니다.