01. Vue.js 소개

웹 개발을 위한 간단한 뷰 개념 정리

 

Vue.js란?

---

Vue.js란?

 

"웹 페이지 화면을 개발하기 위한 프런트엔드(프로세스 단계)의 프레임워크(뼈대)"

 

*프런트엔드 :  프로세스의 처음과 마지막 단계

*프레임워크 : 뼈대나 기반구조를 뜻하고, 제어의 역전 개념이 적용된 대표적인 기술

 

 

뷰의 장점

 

• 배우기가 쉽다
• 성능이 우수하고 빠르다
• 리액트의 가상돔(virtual DOM)기반 렌더링 특징과 앵귤러의 데이터 바인딩 특성을 모두 가지고 있다.

 

Vue.js의 특징

---

UI 화면단 라이브러리

 

뷰(Vue.js)는 UI화면 개발 방법 중 하나인 MVVM패턴의 뷰 모델(ViewModel)에 해당하는 화면단 라이브러리입니다.

 

*MVVM : 화면을 Model - View - ViewModel 로 구조화하여 개발하는 방식

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

 

*뷰 : 사용자에게 보이는 화면

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

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

*모델 : 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장

*데이터 바인딩 : 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화

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

 

 

컴포넌트 기반 프레임워크

 

뷰는 컴포넌트 기반의 프레임워크라서

레고블럭(컴포넌트)을 조립하는 것 처럼 뷰로 원하는 화면을 구성할 수 있습니다.

 

장점

• 코드를 재사용 하기 쉽다
• HTML코드에서 화면의 구조를 직관적으로 파악할 수 있다

즉, 빠른 구현과 코드 공유가 쉬워진다

 

 

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

 

뷰(Vue.js)는 

양방향 데이터 바인딩(앵귤러)

단방향 데이터 흐름(리액트)

두가지 장점을 모두 결합한 프레임워크이다.

 

+) 가상 돔 렌더링 방식(리액트)

을 적용하여 빠른 렌더링이 가능하다.

 

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

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

*가상 돔 : 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다.

*렌더링 : 브라우저에 웹 페이지를 그려내는 동작