vue.js
- 2014년 릴리즈를 시작으로 꾸준히 발전하고 있는 자바스크립트 프레임워크
- 컨트롤러 대신 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴
- 재사용이 가능한 UI들을 묶어서 사용 가능
특징
- MVVM 패턴을 사용합니다.
- Virtual DOM의 사용합니다.
- Angular, React에 비해 매우 작고 가벼우며 복잡도가 낮습니다.
- Template과 Componenet를 사용하여 재사용이 가능한 사용자 인터페이스를 묶고 View Layer를 정리하여 사용합니다.
MVVM 패턴
- Mode - View - ViewModel의 줄임말으로 로직과 UI의 분리를 위해 설계된 패턴
- 웹페이지는 돔과 자바스크립트의 연합으로 만들어지게 되는데 돔이 View 역할을 하고, 자바스크립트가 Model 역할을 한다.
- 뷰모델이 없는 아키텍처에서는 getElementById 같은 돔 API를 직접 이용해서 모델과 뷰를 연결해야 한다.
- 자바스크립트에서 컨트롤러 혹은 프리젠터 역할까지 함 —> 코드양이 증가하는 단점이 생김 (ex)데 제이쿼리를 이용해 돔에 데이터 뿌려주는 코드들
- 하지만 그것을 뷰모델이 대신 수행해 주는 것이 MVVM 모델이다. 뷰모델에 자바스크립트 객체와 돔을 연결해 주면 뷰모델은 이 둘간의 동기화를 자동으로 처리
가상돔
가상돔 기술은 리엑트가 렌더링 성능을 높이고자 사용하면서부터 유명해진 것 같다.
뷰에서도 렌더링 성능을 위해 가상돔을 사용하는데 코어 라이브러리단에서 직접 구현했다고 한다.
돔 요소가 많아지면 자바스크립트로 돔을 핸들링하는 일이 무거워진다. 그래서 돔과 비슷한 구조로 자바스크립트를 만든다. 이것은 진짜 돔과는 달리 메모리에 올라가있는 것이기 때문에 비교적 매우 빠른 성능을 보인다. 뷰js가 가상 돔을 수정하면 진짜 돔을 수정하는 것보다 빠르다. 뷰는 버추얼 돔이 변경될 때마다 진짜 돔과 비교해서 차이를 찾는다. 그 결과 차이난 부분의 돔만 수정하는 동작을 한다.
컴포넌트(Component)
- 화면에 비춰지는 뷰의 단위를 쪼개어 재활용이 가능한 형태로 관리하는 것이 컴포넌트입니다.
- Vue에서, 컴포넌트는 미리 정의된 옵션을 가진 Vue 인스턴스입니다.
- 전역 등록과 지역 등록 존재합니다.
Vue는 재사용이 가능한 컴포넌트로 웹 페이지를 구성할 수 있다.
Vue는 단일 파일 컴포넌트를 추천한다.
확장자가 vue인 파일로 컴포넌트를 만들고 HTML, 자바스크립트, CSS 코드로 구성한다. 이 부분이 꾀 놀라웠다. CSS까지 컴포넌트로 들어가 있다니! 게다가 이것은 상위 CSS의 영향도 받지 않는다고 하는데 빌드 시점에 고유한 셀렉터 이름으로 대체하는 방식을 사용하기 때문이다.
참고
- https://wikidocs.net/17701
- http://jeonghwan-kim.github.io/vue/2017/03/27/vue.html