기술 정리/vue3 가상돔 vue.js 1. 가상돔에 업데이트 우선 가상의 DOM은 실제 DOM의 복사본이라고 생각하면 될 것 같습니다. 말 그대로 가상의 돔이기 때문에 화면에 아무것도 렌더링할 필요가 없어지므로 변경할 때마다 DOM API를 호출하지 않는다는 점에서 이점을 찾을 수 있었습니다. 2. 추후 실제 dom 과 sync Virtual DOM이 메모리에 저장된 상태에서 변경 사항들을 먼저 반영한 뒤 기존 DOM과 비교 후 변경된 사항만을 DOM에 전달해 줍니다. 즉 실제 DOM의 렌더링 횟수를 줄여주므로 성능에 적은 영향을 주게 되는 것입니다. 2023. 4. 1. [vue js] mvvm 란? 정의 Model + View + View Model 모델과 뷰 뿐만 아니라 뷰와 뷰 모델 간의 의존성까지 최소화한 형태로, UI가 실제 코드와 거의 완벽하게 분리된 것이 특징 MVVM 패턴의 목표는 비즈니스 로직과 프레젠테이션 로직을 UI로부터 분리하는 것입니다 View : 사용자에서 보여지는 UI 부분입니다. 유저 인터페이스 HTML/CSS/XML/YAML 등으로 작성 View Model : View를 나타내기 위한 데이터 처리 (모델과 비슷하지만, 모델과 뷰사이, 모델보다는 적극적) 상태와 연산(명령) View의 실제 논리 및 데이터 흐름을 담당 상태 데이터를 변경하면 즉시 View에 반영 모델과 뷰 사이의 어댑터로서 변경이 생겼을 때 변경을 최소화할 수 있다. Model : 어플리케이션에서 사용되는.. 2023. 3. 7. vue js 란? 왜 쓸까? 돔? 가상돔? vue.js 란? - 사용자 인터페이스를 만들기 위한 동적 java script 프레임워크 - web app 만드는 툴 왜 리액트 안쓰고 vue 쓰는지? - 쉬워서. - 코드 짤 때 rigth way 가 정해져 있음. (통일 쉬움, 고민 필요없어서 좋음) - html 랜더링이 더 빠름. 실시간 반영 빨라야할 때 (ms 차이지만) - 업데이트 잘됨 (장기적인 지원) 돔? - 웹 앱에 있는 html 요소들을 구조(트리)로 표현한것. - 문제점 : 노드의 수가 많아질 수록 속도가 느려지고, dom 업데이트에 잦은 오류 발생할 수 있음 가상 돔? - 추상화된 돔. / dom 복사본을 메모리 내에 저장하여 사용 - dom 업데이트 보다 빠름 - 원본 HTML DOM 을 표현하는 메모리 상의 가벼운 DOM 트리로,.. 2023. 2. 27. 이전 1 다음