Vue.js란?
웹페이지의 화면 개발을 하기 위해 나온 프론트엔드 프레임워크이다.
Evan You에 의해 Vue.js가 탄생을 하게 되었다.
Evan Yoo는 Angular.js(또 다른 프론트엔드 프레임워크)의 명시적 데이터 바인딩과 같은 필수적인 요소들만 가지고 화면을 구현하기 시작했고 오픈 소스화 하면서 많은 사람들이 참여하여 프레임워크 기능을 붙여나가면서 Vue.js가 탄생하게 되었다.
Vue.js 장점
1. React.js, Angular.js에 비해 배우기가 쉽다.
Angular.js는 1(mvc 구조)에서 2(Component 기반)로 진화하면서 Typescript, ES6 등의 학습이 필요하게 되었고, React.js는 입문자가 하기엔 어려울 수 있는 ES6, JSX 등의 장벽이 존재하지만 Vue.js는 이러한 장벽이 존재하지 않는다. (그래도 ES6를 알면 개발하는데 확실히 편하다.)
2. React.js와 Angular.js에 비해 성능이 우수하고 빠르다.
Vue.js 제작팀에서는 같은 test case에서 성능을 비교해본 결과 vue.js가 더 빠르다 판단했다.
3. React.js 장점과 Angular.js 장점을 가지고 있다.
Angular.js의 데이터 바인딩 특성과 React.js의 가상 DOM (virtual DOM) 기반 렌더링 특징을 모두 가진다.
Angular.js의 양방향 데이터 바인딩
화면에 표시되는 값과 프레임워크의 값이 동기화되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경된다.
React.js의 단방향 데이터 흐름
컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화되어 있다.
Angular.js + React.js = Vue.js
빠른 화면 렌더링을 위해 React.js의 가삼돔 렌더링 방식을 적용하여 사용자 인터렉션이 많은 요즘의 웹 화면에 적합한 동작구조이다.
가상돔을 활용하면 특정 돔 요소에 변경이 일어날 때 화면을 다시 그리지않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다.
브라우저 입장에서는 성능 부하가 줄어들어 일반 렌더링 방식보다 빠르게 화면 그리기가 가능하다.
Vue.js 특징
MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다.
뷰(View): 화면의 요소가 변경되거나 조작이 일어날 때 즉각적으로 반응하여 화면의 데이터를 갱신하여 보여주는 역할 (예를 들어 쇼핑몰의 물건 수량을 추가 구매 하고 싶어서 버튼을 누르면 1이 2로 변하는 현상)
돔(DOM): HTML 문서에 들어가는 요소의 정보를 담고 있는 데이터 트리 (HTML 태그들의 속성, 옵션)
돔 리스너(DOM Listener): 돔의 변경 내역에 대해 즉각적을 반응하여 특정로직을 수행하는 장치 (돔과 관련된 데이터에 변화가 있으면 그에 맞는 로직이 실행됨)
모델(Model): 데이터를 담는 용기 보통은 서버에서 가져온 데이터를 자바스크립트 객체형태로 저장 (서버에서 통신을 하면 데이터가 객체({}) 형식으로 담기는걸 볼 수 있다.)
데이터 바인딩(Data Binding): 뷰에 표시되는 내용과 모델의 데이터 동기화
뷰 모델(View Model): 뷰와 모델의 중간영역 돔 리스너와 데이터 바인딩을 제공하는 영역
MVVM 패턴이란?
MVVM(Model-View-View Model)로 구조화하여 개발하는 방식이다.
프론트엔드의 화면동작과 관련된 로직과 백엔드의 데이터베이스 데이터 처리로직을 분리하여 더 깔끔하게 코드를 구성하는 소프트웨어 디자인패턴이다.
요즘은 배울게 너무 많고 요구하는것도 많아지다 보니 프론트엔드(Front-end)와 백엔드(Back-end)가 나누어졌기도 하다. 인간은 욕심쟁이얌 흑흑
MVVM 구조와 처리흐름
위 사진을 간단히 정리한다면
검색하고 싶은 값을 입력하면 검색 이벤트의 로직이 실행되고, 데이터 바인딩(Data Binding)을 통해 다시 화면에 원하는 결과값을 얻을 수 있다.
컴포넌트 기반 프레임워크
각 영역을 컴포넌트로 지정하여 구분한 것을 각 컴포넌트의 관계별로 그린 것이다.
컴포넌트 기반 방식으로 개발하는 이유는?
코드 재사용이 용이하다.
뷰의 경우, 컴포넌트를 HTML 코드에서 화면의 구조를 직관적으로 파악하므로 프레임워크 자체에서 컴포넌트 방식을 추구하면 모두가 정해진 방식대로 컴포넌트를 활용하므로 빠르게 구현할 수 있을 뿐 아니라 남이 작성한 코드를 볼 때에도 수월하다.
