[Vue.js] Vue.js란 무엇인가?

 📝 Vue.js 란?

• 뷰는 UI화면 개발 방법 중 하나인 MVVM패턴의 뷰 모델에 해당하는 화면 단 라이브러리이다.
• MVVM패턴이란 모델(MODEL) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식을 의미한다.
• 이러한 방식으로하는 이유는 화면 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지보수가 편해지기 때문이다.
• 양방향 데이터 바인딩과 단방향 데이터 흐름을 가지고 있다.
• 양방향 데이터 바인딩이란 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것이다.
• 단방향 데이터 흐름은 컴포넌트의 단방향 통신을 의미하는데 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게 끔 프레임워크가 구조호되어 있는게 바로 단방향 데이터 흐름이다.

 

• Model - View - ViewModel 의 줄임말로 로직과 UI의 분리를 위해 설계된 패턴이다.
• 웹페이지는 DOM과 자바스크립트로 만들어지게 되는데 돔이 VIEW 역할으 하고, 자바스크립트가 Model 역할을 한다.
• 뷰모델이 없는 경우에는 직접 모델과 뷰를 연결해야 한다.
• 뷰모델이 중간에서 연결해 주는 것이 MVVM 모델이다.

 📝 가상돔(Virtual Dom)

• 가상 돔(Virtual DOM) 렌더링 방식을 적용하여 특정 돔 요소를 추가하거나 삭제할 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다. 
• 즉, 브라우저에서 성능부하가 줄어들어 일반 렌더링 방식보다 속도가 빠르다.
• 돔 요소가 많아지면 자바스크랩트로 돔을 핸들링하는 일이 무거워 진다. 그래서 돔과 비슷한 구조로 자바스크립트를 만든다.
• 이거은 진짜 돔과는 달리 메모리에 올라가있는 것이기 때문에 빠른 성능을 보인다.
• https://medium.com/js-dojo/whats-new-in-vue-js-2-0-virtual-dom-dc4b5b827f40