[도서] Do it! Vue.js - Vue.js 소개

Do it! Vue.js 입문 도서를 읽고 중요한 부분만 정리합니다!
구매링크: http://www.yes24.com/Product/Goods/58206961
참고링크: http://wiki.x2bee.com/pages/viewpage.action?pageId=8552708

Vue.js란 무엇일까?

웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크
웹 개발 입문자 및 비전공자들도 배우기 쉽게 만들어졌다.

점진적인 프레임워크, 뷰

뷰 코어 라이브러리는 화면단 데이터 표현 기능들을 중점적으로 지원하지만, 프레임워크 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다.

= 점진적인 프레임워크란 '라이브러리 + 프레임워크 기능을 겸한다'라는 의미

뷰의 장점은?

1. 배우기가 쉽다.
2. 리액트와 앵귤러에 비해 성능이 우수하고 빠르다.
3. 리액트의 장점인 가상 돔 기반 렌더링과 앵귤러의 장점인 데이터 바인딩 특성을 모두 가지고 있다.

그럼 왜 Vue.js를 쓰는거지? (특징)

1. UI화면단 라이브러리

뷰는 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다.

MVVM이란? (Model - View - View Model)

마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴

사용 시 화면의 요소들을 제어하는 코드와 로직을 분리하여 코드를 직관적으로 이해할 수 있다.

• 뷰: 사용자에게 표시되는 화면
• 뷰 모델: 돔 리스터와 데이터 바인딩을 제공하는 영역
• 모델: 데이터를 담는 용기
• 돔(DOM): HTML 문서에 들어가는 요소의 정보를 담고 있는 데이터 트리
• 돔 리스터: 돔의 변경 내역에 대해 즉각적으로 반응하여 특성 로직 수행
• 데이터 바인딩: 뷰에 표시되는 내용과 모델의 데이터를 동기화

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

레고 블럭과 비슷한 컴포넌트를 하나씩 쌓아 결과물을 올리는 형태로 구현이 가능하다.

컴포넌트 기반으로 개발하는 이유는?

코드를 재사용하기 쉽다.

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

• 양방향 데이터 바인딩을 제공한다.
• 가상 돔 렌더링 방식을 적용하여 사용자 인터랙션이 많은 요즘의 적합한 동작 구조를 가지고 있다. 요소 추가 시 다시 그리지 않고 프레임워크에서 정의된 방식으로 화면 구조를 갱신하여 성능 부하가 줄어든다.

양방향 데이터 바인딩

양방향 데이터 바인딩의 경우 사용자의 입력값이 곧바로 코드 상의 변수에 바인딩 될 수 있지만 단방향 바인딩의 경우 적절한 Event를 통해서만 코드 상 변수에 데이터 값이 담긴다

사용자 인터랙션

일방적으로 정보를 받는데에 그치지 않고, 접속자가 페이지안에서 상호작용, 데이터 교류를 하는 동적인 웹