📍 Vue.js란 무엇인가?
MVVM 패턴을 따르는 프론트엔드 자바스크립트 프레임워크
- 컴포넌트 기반 아키텍처를 가지고 있어서, 재사용성이 높은 UI 컴포넌트를 개발하는데 유용
- 다른 프런트엔드 프레임워크(Augular, React)와 비교했을 때 상대적으로 가볍고 빠름
- 문법이 단순하고 간결하여 초기 학습 비용이 낮고 누구나 쉽게 접근 가능
📍 MVVM 패턴이란?
Model-View-ViewModel
소프트웨어 아키텍처 디자인 패턴 중 하나로, 사용자 인터페이스와 비즈니스 로직을 분리하여 애플리케이션을 개발하는 방법
- Model: 애플리케이션의 데이터와 비즈니스 로직 담당
- View: 사용자 인터페이스 담당
- ViewModel: View와 Model 간의 연결고리 역할, ViewModel은 View에서 필요한 데이터와 메소드를 가지고 있으며, Model과 View 간의 데이터 변환을 처리
📍 기존 개발 방식(HTML, JavaScript)와 Vue.js
기존 개발 방식
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
var div = document.querySelector('#app');
var str = 'hello world';
div.innerHTML = str;
str = 'hello world!!!'; // 바뀌지 않는다.
div.innerHTML = str; // 바뀐 정보를 대입해야 반영
</script>
</body>
</html>str이라는 변수의 값을 변경하였을 때, 그 값이 화면에 자동으로 업데이트 되지 않는다.
기존 HTML, JavaScript 개발 방식에서는 일반적으로 자바스크립트를 사용하여 DOM을 조작하여 UI를 구현한다.
이 방식은 작은 웹 페이지나 단순한 UI를 가진 애플리케이션에서는 적합하지만, 큰 규모의 애플리케이션에서는 코드의 복잡도가 증가하고 유지보수가 어려워질 수 있다.
Vue.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script>
var div = document.querySelector('#app');
var viewModel = {};
// Object.defineProperty('대상 객체', '객체의 속성', {
// // 정의할 내용
// }) // 객체의 동작을 재정의
(function() {
function init() {
Object.defineProperty(viewModel, 'str', {
// 속성에 접근했을 때의 동작을 정의
get: function() {
console.log('접근');
},
// 속성에 값을 할당했을 때의 동작을 정의
set: function(newValue) {
console.log('할당', newValue);
render(newValue);
}
});
}
function render(value) {
div.innerHTML = value;
}
init();
})();
</script>
</body>
</html>Vue.js를 사용한 개발 방식에서는 컴포넌트라는 단위로 UI를 나눠 작성한다.
각 컴포넌트는 자신만의 데이터와 메소드, 그리고 자체적으로 동작하는 뷰(View)를 가지고 있으며, 필요에 따라 다른 컴포넌트와 조합하여 사용할 수 있다. 이로 인해 코드의 재사용성이 높아지고 유지보수가 용이해진다.
또한 Vue.js는 데이터 반응성(Reactivity)과 가상 DOM(Virtual DOM)을 사용하여 UI렌더링을 효율적으로 한다.
데이터 반응성을 통해 데이터 변경에 따라 화면이 자동으로 업데이트되고,
가상 DOM을 통해 최소한의 DOM 조작만으로도 빠르게 UI를 렌더링할 수 있다.
--참고--
Vue.js 시작하기 - Age of Vue.js - 인프런 | 강의
Vue.js로 쉽게 웹 개발할 수 있도록 기본 개념과 핵심 기능에 대해서 학습하고 구현해봅니다. 강좌를 들으시고 나면 Vue.js로 프런트엔드 개발을 하시는게 재밌어질거에요., - 강의 소개 | 인프런
www.inflearn.com
Vue.js 입문서 - 프론트엔드 개발자를 위한
Vue.js를 시작하기 위한 소개, 구성요소, 구조, Vue Router, HTTP 통신 라이브러리 등
joshua1988.github.io