[Vue.js] Vue.js란?

 

이번 글은 Vue.js에 대한 정의, 특징, 패턴 등의 글을 기록한다. SSAFY에서 Vue.js를 배워서 프로젝트를 진행했었는데, 다시 복기하는 차원에서 공부를 한다.

---

목차

1. Vue.js 란?
2. MVVM(Model - View - View Model)
3. Vue.js의 특징

---

1. Vue.js 란?

2014년 Evan You가 만들었으며, 보다 쉽고 효율적으로 서버에 대한 부담을 줄이고 프론트 단에서 Web UI 제어, Web Application 등을 개발할 수 있도록 해주는 JavaScript 프레임워크다. 이 Vue.js는 MVVM(Model - View - View Model) 패턴을 기반으로 디자인 되어 있으며, 재사용이 가능한 UI들은 묶어서 재사용할 수 있다.

---

2. MVVM(Model - View - View Model)

MVVM은 Model과 View, View Model로 구성이 되어 있으며, 우리가 흔히 Spring MVC 패턴에서 보이는 것과 같이, 컨트롤러(C) 대신 View Model로 변경된 개념이라고 볼 수 있다. View Model은 View가 필요로 하는 데이터와 이벤트를 담고 있는 컨테이너 개념이다.

 

 

즉, 위의 그림을 보면 MVVM은 Model, View, View Model로 구성되어 있는데, View와 Model 사이에 View Model이 위치하고 있어 Model에서의 비즈니스 로직과 데이터를 가지고 와서 처리를 한 후, View에 데이터 바인딩을 하여 사용자에게 보여준다. 여기서, View는 데이터 바인딩을 하기 때문에 View Model과의 결합이 느슨하여 종속성이 줄어 들고, UI 단과 로직 단의 분리를 상대적으로 명확하게 구분할 수 있다.

---

3. Vue.js의 특징

Vue.js의 특징은 아래와 같다.

 

1) AngularJS, ReactJS에 비해 상대적으로 작고 가볍고 복잡도가 낮다.

 

2) View 단에 초점을 맞춰 만들어진 프레임워크다.

-> 서버에 대한 부하를 줄이고, 눈에 보이는 UI 요소(View)에 초점을 맞춰 진행

 

3) 가상 DOM을 사용한다.

-> DOM이 View 역할을 하고, JavaScript가 Model 역할을 한다.

 

4) 데이터 바인딩을 사용한다.

 

5) 컴포넌트를 사용한다.

-> Vue.js에서 데이터 바인딩을 사용하는데, 여기서 공통된 것들이 있으면 컴포넌트화를 하고 이 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스라고 한다. 따라서, 이 컴포넌트는 전역과 지역으로도 나눌 수 있다.

 

6) 이벤트 핸들링을 사용한다.

 

7) 애니메이션 및 효과, 라우팅 등을 사용한다.

---

참고

https://wikidocs.net/17701#_1