반응형
Vue.js란?
2014년에 출시된 JavaScript 기반의 프론트엔드 프레임워크다. 컨트롤러 대신 뷰 모델을 가지는 MVVM(Model-View-ViewModel) 패턴을 기반으로 디자인 되었으며, 재사용이 가능한 UI들을 묶어서 사용할 수 있다.
Vue.js의 특징
- MVVM(Model-View-ViewModel) 패턴
- Virtual DOM 사용
- React, Angular에 비해 작고 가벼움
- Template와 Component를 사용하여 재사용이 가능한 사용자 인터페이스를 묶고 View Layer를 정리하여 사용
MVVM 패턴
화면을 모델(Model), 뷰(View), 뷰 모델(VewModel)로 구조화하여 개발하는 방식이다. 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지보수가 편하다.
- View: 사용자에게 보이는 화면
- DOM: HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
- DOM Listener: DOM의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
- Model: 데이터를 담는 용기 - 보통은 서버에서 가져온 데이터를 JavaScript 객체 형태로 저장
- Data Binding: View에서 표시되는 내용과 모델의 데이터를 동기화
- ViewModel: DOM Listener와 Data Binding을 제공하는 View와 Model의 중간 영역
Vue.js의 장점
- 배우기 쉽다.
- React나 Angular에 비해 성능이 좋고 빠르다.
- React(가상 돔 기반 렌더링)나 Angular의 장점(데이터 바인딩)을 모두 갖고 있다.
반응형
'웹_프론트엔드 > 로드맵 챌린지' 카테고리의 다른 글
Modern CSS - Styled Component (0) | 2022.02.18 |
---|---|
상태 관리 라이브러리 - Vuex (0) | 2022.02.17 |
상태 관리 프레임워크 - NgRx란? (0) | 2022.02.15 |
리액티브 프로그래밍 라이브러리 - RxJS란? (0) | 2022.02.14 |
프레임워크 - AngularJS와 Angular 2 (0) | 2022.02.11 |