[Vue] Vue.js란?-정의, 특징, 장/단점

Vue.js란?

• 사용자 인터페이스(UI) 및 단일 페이지 어플리케이션(SPA)을 구축하기 위한 JavaScript 프레임워크
• 점진적인 프레임워크

*점진적인 프레임워크?
  - 라이브러리 기능 + 프레임워크 기능 
    + 라이브러리 기능 : 화면단 데이터 표현에 관한 기능들을 중점적으로 지원
    + 프레임워크 기능 : 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공

 

Vue.js의 동작원리

가상 DOM으로 화면 요소를 변경 및 조작하고 최종 결과물을 DOM Tree에 반영

가상 DOM?
  - DOM을 최소한으로 조작하여 처리하는 방식
  - 가상 DOM이라는 DOM 트리를 모방한 가벼운 JS 객체를 통해 직접 DOM을 핸들링 하지 않고 자바스크립트가 HTML을 렌더링 하는 방법

가상 DOM을 사용하는 이유?
  - 실제 DOM을 수정하는 과정이 자바스크립트에서 메모리 상의 객체를 수정하는 것보다 오래 걸림
  - DOM을 반복적으로 직접 조작 시, 브라우저 렌더링 횟수 증가로 PC 자원 소모량이 증가됨

DOM과 가상DOM의 작동방식 비교?

DOM	가상 DOM
사용자의 요청 발생	사용자의 요청 발생
DOM에 업데이트 반복	가상 DOM에서 계속 반영
+       HTML에 파싱	(실제 브라우저는 모르는 상태)
+    DOM 트리 생성
+     CSS 트리 생성
+              레이아웃
+              리페인트

 

Vue.js의 특징

 

1. UI 화면단 라이브러리
   • MVVM 패턴의 View 모델에 해당하는 화면단 라이브러리
     • DOM Listners : DOM의 변경 내역을 즉각적으로 반응하여 특정 로직을 수행하는 장치
       Data Bindings : View에 표시되는 내용과 Model의 데이터를 동기화
   • 화면의 요소를 제어하는 코드와 데이터 제어 로직을 분리 하여, 코드를 직관적으로 이해할 수 있고 유지보수가 편리함
     
2. 컴포넌트 기반 프레임워크
   • 화면을 여러개의 작은 단위로 쪼개어 개발
     • 재사용성, 구현 속도, 코드 가독성이 증가함
3. React.js와 Angular.js의 장점을 가지고 있음

*Angular.js의 장점
  - 양방향 데이터 바인딩
    + 화면에 표시되는 값과 프레임워크 모델 데이터 값이 동기화 됨
    + 한쪽이 변경되면 다른 한쪽도 자동으로 변경 

---

*React.js의 장점
  - 단방향 데이터 흐름
    + 컴포넌트 단방향 통신 구조화 (상위 컴포넌트 → 하위 컴포넌트)
  - 가상 DOM 렌더링 방식
    + 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면 갱신

 

Vue.js의 장단점

장점

1. 배우기 쉽다 (HTML, CSS, JS만 알고 있어도 사용이 가능하다)
2. 공식 라이브러리가 훌륭하다
   • Vue Router : 라우팅을 위한 라이브러리
   • Vuex : 상태 관리를 위한 라이브러리
3. React.js의 장점과 Angular.js의 장점을 모두 가지고 있다.

단점

1. 다른 프레임워크 보다 생태계가 작다
   • 일단 커뮤니티는 아직 작습니다.
   • Vue.js도 중국 작가에 의해 개발되었으므로 많은 관련 프로젝트가 영어 사용자가 이해하기 어렵다.
2. TypeScript와의 결합도
   
   • 구 버전인 2.x 버전에서는 TypeScript와 결합도가 떨어진다고 한다.
   • 3.x 버전은 안 써봐서 모르겠다..