[Vue] Vue.js란 무엇인가?

[Vue] Vue.js란 무엇인가?

---

Project 포스팅에 앞서, 일단 Vue.js와 Node.js에 대한 정리를 어느 정도 하기로 했다.

Vue.js란?

---

• 웹 페이지 화면을 개발하기 위한 프런트엔드 프레임워크
• 뷰 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원
• 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공

Vue의 장점

---

• 배우기가 쉽다.
• 리액트와 앵귤러에 비해 성능이 우수하고 빠르다.
• 리액트의 장점과 앵귤러의 장점을 갖고 있다.
  • 뷰는 구글에서 일하던 직원이 앵귤러를 더 가볍게 쓰고 싶어서 만든 프레임워크
  • 앵귤러의 데이터 바인딩 특성과 리액트의 가상 돔(Virtual DOM) 기반 렌더링 특징을 모두 가지고 있음

Vue.js의 특징

---

UI 화면단 라이브러리

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

    * MVVM 패턴?
     화면을 모델(Model) - 뷰(View) - 뷰 모델(ViewModel)로 구조화하여 개발하는 방식
    - 뷰(View) : 사용자에게 보이는 화면
    - 돔(DOM) : HTML 문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
    - 돔 리스너(DOM Listener) : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
    - 모델(Model) : 데이터를 담는 용기. 보통은 서버에서 가져온 데이터를 자바스크립트 객체 형태로 저장
    - 데이터 바인딩(Data Binding) : 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화
    - 뷰 모델(ViewModel) : 뷰와 모델의 중간 영역. 돔 리스너와 데이터 바인딩을 제공하는 영역

컴포넌트 기반 프레임워크

• "컴포넌트 = 레고블럭"라고 한다면, 왼쪽 그림은 각 영역을 컴포넌트로 지정하여 구분한 것이고, 오른쪽 그림은 왼쪽 그림의 각 컴포넌트 간의 관계를 나타낸 것
• 리액트와 앵귤러 모두 컴포넌트 기반의 개발 방식 추구
  • 코드의 재사용이 쉽다.
  • HTML 코드에서 화면의 구조를 직관적으로 파악 가능

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

• 앵귤러의 양방향 데이터 바인딩(Two-way Data Binding)과 리액트의 단방향 데이터 흐름(One-way Data Flow)의 장점을 모두 결합한 프레임워크

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

• 빠른 렌더링(Rendering)을 위해 리액트의 가상 돔(Virtual DOM) 렌더링 방식 적용

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