[Vue.js] Vue.js 소개

Vue.js란 무엇인가?

---

Vue.js란?

---

Vue.js는 웹 페이지 화면을 개발하기위한 프론트엔드 프레임 워크이다.

뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원한다. 하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공한다. 즉, 라이브러리 뿐 아니라 프레임 워크의 역할도 수행할 수 있다는 것이다. 따라서 뷰를 점진적 프레임워크(Progressive framework)라고 한다. 

 

 

Vue의 특징

---

1. MVVM 패턴의 뷰 모델

- View: 사용자에게 보이는 화면

- DOM: HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리

- DOM Listener: 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치

- Model: 데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 자바스크립트 객체로 저장

- Data Binging: 뷰에 표시되는 내용과 모델의 데이터를 동기화

- ViewModel: 뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역

 

MVVM 패턴은 모델 - 뷰 - 뷰 모델로 구조화하여 개발하는 방식을 말한다.  화면 요소 제어와 데이터 제어 로직을 분리하여 코드를 직관적으로 이해할 수 있고, 유지 보수가 편해진다.

 

2. 컴포넌트 기반 프레임워크

레고처럼 뷰의 컴포넌트를 조합하여 화면을 구성할 수 있다. 컴포넌트 기반 방식으로 개발하여 코드를 재사용하기 쉽다.

3. 리액트 장점 + 앵큘러 장점

앵귤러의 양방향 데이터 바인딩과 리액트의 단방향 데이터 흐름의 장점을 모두 결합한 프레임 워크이다.

 

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

 

- 단방향 데이터 흐름: 컴포넌트간 데이터 전달 시, 상위 -> 하위 컴포넌트로 항상 데이터 전달.

 

리액트의 가상 돔 렌더링 방식을 적용하여 빠르게 렌더링이 가능하다.