[Vue.js] Vue.js 란?

소개

---

2014년 릴리즈를 시작으로 꾸준히 발전하고 있는 자바스크립트 기반 프레임워크이며, 
컨트롤러 대신 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인되었으며,
재사용이 가능한 UI들을 묶어서 사용할 수 있다.

 

 

도입 배경

---

JavaScript 코드와 화면이 계속 추가되면서 무거워지는 시스템을 관리하기 위해 프런트, 백엔드로 개발을 

나누고, 하나의 view 파일을 재사용하는 방식으로 관리하기 위해 도입.

 

특징

---

• MVVM  패턴 사용
• Virtual DOM 사용
• Angular, React에 비해 매우 작고 가벼우며 복잡도가 낮다.
• Component를 사용하여 재사용이 용이

 

MVVM 패턴

---

1. View 모델을 통해 양방향 데이터를 바인딩을 가능하게 한다.
2. 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식

웹페이지는 돔과 자바스크립트로 만들어지게 되는데 돔이 View 역할을 하고, 자바스크립트가 Model 역할을 하고,

뷰 모델이 없는 경우에는 직접 모델과 뷰를 연결해야 한다.

 

가상돔(Virtual DOM)

---

실제 DOM을 너무 많이 업데이트하는 비효율적인 연산을 줄이고자 만들어진 가상의 DOM이며, 메모리에 저장되어 사용됨. Virtual DOM은 노드의 변경 사항만을 DOM에서만 변경하고, 화면을 그리지 않아 빠르며, 데이터 변경이나 DOM 구조 변경에 대한 브라우저에서의 비효율적인 재렌더링 작업이 줄어든다.

 

 

컴포넌트(Component)

---

Vue 가장 강력한 기능 중 하나이며, 컴포넌트(Component)를 조합하여 화면을 구성할 수 있는 부록을 의미,

이를 활용하여 화면을 빠르게 구조화하여 일관적인 패턴으로 개발할 수 있으며, 코드량을 분산시킬 수 있고,

쉽게 이해하고 재사용할 수 있다.