Vue.js는 웹 화면을 개발하기 위한 프런트엔드 프레임워크(Frontend Framework) 입니다. 프레임워크라고 하면 개발자들이 좀더 수월하게 개발을 수행할 수 있도록 일정한 틀을 제공하는 수단을 말하는데, Vue.js또한 쉽게 웹 화면을 개발할 수 있는 수단을 제공합니다.
기존에 들어본 분들은 아시겠지만, React, Angular가 프런트엔드에서 아주 강세를 이루었고, 최근에 Vue.js도 많은 주목을 받고 있습니다. 그럼 기존의 프레임워크와 어떤차이점이 있는지 간단히 알아보고 Vue.js에 대해서 알아보겠습니다.
| 특징 | React | Angular | Vue.js |
| 등장 | 2013 | 2010 | 2014 |
| 개발자 | Google (Evan You) | ||
| 라이선스 | MIT | MIT | MIT |
| 주요사항 | 가상DOM | 일반DOM | 가상DOM |
| JSX권장 | HTML마크업 | HTML마크업 | |
| 난이도 | 중 | 상 | 하 |
간단하게 살펴보면 다음과 같습니다. 난이도가 그래도 가장 낮은 아이를 접근하는게 마음도 편하고, 성취감으로 의욕도 안떨어지고 1석2조일 것 같습니다.
1. Vue.js
Vue.js의 코어는 화면단 표현하는 기능을 중점적으로 지원하는 라이브러리로 구성되지만, 실질적으로 라우터, 상태관리 등과 같은 프레임워크 기능도 제공합니다. 라이브러리 + 프레임워크인데, Vue.js공식 사이트에서는 이를 아래와 같이....
[The Progressive JavaScript Framework] 라고 부릅니다.
공식사이트인 https://vuejs.org/ 를 들어가보면...
Github가 있는 것을 보니 안들어가 볼 수가 없네요. Star를 한번 확인해 보겠습니다.
160k 입니다. 어마어마한 인기를 누리고 있네요. 다시한번 Vue.js의 장점을 정리해보면...
- 일단 배우기가 어마무시하게 쉽습니다.
- React와 Angular의 속도와 비교하면, 더 빠릅니다.
- React와 Angular의 장점을 가지고 개발되었습니다. React의 가상DOM 특징을 가지고 있으며, Angular의 데이터 바인딩 특성을 가지고 있습니다.
2. Vue.js 특징
[웹 화면 개발 프레임워크]
Vue.js는 웹 화면 개발 방법 중 하나인 MVVM 패턴을 사용합니다. MVVM 패턴에 대해서 [위키백과]를 통해서 알아보면...
모델-뷰-뷰모델(model–view–viewmodel, MVVM)은 소프트웨어 아키텍처 패턴의 하나이다.
MVVM은 마크업 언어나 GUI 코드를 통해 그래픽 사용자 인터페이스의 개발을 비즈니스 로직이나 프론트엔드 로직("데이터 모델")과 분리를 용이케 한다. MVVM의 뷰 모델은 값 변환기이며, 이는 뷰 모델이 모델로부터 데이터 객체를 노출(변환)시키는 일을 맡음으로써 객체들이 쉽게 표현될 수 있게 한다는 의미이다. 이러한 관점에서 뷰 모델은 단순한 뷰 이상의 모델이며 뷰의 디스플레이 로직 대부분을 관리한다. 뷰 모델은 중재자 패턴을 구현할 수 있으며 뷰가 지원하는 유즈 케이스들의 집합 주변 백엔드 로직에 대한 접근 권한을 정리한다.
MVVM은 사용자 인터페이스의 사건 기반 프로그래밍을 단순하게 만들 목적으로 마이크로소프트의 설계자 켄 쿠퍼와 테드 페스터스에 의해 발명되었다. 마이크로소프트의 WPF 및 실버라이트 설계자 중 한 명인 존 구스먼은 2005년 MVVM을 자신의 블로그에 발표하였다.
역시 정의로만 보면 쉬운 용어는 한개도 없는 것 같습니다.
역시 [위키백과]에서 제공하는 그림으로 이해를 해보도록 하겠습니다.
- View 는 실제로 사용자가 보게되는 화면입니다.
- ViewModel 은 View와 Model의 중간영역으로 View로 부터 데이터를 받아 Model에 전달하고, Model의 데이터를 받아 View로 전달하는 역할을 합니다.
- Model 은 서버로 부터 가져온 데이터를 가져오는 역할을 합니다.
ViewModel 이라는 중계기를 두어서, 사용자의 반응을 감지하여... 이를테면 Listener가 되겠네요. 동작이나 데이터를 전달하고... 그 결과를 다시 받아다가 사용자에게 표출하는 역할을 하게되는 것 입니다.
[컴포넌트 기반]
앞서 살펴본 React, Angular, Vue.js 모두 컴포넌트 기반 프레임워크 입니다. 컴포넌트라고 한다면 어릴때 가지고 놀던 Lego 블럭을 생각해보면 됩니다. 내가 필요한 모양의 블럭을 가져다가 꼽고 꼽고 연결하고 하면 하나의 작품이 나오듯이, 내가 만들어 놓은 일정한 역할을 하는 컴포넌트를 만들어 조합하면 하나의 완성된 결과가 나오는 것 입니다.
이는 바로 코드의 재사용성과 연결되어 있습니다.
실제로 이렇게 이야기 하면, 참 감이 안올 것 입니다. 역시 이럴때는 개발환경 구성해서 실제로 개발해보고 느껴보는게 가장 좋은 방법입니다.
-Ayotera Lab-
댓글