[Vue] Vue.js 소개

 

Vus.js 란

Vue.js는 웹 페이지 화면을 개발하지 위한  Javascript 언어 기반의 Front-end Framwork 이다.  

 

Vue.js 의 장점

• UI를 Component 단위로 개발하여, 기능의 재사용이 쉽다.
• SPA (Single Page Applicatioin, 단일 페이지 어플리케이션) 구성을 위해 필요한 라우터기능도 지원한다.
• Angular, React에 비해 매우 작고 가벼우며 복잡도가 낮다.
• Angular의 양방향 데이터 바인딩과 React의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크이다.
  • 양방향 데이터 바인딩이란 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화 되어 한쪽이 변경되면 다른 한쪽도 자동으로 값이 변경되는 것을 의미한다.
  • 단방향 데이터 흐름은 컴포넌트의 단방향 통신을 의미한다, 즉 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화 되어 있는 것을 말한다.

 

MVVM 패턴

Vue.js는 UI 화면 개발 방법 중 하나인 MVVM(Model-View-ViewModel) 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다.

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

뷰모델이 없는 경우에는 직접 모델과 뷰를 연결해야 한다. 그러나 뷰모델이 중간에서 연결해 주는 것이 MVVM 모델이다.

 

가상 돔 (Vitual DOM)

돔 요소가 많아지면 자바스크립트로 돔을 핸들링하는 일이 무거워진다. 그래서 돔과 비슷한 구조로 자바스크립트를 만듭니다. 이것은 진짜 돔과는 달리 메모리에 올라가있는 것이기 때문에 비교적 매우 빠른 성능을 보인다. Vue js가 가상돔을 수정하면 돔을 수정하는 것보다 빠르다. Vue는 가상돔이 변경될 때마다 진짜 돔과 비교해서 차이를 찾고 차이난 부분의 돔만 수정하는 동작을 하게 된다. 결과적으로 가상 돔을 이용하면 성능 뿐만 아니라 유지보수성도 향상 시킬 수 있다.

 

컴포넌트 (Component)

화면에 비춰지는 뷰의 단위를 쪼개어 재활용이 가능한 형태로 관리하는 것이 컴포넌트 이다.

Vue에서 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스이다.

컴포넌트는 전역 등록과 지역 등록이 존재한다.

 

Vue는 재사용이 가능한 컴포넌트로 웹 페이지를 구성할 수 있다.

확장자가 .vue인 단일 파일에 HTML, JAVASCRIPT, CSS 코드로 구성하여 사용한다.