Vue.js 란?

Front-End/Vue.js 2019. 12. 30. 08:07

Introduction

Icon

Vue.js 는 웹 페이지 화면을 개발하기 위한 Front-end Framework 입니다.

기존 웹 개발자뿐만 아니라 HTML, CSS, Javascript 기초만 아는 웹 개발 입문자 및 컴퓨터 비전공자들도 배우기 쉽게 만들어졌습니다.

뷰는 화면단 라이브러리이자 프레임워크라고도 볼 수 있습니다. 어떤 의미인지 다음 그림으로 알아보겠습니다.

(점진적인 Framework로서의 Vue의 의미)

위 그림은 Vue의 창시자인 에반 유가 2017년 Vue.js 컨퍼런스에서 발표한 내용 중에 있는 그림입니다. Vue 코어 라이브러리는 화면단 데이터 표현에 관한 기능들을 중점적으로 지원하지만 프레임워크의 기능인 라우터, 상태 관리, 테스팅 등을 쉽게 결합할 수 있는 형태로도 제공됩니다. 즉, 라이브러리 역할뿐만 아니라 프레임워크 역할도 할 수 있다는 의미입니다. 그래서 Vue를 점진적인 프레임워크라고 표현합니다.

Prerequisite

Icon

Front-end
Framework
TypeScript
ES6, ES7

1. Vue 의 장점

빠르게 변화하는 Front-end 시장에서 Vue는 해결사 같은 존재입니다.

첫째, 배우기가 쉽습니다.

HTML, CSS, Javascript 의 기초만 아는 입문자라도 하루 안에 배울 수 있고, 익숙한 실무 개발자라면 몇 시간 이내에 배울 수 있습니다.

가장 간단한 예를 보겠습니다.

html

</div>

cdn

1	<script src="https://cdn.jsdelivr.net/npm/vue@2.5.2/dist/vue.js"></script>

javascript

new Vue({

el: '#app',

data: {

message: 'Hello Vue.js!'

}

});

view

1	Hello Vue.js!

Icon

Vue가 여타 Front-end Framework보다 배우기 쉬운 이유

Angular1은 Framework로서 완전한 기능을 제공하는 MVC 구조로 출발하여 컴포넌트 기반의 Angular2로 진화하였습니다. 이 과정에서 TypeScript, ES6 등 기타 어느 Framework보다 더 많은 학습이 필요하게 됩니다. React 또한 ES6, JSX라는 장벽이 존재하며, 신기술이 끝없이 등장하는 상황에서 웹 개발자에게 주어지는 짐은 점점 더 무거워집니다. 따라서 쉽게 배울 수 있는 Vue의 등장으로 소규모 혹은 신규 프로젝트가 진행되는 곳에서는 Vue의 사용이 많아지고 있습니다.

둘째, React나 Angular에 비해 성능이 우수하고 빠릅니다.

Vue 제작팀에서 React와 Angular를 가지고 같은 테스트 케이스에서 성능을 비교한 결과 뷰가 가장 빠른 것으로 나타났습니다.

셋째, React와 Angular의 장점을 모두 갖고있습니다.

Vue는 구글에서 일하던 직원이 Angular를 더 가볍게 쓰고 싶어서 만든 Framework입니다. Angular의 데이터 바인딩 특성과 React의 가상 돔 기반 랜더링 특징을 모두 가지고 있습니다.

이처럼 다른 Front-end Framework 에 비해 성능이 우수할 뿐만 아니라 가볍고 빠르며, 배우기 쉽다는 점이 앞으로 더 많은 개발자들에 사랑을 받을 것 이라 전망됩니다. 사용자가 많아지면 생성되는 거대한 커뮤니티는 훌륭한 Framework로 이어지는 결과를 볼 수 있습니다.

2. Vue 의 특징

1. UI 화면단 라이브러리

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

(MVVM 구조에서의 Vue.js의 위치)

MVVM 패턴이란 화면을 모델 - 뷰 - 뷰모델 로 구조화하여 개발하는 방식을 말합니다. 이러한 방식으로 개발하는 이유는 화면의 요소들을 제어하는 코드와 데이터 제어 로직을 분리하여 코드를 더 직관적이고 유지보수가 편하게 하기 위함입니다.

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

Icon

위키피디아에서는 MVVM 패턴을 아래와 같이 정의 합니다.

"마크업 언어나 GUI 코드를 비즈니스 로직 또는 백엔드 로직과 분리하여 개발하는 소프트웨어 디자인 패턴"

이말을 바꿔 해석해보면 "화면 앞단(Front-end)의 화면 동작과 관련된 로직과 화면 뒷단(Back-end)의 데이터베이스 처리 로직을 분리하여 더 깔끔하게 코드를 구성한다." 라고 할 수 있겠습니다.

웹 초창기에는 이런 Front,Back -end 라는 구분이 없었지만 화면요소에 대한 코드와 데이터베이스에서의 데이터에 대한 조작 등 한파일에 HTML, CSS, Javascript, Java 등 여러 코드가 섞이며 가동성이 현저히 떨어지기 때문에 이러한 문제점을 해결하기 위한 방법으로 MVVM 패턴이 사용되기 시작했습니다. Vue 뿐만아니라 React에서도 해당 패턴을 사용하고있습니다.

2. 컴포넌트 기반 프레임워크

Vue가 가지는 또 하나의 큰 특징은 컴포넌트(Component)기반 프레임워크라는 점입니다.

컴포넌트란 마치 레고 블럭과 같습니다. 레고 블럭을 잘 조합하면 여러가지 원하는 모형을 만들 수 있고 필요할 때 마다 만들어 놓은 레고 블럭들 끼리 조합 할 수 있습니다.

이와 같이 각 영역을 구분지어 관계를 형성해 놓으면 코드를 재사용하기 쉽게 됩니다. 따라서 프레임워크 자체에서 컴포넌트 방식을 추구하면 모두가 정해진 방식대로 컴포넌트를 활용할 수 있으므로 빠르게 개발할 수 있을 뿐만 아니라 남이 작성한 코드를 볼 때도 수월합니다.

3. Conclusions

Vue란 무엇인가에 대해 알아보았습니다.

Vue의 장점, 특징을 알아본 결과 개발자의 의도대로 Front-end Framework 는 매우 필요하지만 진입장벽의 문제로 안그래도 배울것이 많은 개발자들에게 좀더 쉽고 빠르게 사용할 수 있고, 그렇다고 해서 여타 다른 Framework에 뒤쳐지지 않을 Vue 가 과연 거대한 두 산맥(Angular, React)을 상대로 Front-end Framework 시장에서 살아남을 수 있을까요?