Vue.js - #1 기본

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

 

일반적으로 우리는 프레임워크를 개발 생산성을 높이기 위해 일정한 규칙에 따라 개발하도록 구조를 정해놓은 도구,

 

즉, 해당 프레임워크에 정의된 대로 개발할 때 프레임워크라고 하고,

 

자주 사용되는 기능을 모아 재활용할 수 있도록 정리한 것을 라이브러리라고 한다.

 

Vue.js의 코어 라이브러리는 화면단 데이터 표현에 관한 기능을 중점적으로 제공하지만,

 

프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공이 된다.

 

참고로, 공식 사이트에서는 뷰를 점진적인 프레임워크(progressive framework)라고 정의하고 있다.

 

뷰가 가진 장점은 다음과 같다.

 

1) 배우기 쉽다. HTML, CSS, JS를 조금만 다뤄봤어도 배우기 용이하다.

2) 리액트, 앵귤러에 비해 성능이 우수하고 빠르다.

3) 리액트의 장점(가상 돔, Virtual DOM) + 앵귤러의 장점(데이터 바인딩 특성)을 갖고 있다.

 

+ 실질적으로 나 또한 HTML, JS, CSS를 조금 다뤄봤고, 전문 프론트엔드 개발자는 아니므로 화면 단 구성을 위해

ES6(ECMAScript 2015), TypeScript, 웹팩 등을 구지 알아야 할 필요성은 없어서 가벼운 마음으로 시작해볼만 하다고 생각했다!!

 

이어서, 뷰는 MVVM 디자인 패턴의 뷰 모델에 해당하는 화면 단 라이브러리이다.

 

MVVM 패턴이란 화면을 모델(Model) - 뷰(View) - 뷰 모델(View Model)로 구조화하여 개발하는 방식이다.

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

즉 남이 쓴 코드 보기도 쉽고 남이 내 코드를 보기도 쉽다는 말씀!

 

여기서 용어정리

 

뷰 (View) : 사용자에게 보이는 화면

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

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

모델 (Model) : 데이터를 담는 용기, 보통 자바스크립트 객체 형태로 저장

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

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

 

+ 즉, 돔은 HTML 문서의 요소를 담고 있는 트리이며, 돔 리스너는 돔 안에서 일어나는 변경, 즉 클릭 이벤트 같은 것을 감지하고 로직을 수행하는 것이다. 모델은 특정 데이터를 담고 있고, 뷰에서 표현되기 전에 뷰 모델이라는 중간 영역에서 데이터 바인딩을 통해 데이터의 변경사항이 있으면 변경하고 뷰에서 표현되던지 할 것 같다.

 

뷰의 두 번째 특징은 컴포넌트 기반 프레임워크라는 것이다.

컴포넌트 그 말 자체와 같이, 화면단을 원하는 요소들로 조립하는 것이다.

일반적으로 우리가 Header, Content, Footer 그리고 Content 안에는 Aside, List를 넣는 구조를 만들었다면,

각 컴포넌트의 관계는 아래와 같다.

                                Root

                  Header   Content  Footer

                            Aside    List

 

그림에는 능숙하지 않아서....

Root가 최상위라면, 그 하위로 Header, Content, Footer가 트리형태로 연결되어있고,

Content의 하위로 Aside, List가 트리 형태로 연결되어 있는 것이다.

만약 이렇게 된다면, 어떤 컴포넌트를 수정할 때 하나의 컴포넌트를 쉽게 찾아 수정하기도 용이할 것 같다.

 

뷰의 세 번째 특징은 리액트 + 앵귤러의 장점을 가졌다는 것!

앵귤러의 양방향 데이터 바인딩(Two-way Data Binding)처럼 화면에 표시되는 데이터 값과 프레임워크의 모델 데이터 값이 동기화되어 한 쪽이 변경되면 다른 쪽도 변경되고, 리액트의 단방향 데이터 흐름(One-way Data Flow)처럼 컴포넌트의 단방향 통신이 이루어진다. 즉, 항상 상위에서 하위 컴포넌트로 데이터가 전달된다는 뜻이다.

 

마지막으로, 가상 DOM 렌더링 방식이다.

리액트의 가상 돔처럼 빠른 화면 렌더링이 가능하며, 사용자 인터렉션이 많은 웹 화면에 적합한 동작 구조를 갖추고 있다. 즉, 돔 구조에서 특정 돔 요소가 변경사항이 생기면, 화면 전체를 다시 렌더링하는 것이 아니라 프레임워크에서 정의한 방식에 따라 화면을 갱신하게 된다.

 

이렇게 가상 DOM 렌더링 방식이나, 데이터 바인딩이란 부분이 맘에 들어서 난 뷰를 시작해보려고 한다..!!