[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 구조에서의 Vue.js 위치

MVVM 패턴 : 모델(Model) - 뷰(View) - 뷰모델(ViewModel)로 구조화하여 개발하는 방식

화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 유지보수가 편해짐

용어	설명
뷰 ( View )	사용자에게 보이는 화면
돔 ( DOM )	HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
돔 리스너 ( DOM Listener )	돔의 변경 내역에 대해즉각적으로 반영하여 특정 로직을 수행하는 장치
모델 ( Model )	데이터를 담는 용기. 보통은서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
데이터 바인딩 ( Data Binding )	뷰(View)에 표시되는 내용과 모델의 데이터를 동기화
뷰 모델 ( ViewModel )	뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역

 

컴포넌트 기반 프레임워크

뷰의 특징 : 컴포넌트(Component) 기반 프레임워크

 

화면을 컴포넌트로 구조화한 컴포넌트 간 관계도

 

컴포넌트란 마치 레고 블록과 같음. 레고 블록을 잘 조합해서 쌓으면 원하는 모형을 만들 수 있듯이, 뷰의 컴포넌트를 조합해 화면을 구성할 수 있음

왼쪽 => 각 영역을 컴포넌트로 지정하여 구분한 것

오른쪽 => 각 컴포넌트 간의 관계를 나타낸 것

컴포넌트 기반 방식으로 개발하는 이유 : 코드를 재사용하기 쉽기 때문

 

리액트와 앵귤러의 장점을 가진 프레임워크

뷰 : 앵귤러 양방향 데이터 바인딩의 장점 + 리액트의 단방향 데이터 흐름의 장점 모두 결합

양방향 데이터 바인딩 : 화면에 표시되는 값과 프레임워크 모델 데이터 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경

단방향 데이터 흐름 : 컴포넌트의 단방향 통신을 의미. 컴포넌트 간에 데이터를 전달할 때 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 구조화되어 있는게 단방향 데이터

가상 돔 렌더링 방식 : 빠른 화면 렌더링을 위함. 가상돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신함 => 브라우저 입장에서 성능 부하가 줄어 일반 렌더링보다 빠르게 화면을 그릴 수 있음