[do it! Vue.js 입문] 01. Vue.js 소개
1) Vue.js 소개
Vue.js란?
Vue.js는 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크
기존 웹 개발자뿐만 아니라 HTML, CSS, 자바스크립트 기초만 아는 웹 개발 입문자 및 컴퓨터 비전공자들도 배우기 쉬움
뷰는 화면단 라이브러리이자 프레임워크라고 볼 수 있음
뷰 코어 라이브러리 : 화면단 데이터 표현에 관한 기능들을 중점적으로 지원
+ 프레임워크 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공됨
즉, 라이브러리 역할뿐만 아니라 프레임워크 역할도 할 수 있다는 의미
뷰를 점진적인 프레임워크(progressive framework)로 부르고 있음
뷰의 장점
1) 배우기 쉬움
2) 리액트와 앵귤러에 비해 성능이 우수하고 빠름
3) 리액트의 장점과 앵귤러의 장점을 가짐 : 앵귤러의 데이터 바인딩 특성 + 리액트의 가상 돔(Virtual DOM)기반 렌더링 특징을 모두 가짐
2) Vue.js의 특징
UI 화면단 라이브러리
뷰는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리
MVVM 패턴 : 모델(Model) - 뷰(View) - 뷰모델(ViewModel)로 구조화하여 개발하는 방식
화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 유지보수가 편해짐
| 용어 | 설명 |
| 뷰 ( View ) | 사용자에게 보이는 화면 |
| 돔 ( DOM ) | HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리 |
| 돔 리스너 ( DOM Listener ) | 돔의 변경 내역에 대해즉각적으로 반영하여 특정 로직을 수행하는 장치 |
| 모델 ( Model ) | 데이터를 담는 용기. 보통은서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장 |
| 데이터 바인딩 ( Data Binding ) | 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화 |
| 뷰 모델 ( ViewModel ) | 뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역 |
컴포넌트 기반 프레임워크
뷰의 특징 : 컴포넌트(Component) 기반 프레임워크
컴포넌트란 마치 레고 블록과 같음. 레고 블록을 잘 조합해서 쌓으면 원하는 모형을 만들 수 있듯이, 뷰의 컴포넌트를 조합해 화면을 구성할 수 있음
왼쪽 => 각 영역을 컴포넌트로 지정하여 구분한 것
오른쪽 => 각 컴포넌트 간의 관계를 나타낸 것
컴포넌트 기반 방식으로 개발하는 이유 : 코드를 재사용하기 쉽기 때문
리액트와 앵귤러의 장점을 가진 프레임워크
뷰 : 앵귤러 양방향 데이터 바인딩의 장점 + 리액트의 단방향 데이터 흐름의 장점 모두 결합
양방향 데이터 바인딩 : 화면에 표시되는 값과 프레임워크 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경
단방향 데이터 흐름 : 컴포넌트의 단방향 통신을 의미. 컴포넌트 간에 데이터를 전달할 때 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 구조화되어 있는게 단방향 데이터
가상 돔 렌더링 방식 : 빠른 화면 렌더링을 위함. 가상돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신함 => 브라우저 입장에서 성능 부하가 줄어 일반 렌더링보다 빠르게 화면을 그릴 수 있음