Vue.js를 공부하기 전에 MVVM 에 대해 간단히 알아보자.
Vue.js에서는 반응형 웹을 지원하기 위해 MVVM(Model-View-ViewModel)을 따른다. 기존 MVC 모델과의 차이점은 ViewModel 도입과 데이터 바인딩에 있다.
아래 그림을 살펴보자.
뷰는 사용자가 보고 있는 내용, 즉 Dom(Document Object Model)이다. View의 데이터를 ViewModel의 Dom Listeners가 감지해서 Model에게 전달한다. 반대로 Model의 데이터를 Data Binding 을 통해 View 로 전달한다. 요컨데요컨대, ViewModel은 앞단의 화면과 뒷단의 데이터를 연결하는 가교 역할을 한다고 볼 수 있다.
반응형 웹
반응형(Responsive) 웹을 알아보기 앞서, 과거 웹 개발 방식에 대해 알아보자.
아래와 같은 코드가 있다. app이라는 Dom에 데이터를 바인딩하기 위해, str에 문자열을 대입하였다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<div id="app"></div>
<script>
var div = document.getElementById("app");
// 또는 jquery를 사용한다면 아래와 같을 것이다.
// var div = $("#app");
var str = "hi~~ there";
div.innerHTML = str;
// 또는 div.text(str);
</script>
</body>
</html>하지만 str에 대한 내용을 바꾸더라도 화면상에 내용은 바뀌지 않는다. 크롬에서 개발자 도구를 통해 str에 다른 값을 주입하면 화면에 표시되는 데이터는 바뀌지 않는다.
아래 움짤과 같이 데이터를 변경하면, 화면에 있는 데이터까지 바껴야 반응형 웹이라고 할 수 있을 것이다.
Vue.js 를 쓰는 이유
반응형 웹 페이지 개발을 위해서 Vue.js 를 쓰는 건 알겠는데.. 꼭 Vue.js이어야 하나?
당연히, React 든, Angular 든 반응형 웹을 지원하는 다양한 프레임워크가 있다. 아래 설문조사를 보면 React가 가장 많이 사용하는 프레임워크로 나와 있다.
주관적이겠지만, 내가 느끼는 Vue.js 를 쓰는 이유는
1) React 보다 쉽다.
React 를 사용해보면 알겠지만, 공부해야 할 부분이 많다. 이에 반해 Vue.js는 Html과 Css, Script까지 하나로 묶어서 컴포넌트 단위로 직관적인 구성이 가능하다. 이는 디자이너나 퍼블리셔와 협업의 과정이 보다 수월하게 느껴질 수 있다.
2) 레퍼런스를 찾아보기 쉽다.
개발자 커뮤니티 지원 생태계가 매우 잘 구성되어 있다. Vue의 창시자인 에반 유를 비롯해서, Vue.js로 만들어진 템플릿이 오픈소스로 많이 제작되어 있다. 또한 개발자 커뮤니티에 질의 사항을 올리면 비교적 빠른 시간 안에 답변이 달린다. 이러한 이유만으로도 Vue.js 를 사용이 나한테는 당연하게 느껴진다.
책에 보면 위 두가지 외에 여러 가지를 열거했지만, 그다지 공감이 가질 않는다.
'Tech > Front End' 카테고리의 다른 글
| [Vue공부] 4. watch를 이용한 데이터 상태 감시 (0) | 2021.11.04 |
|---|---|
| [Vue공부] 3. vue 기초문법 (0) | 2021.11.03 |
| [Vue공부] 2. Vue-cli 와 설치 (0) | 2021.11.03 |
| [Vue공부] 1. 알고 있어야 하는 개념들-2) (0) | 2021.10.28 |
| Font Awesome(폰트어썸)에 대해 알아보자. (0) | 2021.10.25 |
댓글