⛹️♂️vue를 시작하며
FrontEnd 개발자로 진로를 정한 뒤,
프론트엔드 프레임워크인 vue.js를 먼저 공부하기로 했다.
참고 도서는 Do it Vue.JS입문 이다.
이 글에서는 vue의 특징과 장점에 대해서 설명할 것이다.
⛹️♂️Vue의 장점
- React와 angular에 비해 성능이 우수하고 빠르다.
- 리액트의 장점과 앵귤러의 장점을 갖고 있다.
두번째 장점을 보고 React 또는 Angular를 먼저 공부할까 고민하다가 SSAFY 과정 중 vue를 간단하게 나마 배운 적이 있어 Vue를 먼저 깊게 파헤쳐보기로 했다.
⛹️♂️Vue.js의 특징
UI화면단 라이브러리
vue는 UI화면 개발 방법 중 하나인 MVVM 패턴의 ViewModel에 해당하는 화면단 라이브러리이다.
MVVM패턴을 이용하여 개발하면 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적으로 이해할 수 있고, 추후 유지보수가 편해지는 장점이 있다.
MVVM패턴에서 vue의 위치는 view와 model의 사이인 viewModel이다.
⛹️♂️**컴포넌트 기반 프레임워크
**
컴포넌트 기반 방식으로 개발하는 이유는 코드를 재사용하기가 쉽기 때문이다. 그리고 vue의 경우 컴포넌트를 썼을 때 HTML코드에서 화면의 구조를 직관적으로 파악할 수 있다.
따라서 프레임워크 자체에서 컴포넌트 방식을 사용하면 모두가 정해진 방식대로 컴포넌트를 활용하므로 빠르게 구현할 수 있을 뿐만 아니라 남이 작성한 코드를 볼 때도 쉽게 이해할 수 있다.
⛹️♂️리액트와 앵귤러의 장점을 결합한 프레임워크
뷰는 앵귤러의 양방향 데이터 바인딩과 리액트의 단방향 데이터 흐름의 장점을 모두 결합한 프레임워크이다.
양방향 데이터 바인딩이란 화면에 표시되는 값과 프레임워크의 모델 데이터 값이 동기화 되어 한쪽이 변경되면 다른 한쪽도 자동으로 변경되는 것을 말한다.
단방향 데이터 흐름은 컴포넌트의 단방향 통신을 의미한다. 컴포넌트간에 데이터를 전달할 때 항상 상위 컴포넌트에서 하위 컴포넌트 한 방향으로만 전달하게끔 프레임워크가 구조화되어 있는 게 바로 단방향 데이터 흐름이다.
⛹️♂️그 외 장점
빠른 화면 렌더링을 위해 리액트의 가상 돔 렌더링 방식을 적용하여 사용자 인터렉션이 많은 요즘의 웹 화면에 적합한 동작 구조를 갖추고 있다. 가상 돔을 활용하면 특정 돔 요소를 추가하거나 삭제하는 변경이 일어날 때 화면 전체를 다시 그리지 않고 프레임워크에서 정의한 방식에 따라 화면을 갱신한다. 따라서 브라우저 입장에서는 성능 부하가 줄어들어 렌더링 방식보다 더 빠르게 화면을 그릴 수 있다.
용어 정리
- 뷰(view) : 사용자에게 보여지는 화면
- 돔(DOM) : HTML문서에 들어가는 요소(태그, 클래스, 속성 등)의 정보를 담고 있는 데이터 트리
- 돔 리스너(DOM Listener) : 돔의 변경 내역에 대해 즉각적으로 반응하여 특정 로직을 수행하는 장치
- 모델(Model) : 데이터를 담는 용기, 보통은 서버에서 가져온 데이터를 javascript객체형태로 저장
- 데이터바인딩(Data Binding) : 뷰에 표시되는 내용과 모델의 데이터를 동기화
- 뷰 모델(View Model) : 뷰와 모델의 중간 영역, 돔 리스너와 데이터 바인딩을 제공하는 영역
