1. Vue.js 란?
- 웹페이지 화면을 개발하기 위한 FE 라이브러리 및 프레임워크
- Angular의 장점인 데이터 바인딩, React의 장점인 가상 돔(Virtual DOM) 기반의 렌더링 특징을 모두 가짐
2. Vue.js의 특징
UI 화면단 라이브러리 : MVVM 패턴
- Vue.js 는 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리
- MVVM(Model - View - ViewModel) 패턴 : 프론트의 화면 동작과 백엔드의 데이터 베이스 데이터 처리 로직을 분리하여 코드를 구성하는 패턴
| 용어 | 설명 |
| 뷰(View) | 사용자에게 보이는 화면 |
| 돔(DOM) | HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리 |
| 돔 리스너(DOM Listener) | 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 |
| 모델(Model) | 데이터를 담는 용기. 보통 자바스크립트 객체 형태로 저장 |
| 데이터 바인딩(Data Binding) | 뷰(View) 에 표시되는 내용과 모델의 데이터를 동기화 |
| 뷰 모델(View Model) | 뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역 |
MVVM 구조의 처리 흐름
Google 창을 예시로 한 용어 설명
- View : 구글 화면
- DOM : 구글 로고, 검색 창, 키보드 마이크 아이콘 등
- 검색 버튼을 클릭했을 때, 돔 리스너(DOM Listner)가 버튼의 클릭을 감지하게 되면 검색 결과를 보여주는 로직이 처리됨
- 동시에 Data Binding이 일어나면서 검색 결과에 대한 데이터를 Model 에서 가져와 View 에 보여줌
컴포넌트 기반 프레임워크
- 컴포넌트 기반 방식을 사용하는 이유는 HTML 코드에서의 화면의 구조를 직관적으로 파악하고, 코드를 재사용하기 용이하기 때문
React와 Angular의 장점을 가진 프레임워크
- 단방향, 양방향 Data Binding을 결합한 프레임워크
- 단방향 : 컴포넌트 간 데이터 전달시, 항상 상위 컴포넌트에서 하위 컴포넌트로 한 방향으로만 전달
- 양방향 : View, Model 중 한 쪽 값이 변경되면 다른 한쪽도 자동으로 변경
- 가상 돔(Virtual DOM) 렌더링 방식
- 가상 돔을 활용하면 특정 돔 요소에 대한 변경이 일어날 때, 화면 전체를 그리지 않고 프레임워크에서 정의한 방식에 따라 렌더링
- 따라서 사용자에게 더 빠르게 화면을 보여줄 수 있음
Ref) Do it Vue.js 입문
