Vue.js 시작하기
1. Vue.js란?
Vue.js는 웹 페이지 화면을 개발하기 위한 프론트엔드 프레임워크이다 Vue.js의 창시자인 에반이 앵귤러의 데이터 바인딩 방식과 돔(DOM)에 직접 접근하지 않고 데이터를 표현하는 방식을 가지고 기반을 마련하여 오픈 소소화 시켰으며 거기에 많은 살마들이 프레임워크의 기능을 붙여나가서 지금의 Vue.js가 되었다
Vue.js(이하 뷰)는 코어 라이브러리에서 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공된다.
즉, 라이브러리의 역할 뿐 아니라 프레임워크의 역할도 할 수 있다는 의미이며 공식사이트에서도 뷰를 점진적 프레임워크라고 부르고 있다.
2. Vue.js의 특징
뷰는 리액트와 앵귤러의 장점을 모아서 만들어진 만큼 여러가지 장점을 갖고 있다.
- 배우기가 쉽다.
- 리액트와 앵귤러에 비해 성능이 우수하고 빠르다.
- 앵귤러에서 지원하는 바인딩 특성과 리액트에서 지원하는 가상돔 기반 렌더링을 모두 사용할 수 있다.
앵귤러는 MVC 구조로 시작되어 컴포넌트 기반의 앵귤러2로 업그레이드 됐으며, 이 과정에서 타입스크립트나 ES6 등 많은 학습이 필요하며, 리액트 역시 잘 다루기 위해서는 ES6, JSX 같은 학습이 필요하지만 뷰는 위의 지식 없이도 쉽게 배울 수 있습다.
또, 말씀드린 바와 같이 뷰는 리액트와 앵귤러의 장점을 모아서 만든만큼 같은 테스트 케이스를 실행시켜서 성능을 비교한 결과 뷰가 가장 빠른 것으로 나타났다.
2-1 UI 화면단 라이브러리
뷰는 UI 화면 개발 방법 중 하나인 MVVM 패턴의 뷰 모델에 해당하는 화면단 라이브러리이다.
MVVM 패턴이란 화면을 모델 - 뷰 - 뷰 모델로 구조화하여 개발하는 방식을 의미하는데, 화면의 요소들을 제어하는 코드와 데이터 제어로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지보수를 편하게 할 수 있다는 특징이 있다. 즉, MVVM 패턴을 사용하면 프론트와 백단의 로직을 분리하여 코드를 깔금하게 구성할 수 있다.
| 용어 | 설명 |
|---|---|
| 뷰(View) | 사용자에게 보이는 화면 |
| 돔(DOM) | HTML 문서에 들어가는 요소의 정보를 담고 있는 데이터 트리 |
| 돔 리스너(DOM Listener) | 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치 |
| 모델(Model) | 데이터를 담는 용기, 서버에서 가져온 데이터를 자바스크립트 객체로 저장 |
| 데이터 바인딩(Data Binding) | 뷰(View)에 표시되는 내용과 모델의 데이터를 동기화 |
| 뷰 모델(View Model) | 뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역 |
2-2 컴포넌트 기반 프레임워크
최신 프론트엔드 프레임워크인 리액트, 앵귤러는 모두 컴포넌트 기반의 개발 방식을 사용하고 있다. 뷰도 마찬가지인데 컴포넌트 기반 방식을 사용하여 개발하는 이유는 코드를 재사용하기 쉽기 때문이다.
뷰의 경우 컴포넌트를 썼을 때 HTML 코드에서 화면의 구조를 지고간적으로 파악할 수 있고 컴포넌트 방식을 추구하면 모두가 정해진 방식대로 컴포넌트를 사용하므로 빠르고 쉽게 개발이 가능할 뿐만아니라 남이 작성한 코드를 볼 때도 수월하다는 장점이 있다.