정의
- 가상 DOM을 기반으로 하는 반응형 및 컴포넌트 기반 아키텍처를 제공하는 JavaScript 프레임워크의 한 종류
※ DOM(Document Object Model, 문서 객체 모델) = <body> 같은 html문서의 태그들을 JavaScript가 이용할 수 있도록 생성한 객체 모델
- HTML + CSS + JavaScript를 혼용
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM</title >
<script type= "text/javascript">
window.onload = function(){
//1. DOM 생성
var header = document.createElement('p'); // p 태그(엘리먼트) 생성
var textNode = document.createTextNode('Hello DOM'); // 텍스트(텍스트 노드) 생성
//2. 태그 안에 텍스트 추가
header.appendChild(textNode);
//3. body DOM에 header DOM 추가
document.body.appendChild(header);
};
</script>
</head>
<body>
</body>
</html>
특징
- 가벼운 크기
- 단순하고 직관적인 문법
- Vue 앱은 HTML 코드의 한 부분만 제어할 수 있음 (자식 요소 제어 가능)
- MVVM 패턴 = Model-View-ViewModel 패턴으로 데이터와 비즈니스 로직을 담당하는 Model, 사용자에게 보여지는 시각적인 요소인 View, View에 대한 상태와 동작을 정의하고 Model과의 데이터 바인딩 및 사용자 입력에 대한 이벤트 처리와 명령 실행을 처리하는 ViewModel로 구성 → ViewModel이 존재함으로써 양방향 데이터 바인딩이 가능
- 양방향 데이터 바인딩 (Reactive Data Binding) = 화면상에 보여지는 데이터(View-HTML) 혹은 브라우저 메모리에 있는 데이터(Model-JavaScript) 둘 중에 하나만 변경이 되도 서로 동기화되어 반영
- 컴포넌트 기반 = UI를 작은 컴포넌트로 분리하여 개발 (각 컴포넌트는 재사용 가능하며 관련 로직과 스타일을 캡슐화)
- 가상 DOM (Virtual DOM) = 변경된 부분만 실제 DOM에 적용하는 가상 DOM을 사용함으로써 불필요한 렌더링을 최소화하여 빠른 렌더링 속도와 효율적인 업데이트 관리를 제공
- 디렉티브(Directives) 제공 = v- 접두사가 붙은 특수 속성으로 화면의 요소에 특정 동작이나 데이터 바인딩을 수행하도록 지시
- 이벤트 핸들링 및 메소드 = 이벤트 처리를 위한 편리한 문법을 제공하며 메소드를 이용하여 특정 동작을 정의할 수 있음
- 라우팅 및 상태 관리 = Vue Router를 사용하여 클라이언트 측 라우팅을 구현할 수 있고 Vuex를 통해 상태 관리 가능
→ SPA에 유리
※ SPA(Single Page Application) = 페이지 전환 없이 동적으로 콘텐츠를 로드하고 업데이트하는 웹 애플리케이션
댓글