[Vue 3] 01.Intro

Vue 란?

Vue.js란 "에반 유"라는 친구가 2013년 12월에 발표한 Front-end Javascript framework로 웹 브라우저에서 동작하는 UI를 빠르게 개발하기 위해서 발표되었다.

2020년 9월에 3.0 버전이 발표되었고 2021년 8월에 3.2 버전이 발표되었다. (한글 사이트 제공!!!)

 

Vue.js - The Progressive JavaScript Framework | Vue.js

 

MVVM 패턴

Vue는 MVVM 패턴이라는 것에 기반한다.

MVVM은 Model, View, ViewModel의 약자로 애플리케이션 로직과 UI의 분리를 위한 패턴이다.

 

위 그림을 살펴보면

• View 부분은 HTML로 DOM을 이야기하며 CSS와 합쳐져서 화면을 구성한다.
•  Model은 일반적인 JavaScript의 객체(배열, ...)이며 데이터를 나타낸다. 원격지에서 AJAX를 통해서 가져오기도 한다.
• ViewModel(이하 VM)은 자바스크립트로 작성된 프로그래밍 영역이다. 이 VM은 Model과 View를 연결하는데 Model의 데이터가 변경되면 View에 전달해서 화면을 갱신하게 하고 사용자가 화면에서 값을 변경하면 다시 그 값을 Model에 업데이트시켜준다.

그동안 힘들게 [데이터 변경 <--> 화면 반영]을 JavaScript로 처리해 왔었는데 MVVM 기반의 Vue를 적용하면 그냥 해준다. 왜냐고? 프레임워크니까.. 우리는 비즈니스 로직만 신경 쓰면 된다. 나머지는 프레임워크의 역할이다.

 

사실 Vue는 정확히 MVVM은 아니긴 하다.

 

기껏 MVVM이라고 해놓고 이건 또 무슨 소리?

Vue 2.X에서는 공홈에 분명히 MVVM임을 밝혔지만 Vue 3.x에서는 관련 내용이 싹 없어졌다. 대신 전통적인 MVVM 패턴에서 영감을 얻어서 제작되었다고 한다.

개발 초창기에는 Model, View, ViewMode 간의 연관관계에 집중해서 개발이 진행되었지만 Vue 자체가 성숙하면서 다양한 기능들을 넣다보니 MVVM과 살짝 결을 달리하는 내용들이 생기면서 발생한 일이다.

예를 들면 MVVM에서는 객체의 변경을 모니터링 하기 위해 Model이 observable 해야 하지만 Vue3에서는 Proxy를 이용한 반응성을 이용한다. MVVM에서는 View, Model, ViewModel이 명확히 구분되어야 하지만 Vue에서는 View와 ViewModel이 살짝 겹치는 형태(v-for, v-if 등)로 작성된다. 

따라서 그냥 "MVVM이 아니다" 라고 말하기 보다는 "MVVM 기반으로 작성되었으며 이를 넘어 좀 더 유연하게 다른 패턴들도 적용되었다" 정도로 정리하는 것이 어떨까?

 

Vue.js의 시장 점유율?

자고 나면 쏟아지는 다양한 기술들 중에 원픽을 해야 한다면 과연 우리는 Vue.js를 선택하는 것이 바람직할까?

세세하게 모든 것을 비교하기 힘든 세상에는 다른 사람들이 어떤 선택을 했는지 살펴보자.

https://2023.stateofjs.com/en-US/libraries/front-end-frameworks

State of JavaScript 2023: Front-end Frameworks

년도별 front end framework usage 비교: 출처: stateofjs.com/

 

현재 가장 많이 사용되는 기술 3 대장은 React, Angular, Vue.js이다. Google이 밀었던 Angular는 보합 또는 하락세, Facebook이 밀고 있는 React는 안정적으로 보인다.  과연 Svelte라는 녀석의 도전은 어떻게 처리할 수 있을까.

여러 이슈들이 있지만 Vue.j는 여전히 꾸준히 인기를 이어가고 있어 상승세이며 Vue를 선택하는 매우 중요한 이유 중 하나는 React 대비 학습 곡선이 완만하다는 것이다.

조금이라도 Vue.js에 관심이 생겼다면 개발을 위한 환경 설정부터 당장 시작해 보자!!