728x90
모든 예제 코드는 github에 있습니다.
1. Vue.js 소개
MVVM 모델에서의 Vue
- MVVM 패턴의 뷰모델 레이어에 해당하는 화면단 라이브러리
- 화면에 나타나는 것이 HTML이며, DOM을 이용해서 JS로 조작할 수 있다.
- DOM Listeners로 사용자가 발생시킨 이벤트를 청취할 수 있고, JS에서의 특정 로직을 실행시킨다.
- JS의 데이터가 변경되었을때, Data Bindings를 거치게 되는데, 이걸 이용해 화면에 보여주게 된다.
기존 웹 개발 방식(HTML, JavaScript)
- 프레임워크를 사용하지 않고 웹을 구현할 수 있는 방법은 HTML, CSS, JavaScript로 가능하다.
! + tab을 하면 기본 html 템플릿이 만들어 진다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Dev</title>
</head>
<body>
<div></div>
</body>
<script>
const div = document.querySelector('div');
console.log(div);
let str = 'hello world';
div.innerHTML = str;
</script>
</html>
- 위와 같이 DOM을 조작해 텍스트를 넣을 수 있다.
- 그렇다면 텍스트를 바꿀려면 어떻게 해야하는가?
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Web Dev</title>
</head>
<body>
<div></div>
</body>
<script>
const div = document.querySelector('div');
console.log(div);
let str = 'hello world';
div.innerHTML = str;
str = 'hello world!!!!!'
// 텍스트를 변경하려면 div를 또 조작해야 한다.
div.innerHTML = str;
</script>
</html>
- 위와 같이 div를 다시 한번 조작해야 한다.
- 데이터가 변경되면 자동으로 DOM의 텍스트가 변경될 수 없을까? vue.js 핵심 사상인 Reactive는 그걸 가능하게 만든다.
Reactivity 구현
- vue의 핵심 사상
- 변수의 동작은 할당과 접근이 있다.
const a = 10; // 할당
a // 접근-
객체에 직접 새로운 속성을 정의하거나 이미 존재하는 속성을 수정한 후, 그 객체를 반환합니다.
즉, 객체의 동작을 재정의 하는 api
Object.defineProperty(대상 객체, 객체의 속성, {(function) 정의할 내용 })
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Object.defineProperty()</title>
</head>
<body>
<div id="app">10</div>
</body>
<script>
const app = document.querySelector('#app');
const viewModel = {};
Object.defineProperty(viewModel, 'str',{
get: function() { // 접근
return app.innerHTML;
},
set: function(newValue){ // 할당
app.innerHTML = newValue;
}
});
</script>
</html>- 위의 코드 실행 화면
- 데이터를 읽어서 데이터가 변경될 때마다 변경 해주는 것이 Vue의 핵심인 Reactivity(=데이터바인딩) 이다.
Reactivity 코드 라이브러리화 하기
즉시 실행 함수(IIFE, Immediately Invoked Function Expression)
정의되지마자 실행되는 함수
(function() { ... })();첫번째 괄호는 익명함수로 전역 스코프에 불필요한 변수를 추가해서 오염시키는 것을 방지하고 내부안으로 다른 변수들이 접근하는 것을 막을 수 있다.
두번째 괄호는 즉시 실행 함수를 생성하는 괄호로 함수를 즉시 해석해서 실행
기본적으로 안에 있는 함수의 로직이 호출되지 않도록 또 다른 유효범위에 넣어주는 것이며, 오픈소스 라이브러들이 변수의 유효범위를 관리합니다.
Hello Vue.js와 뷰 개발자 도구
- Vue CDN
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script><!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vue.js basic</title>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const vm = new Vue({
el: '#app', // document.querySelector()와 동일하다.
data: {
message: 'Hello Vue.js'
}
})
</script>
</html>- 컴포넌트(new Vue({})
- 기본적으로 Vue를 실행했을때 컴포넌트 구조를 보여준다.
- el : document.querySelector()와 동일한 것으로 DOM을 선택하는 것이다.
- data : vue에서 관리하는 데이터로 Reactivity가 적용되어 있다.
728x90
728x90
'Lecture > [인프런] Vue.js 시작하기 - Age of Vue.js' 카테고리의 다른 글
| 5. 컴포넌트 통신 방법 - 응용 (0) | 2020.07.05 |
|---|---|
| 4. 컴포넌트 통신 방법 - 기본 (0) | 2020.07.05 |
| 3. 컴포넌트 (0) | 2020.07.05 |
| 2. 인스턴스 (0) | 2020.07.05 |
| 0. 개발환경설정 (0) | 2020.07.05 |
