Vue.js는 무엇인가?
Vue.js는 웹 프론트엔드 프레임워크이며, 컴포넌트 기반 SPA (Single Page Appication)를 구축할 수 있게 해주는 프레임워크이다.
컴포넌트(Component)
프론트엔드 프레임워크에 말하는 컴포넌트는 웹을 구성하는 로고, 메뉴바, 모달창 등 웹페이지 내의 다양한 요소를 의미하는 것이며, 이 요소들을 재사용 가능하도록 구조화 한것이다.
SPA(Single Page Appiciation)
SPA는 최초 로딩 시 css, js등 리소스 파일을 로딩 한 후 하나의 페이지 안에서 필요한 영역 부분만 로딩 되는 형태로 구성이 되어 있다. 최초 로딩 시 리소스 파일들을 로딩을 해오기 때문에 페이지 이동시 리소스 파일들을 로딩 할 필요가 없다. 그러므로 화면 전환이 빠르고 트래픽양을 적다는 장점이 있다. 하지만 처음 최초 로딩시 모든 리소스 파일을 가져오고 로딩하기 때문에 리소스 파일 사이즈 크면 초기 로딩 속도가 느려진다는 단점이 있다.
특징
반응성 (Reactivity)
뷰가 데이터 변화를 감지 했을때 화면이 다시 그려지는 뷰의 성질이다.
data 속성에 반응성이 생기는 시점은 인스턴스를 생성하는 시점이다. 따라서 생성하는 시점에 없었던 데이터는 반응성이 없다. 객체 속성을 임의로 추가 또는 삭제 하는 경우에도 뷰에서 감지하지 못한다.
양방향 데이터 바인딩, 단방향 데이터 흐름
뷰는 앵귤러의 양방향 데이터 바인딩과 리액트의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크이다.
양방향 데이터 바인딩이란 컴포넌트 간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화되어 있는 것을 말한다.
이 외에도 뷰는 빠른 화면 렌더링을 위해 리액트의 가상 돔 렌더링 방식을 적용하여 사용자 인터랙션이 많은 요즘의 웹 화면에 적합한 동작 구조를 갖추고 있다. 가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다. 따라서 브라우저 입장에서는 성능 부하가 줄어들어 일반 렌더링 방식보다 더 빠르게 화면을 그릴 수 있다.
장단점
- 장점
- 학습곡선이 낮음
- vue.js 공식 가이드 문서가 훌륭함
- 앵귤러의 장점인 양방향 데이터 바인딩과 리액트 장점인 가상돔 기반 특징을 갖고 있음
- 단점
- 중국인 포지션이 큼 (번역하는데 어려움이 있음)
- 대기업에서 지원이 없음
- 플러그인이 부족함(리액트에 비해)
- 모바일 지원이 안됨
Reference
