Vue.js란?
- 자바스크립트 프레임워크
- 웹 화면 작성에 최적화
Vue.js의 특징
SPA(Single Page Application)
- html 한 개로 어플리케이션을 구성
- section 영역의 내용만 바뀜
- (ex) React.js, Vue.js, Svelte
MVVM 패턴
- Model: 순수 데이터
- View: 화면
- ViewModel: 순수한 데이터를 화면에 출력하기 편하게끔 가공한 형태(변수, 함수 반환 ...)
- event driven
- data driven - 데이터 수정을 감지
가상 DOM(Virtual DOM)
- 브라우저 메모리에서 관리하는 DOM에 대한 추상 객체
- 빠른 UI 렌더링 성능을 제공
- 브라우저 DOM 목적: 화면에 직접 그리는 작업을 수행
- 가상 DOM 목적: 변경된 부분을 탐지하는 것
가상 DOM은 어디서 만들어지나요?
왜 굳이 가상 DOM을 사용하나요?
Framework에서 만들어집니당(Vue.js, React ... )
가상 DOM을 사용 하는 이유는 ...... 👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻👇🏻
가상 DOM을 사용하는 이유?
- 렌더링의 속도 향상 때문 💨
- 그렇다면 렌더링 과정은 무엇인지? 왜 가상 DOM이 렌더링 속도를 향상 시키는지?
[WEB] 브라우저 엔진 렌더링의 과정
브라우저 엔진 렌더링 과정[ 중요 렌더링 경로, Critical Rendering Path ] = 렌더링 엔진이 거치는 전체 프로세스 HTML 파싱CSS 파싱 및 스타일 계산레이아웃(리플로우) ⭐⭐⭐브라우저는 요소의 크
dkyxxxm.tistory.com
- 변경 사항을 가상 DOM에서 먼저 처리하고, 이후에 실제 DOM과 비교하여 변경된 부분만을 업데이트!
- 이를 통해 전체적인 렌더링 과정을 최적화 + 성능 향상
렌더링 과정을 알아야 가상 DOM을 쓰는 이유까지 정확하게 이해할 수 있으니 꼭 읽어보기를 추천합니다 .. 👸🏻
어쨌거나! 이번 글의 핵심
- Vue.js의 가장 큰 특징은 MVVM 모델과 가상 DOM을 사용하는 것.
- MVVM: Model, View, ViewModel
- 가상 DOM: 렌더링의 속도 향상을 높여줌
- 기존 DOM은 변경 사항이 있을 경우 전체 다 렌더링을 하지만,
가상 DOM은 기존의 DOM 구조와 비교해 변경된 부분만 찾아 렌더링.