Vue란??

참고 : Vue.js 입문책을 읽고 학습한 내용을 블로그에 정리한 글이므로 내용상 오류가 있을 수 있습니다. 
        오류가 있다면 댓글 남겨주시면 감사하겠습니다.

Vue

• Vue는 웹 화면을 개발하기 위해 자바스크립트로  개발된 프레임워크입니다.
• 구글에서 근무하던 에반 유(Evan You)가 AngularJS를 사용하다가 자기가 좋아하는 특성과 초보 개발자들도 접근이 가능한 프레임워크를 만들기 위해서 만들었습니다.
• Vue는 라이브러리 역할과 프레임워크 역할을 모두 합니다 하지만 헷갈릴 수 있기 때문에 프레임워크라고 정의합니다.

뷰 프레임워크

Vue의 장점

1.  Angular와 React에 비해 배우기 쉽다.

      - Angular : 타입스크립트(TypeScript)와 ES6(ECMAScript 2015)등 많은 학습이 필요합니다.

      - React : 입문자가 배우기위해 ES6와 JSX등 학습이 필요합니다.

2.  Angular와 React 보다 성능이 우수하고 더 빠릅니다.

3.  Angular와 React의 장점을 모두 갖고 있습니다

       - Angular : 데이터 바인딩 특성

       - React : 가상 돔 기반 렌더링 특징

 

Vue의 특징

1. MVVM패턴을 이용한 화면 개발 

MVVM패턴이란?

화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel) 구조로 개발하는 방식을 말합니다.

MVVM패턴은 화면의 부분을 제어하는 코드와 데이터의 부분을 제어하는 코드를 분리하였기 때문에

코드를 더 쉽게 이해하고 유지 보수를 편하게 할 수 있습니다.

 

 

구글에 Vue를 검색했을 경우 : 사진(왼쪽 - view) (중간 - ViewModel) (오른쪽 - Model)

 

뷰(View)	사용자에게 보이는 화면 ex) - 구글 로고, 검색창, 검색버튼
뷰 모델(ViewModel)	뷰와 모델의 중간 부분, 돔 리스너와 데이터 바인딩을 제공
돔 리스너(DOM Listener)	돔의 변경된 부분을 감지하여 알맞게 특정 기능을 처리하는 장치 ex) - 검색 버튼을 눌렀을때 발생하는 과정
데이터 바인딩(Data Binding)	Model(데이터)과 View(화면)를 동기화해주는 역할 ex) - Vue의 관련된 데이터를 가져와 화면에 보내주는 역할
모델(Model)	데이터를 저장하는 저장소 ex) - Vue와 관련된 데이터들
돔(DOM)	HTML 요소(클래스, 태그, 속성 등)의 정보를 담고 있는 데이터 트리

 

MVVM구조 처리 과정 설명

1. View에서 Vue단어를 입력 후 검색합니다
2. ViewModel은 검색버튼을 감지후 Model에서 Vue에 해당하는 데이터를 가져오는 로직(돔 리스너)을 실행합니다
3. ViewModel은 Model에서가져온 Vue데이터를 View(화면)에 동기화합니다(데이터 바인딩)
4. ViewModel에서 처리된 결과를 View에 갱신하여 보여줍니다.

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

컴포넌트(Component) - 레고 블럭과 같이 재사용이 가능한 최소 단위를 말합니다.

 

(Vue에서 컴포넌트를 사용했을 때)

• 프로그래밍을 할 때 재사용하기가 쉽습니다
• HTML 코드에서 화면의 구조를 쉽게 파악 할 수있습니다.
• 모두가 정해진 방식으로 컴포넌트를 사용하기 때문에 빠르게 구현할 수 있고 다른 사람이 작성한 코드를 볼 때 쉽게 볼 수있습니다.

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

1. 앵귤러의 양방향 데이터 바인딩(Two-way Data Binding)
2. 리액트의 단방향 데이터 바인딩(One-way Data Binding)
3. 리액트의 가상돔 렌더링 방식

양방향 데이터 바인딩	View와 Model의 값중에 한쪽이 변경되면 다른 한쪽도 변경되는 것
단방향 데이터 바인딩	항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로 전달되는 것
가상돔 렌더링 방식	특정 돔 요소를 추가하거나 삭제할 때 화면 전체를 갱신 하지않고 특정한 방식으로 화면을 갱신하는 것