[Vue.js] 1. Vue.js란?
1. 대제목 : Vue.js란?
1 - 1) MVVM 모델에서의 Vue
1 - 2) 기존 웹 개발 방식(HTML, JavaScript)
1 - 3) Reactivity 구현
1 - 1) Vue는 무엇인가? (Vue의 구동 원리에 대하여...)
Vue : MVVM 패턴의 뷰모델 레이어에 해당하는 화면단 라이브러리
MVVM 아키텍처
Vue.js는 MVVM(Model-View-ViewModel) 아키텍처를 따름
MVVM이란...↓
- Model: 애플리케이션의 데이터 상태를 나타냅니다.
- View: 사용자 인터페이스(UI)를 나타냅니다.
- ViewModel: View와 Model 사이의 중간 계층으로, 데이터 바인딩 및 DOM 업데이트를 관리합니다.
그림으로 이해해보자 :3
[그림 1]
View : 브라우저에서 사용자에게 비춰지는 화면 e.g) 입력 박스, 버튼 ...
화면을 나타내는 요소인 HTML([그림 1]: 흰색 종이) 문서가 DOM (Document Object Model) 을 통해 JavaScript로 조작될 수 있다.
If... 유저가 입력 박스/버튼 등을 클릭했을 때, 해당 이벤트를 중간에 DOM Listeners([그림 1]: 초록 박스)로 Vue가 청취 → Vue에서 해당 이벤트를 인식하여 JS([그림 1]: 파란 원기둥)에 있는 데이터를 바꿔주거나 JS에 지정했던 특정 로직에서 실행하게 됨.
=> Vue에서 갖고 있는 큰 두 가지 특징 중 하나인 DOM 리스너의 역할
After... 이 JS의 데이터가 변했을 때, 두 번째로 데이터 바인딩즈([그림 1]: 초록 박스)를 타게 됨 → 변경 사항을 데이터 바인딩즈를 이용해서 화면(HTML)에 반영하게 됨.
↓ 이런 식으로~
코드로 이해해보자 :3
1) HTML
: 웹 페이지의 구조와 콘텐츠를 정의하는 마크업 언어로, HTML 코드를 작성하면 브라우저는 이를 읽고 웹 페이지를 렌더링
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<h1>Welcome to My Website</h1>
<p>This is a paragraph.</p>
</body>
</html>
2) DOM(Document Object Model)
: HTML 문서가 브라우저에 의해 파싱된 후, 각 요소들이 객체로 표현되는 트리 구조.
- DOM은 웹 페이지의 구조를 프로그래밍적으로 접근하고 조작할 수 있게 해주고, 각 HTML 요소는 DOM의 노드가 됨.
위의 HTML 코드의 DOM 트리는 하기와 같이 표현할 수 있다.
Document
├── html
│ ├── head
│ │ └── title
│ │ └── "Example"
│ └── body
│ ├── h1
│ │ └── "Welcome to My Website"
│ └── p
│ └── "This is a paragraph."
3) JavaScript와 DOM 조작
: JavaScript는 웹 페이지를 동적으로 만들기 위해 DOM을 조작할 수 있는 프로그래밍 언어.
- JavaScript를 사용하여 DOM 요소를 추가, 수정, 삭제가 가능.
- 예를 들어, 웹 페이지의 텍스트를 변경하거나 새로운 요소를 추가하는 등의 작업이 가능함.
<!DOCTYPE html>
<html>
<head>
<title>DOM Example</title>
</head>
<body>
<h1 id="header">Welcome to My Website</h1>
<p>This is a paragraph.</p>
<button onclick="changeText()">Change Text</button>
<script>
function changeText() {
// DOM을 이용하여 h1 요소를 선택하고 텍스트를 변경
document.getElementById("header").innerText = "Hello, World!";
}
</script>
</body>
</html>● document.getElementById
JavaScript가 DOM을 통해 HTML 요소에 접근하고 조작할 수 있도록 해주는 메서드이다.
DOM은 HTML 문서의 구조를 나타내고, document.getElementById는 그 구조 내에서 특정 요소를 선택하는 도구라고 이해하면 된다.
1 - 2) 기존 웹 개발 방식(HTML, JavaScript)
<script>
var div = document.querySelector('#app');
var str = 'hello world';
div.innerHTML = str;
str = 'hello world!!!';
////////라고 해도 화면에는 hello world로 뜸.
div.innerHTML = str;
////////를 마지막 줄에 추가해야 화면에 hello world!!!로 뜸.
1 - 3) Reactivity 구현
위의 코드를 Vue.js의 핵심 기능인 Reactivity를 이용하면 어떤 점들이 편해지는지 알아보자.
<script>
var div = document.querySelector('#app');
var viewModel = {}; //viewModel이라는 객체 선언
// Object.defineProperty(대상 객체, 객체의 속성, {
// //정의할 내용
// })
Object.defineProperty(viewModel, 'str', {
// 속성에 접근했을 때의 동작을 정의
get: function() {
console.log('접근');
},
// 속성에 값을 할당했을 때의 동작을 정의
set: function(newValue) {
console.log('할당', newValue);
}
})
위 코드와 같이 작성하게 되면, set: function부에 작성한 부분이 바꿀 때마다 적용이 가능하다.
=> Reactivity
=> 데이터의 변화를 라이브러리에서 감지해서 알아서 화면을 자동으로 그려준 것(Reactivity의 정의)
What about...
1) Differ with Ref vs Reactive
https://chanyoung-dev.github.io/Frontend/Vue/refReactive/
Ref와 Reactive
반응형 데이터 반응형 데이터 ref와 reactive에 대하여
chanyoung-dev.github.io
참조 링크 ↓
----------------------------------------------------------------------------------------------------------------------------------
1 - 3) Reactivity 코드 中 Object.defineProperty에 대하여...
Object.defineProperty API 문서 링크 참조하기
→ Object.defineProperty : 객체의 동작을 재정의하는 API
=> 특정 변수의 동작과 객체의 특정 속성의 동작을 재정의(동작을 마음대로 바꿀 수 있음)하는 것.
Object.defineProperties() - JavaScript | MDN
Object.defineProperties() 메서드는 객체에 새로운 속성을 정의하거나 기존의 속성을 수정하고, 그 객체를 반환한다.
developer.mozilla.org