🍀 작성 계기
이번에 회사에 새로운 프로젝트에 투입되었는데, Front 단을 Vue.js 를 활용하여
화면을 구성되어 있었다. 회사 선배가 Vue.js 의 간단한 사용법을 알려주셨지만
막상 혼자 사용하려니 잘되지 않았다.
계속 이러면 답이 없을 거 결국 공부를 하기로 했다.
이 글, 더 나아가 이 Vue.js 시리즈에 작성하는 모든 글들은
내가 공부한 Vue.js 에 대한 내용들을 정리하는 것들이다.
🍀 공부 환경
OS:Window Home 10IDE:Intellij Ultimate (ver.2022.3.2)Browser:ChromeVue.js:2- (회사에서 이 버전을 사용함)Vue js devTool: 확장 프로그램 다운로드 url
🍀 개념 잡기
1. MVVM 패턴과 Vue
MVVM 패턴의 뷰모델(ViewModel) 레이어에 해당하는 라이브러리다.
이미지 출처: https://012.vuejs.org/guide/
이해를 위해서 간단하게 MVVM 패턴의 각 계층이 뭘 의미하는 지 위 그림과
아래 글을 번갈아 보면서 이해해보자.
View: 사람에게 보이는 화면, HTML 의 경우 DOM 으로 조작이 가능하다.
Model:- 순수한
javascript object이다. - 더 정확히는 View, 즉 HTML 과 매칭되는 순수한
javascript object를 의미한다. - 이러한
Model은 데이터 또는 데이터와 관련된 여러가지 로직을 담는다.
- 순수한
ViewModel:- 크게 2가지 방식의 일을 처리한다.
View에서 발생하는 이벤트( ex: 마우스 클릭, 키보드 입력 등 )를ViewModel계층에 있는Dom Listeners가 감지하고View와 관련된Model의 내용을 변경한다.- 반대로 Model 에서 변경이 발생하면,
ViewModel계층에 있는Directives (= Data Bindings)가 동작하여 변경사항을View에 반영한다.
결론: Vue.js 는 바로 ViewModel 계층을 도맡아서 처리하는 것이다
2. MVVM 이 적용되는 과정
Vue.js 를 통한 MVVM 이 어떻게 적용되는지를 아래와 같은 과정을 통해서 알아보자.
- 옛날 방식의 웹 개발(HTML, CSS, JS)로만 HTML 작성
- Object.defineProperty 를 통한 MVVM 맛보기 HTML 작성
- 실제 Vue.js 적용 HTML 작성
먼저 옛날에 화면을 동적으로 변경하기 위한 작업 방식을 정말 간단하게 알아보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
</div>
<script>
let div = document.querySelector('#app');
let str = 'hello world';
div.innerHTML = str; // 화면 반영 O, 이 과정에서 DOM API 사용
str = 'hello world!!!'; // 화면 반영 X, 당연하지만 DOM API 사용을 안해서 그럼
// 반영하기 위해서 또 DOM API 를 직접 호출
div.innerHTML = str;
</script>
</body>
</html>보면 알겠지만 우리가 직접 HTML ( = 사실상 DOM ) 을 동적으로 변경하기 위해서는,
해당 DOM 객체를 직접 건드려야한다. 이전에는 이게 당연한 것이였다.
바로 다음으로 vue.js 를 적용해보면 좋겠지만, 잠시 아래 html 을 통해서
내부적으로 Vue.js 가 어떻게 동작할지 가볍게라도 알아보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app"></div>
<script>
// dom (= VIEW 계층 )
let appDom = document.querySelector('#app');
// dom 과 관련된 js Object ( = Model 계층 )
let appObj = {}; // appDom 과 관련된 순수한 Javascript Object
// 이 createApp 메소드가 ViewModel 이 하려는 행위의 핵심이다.
function createApp(dom) {
let relatedObject = {};
// appObj 의 속성 재정의
Object.defineProperty(relatedObject, 'str', {
// str 프로퍼티 조회 시 동작
get: function () {
console.log('reading str property...');
return this._str || '';
},
// str 프로퍼티 세팅 시 동작
set: function (setVal) {
console.log('setting str property to... ' + setVal);
dom.innerHTML = this._str = setVal;
}
});
return relatedObject;
}
appObj = createApp(appDom);
</script>
</body>
</html>이렇게 하고 화면을 띄운 console 에서 직접 appObj 이라는 객체의 str 프로퍼티 값을
변경하는 것만으로도 화면이 동적으로 랜더링 되는 것을 확인할 수 있다.
Vue.js 가 어떻게 동작이 "가능한지"를 정도만 알아간다 생각하고 넘어가자.
참고:
Object.defineProperty?
더 자세한 사용법을 알고 싶다면 https://ko.javascript.info/object-properties 를 한번 참고 하는 걸 추천한다.
이제 진짜 Vue.js 를 사용해서 위의 html 과 동일한 동작을 하도록 html 을 짜보자.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.js"></script>
</head>
<body>
<div id="app">
{{message}}
</div>
<script>
let app = new Vue({
el: '#app',
data: {
message: 'Hello World!',
}
});
</script>
</body>
</html>- SIMPLE 👍
- 지금은 당장 문법은 몰라도, 간단한 코드 몇 줄로
ViewModel계층이 형성된 것을 확인 할 수 있다.
이번 글에서는 MVVM 패턴이 무엇이고,
MVVM 패턴에서 Vue 가 맡는 계층이 무엇이며,
이러한 MVVM 패턴이 적용된 코드를 HTML 로 작성해서 알아봤다.
다음 글 부터는 본격적으로 Vue 의 구성요소, 문법 등에 대해 알아보겠다.
이번 글은 여기까지...
✨ 참고 링크
