React의 가상 DOM, Vue의 가상 DOM과 비교 가상 DOM이란?DOM (Document Object Model)브라우저가 제공하는 문서 객체 모델HTML 요소를 트리 구조로 표현하며, 브라우저에서 렌더링되는 실제 DOM을 말한다.실제 DOM은 업데이트가 발생할때마다 전체 DOM 구조를 다시 계산하고 렌더링한다. 가상 DOM (Virtual DOM)메모리 상에서 실제 DOM의 경량화된 사본을 만드는 개념으로 DOM 상태를 Javascript 객체로 나타내어 빠르게 연산할수 있다. 실제 DOM 조작 전에 변경 사항을 비교하고 필요한 부분만 실제 DOM에 업데이트 하는 방식으로 성능 최적화를 하기 위하여 생성된다.리액트는 가상 DOM을 업데이트 할때 최소한의 DOM 업데이트를 보장하기 때문에 복잡한 ..
shadowDOM HTML, CSS, JS 전반적 특성 때문에 생기는 웹앨 빌드의 취약성을 제거한다. id나 class가 중복되어도 충돌되는지에 대한 여부를 알려주지 않기때문에 버그가 많았다. 스타일이 쌓이고 쌓이다가.. 도저히 안될때면 !important를 통해 스타일을 해결하기도 했다. shadowDOM은 CSS및 DOM을 수정한다. vanilla 자바스크립트에서 CSS를 마크업과 번들로 묶고 세부정보를 숨겨 자체포함 구성요소로 작성할 수 있다. 구성요소 HTML Templates Shadow DOM Custom elements HTML Imports CSS범위, DOM 캡슐화 등이 shadowDOM으로 인해 재사용가능하기 때문에 shadowDOM을 사용하면 웹 컴포넌트로 만들 필요가 없다. 자체적으..
- Total
- Today
- Yesterday
- JavaScript
- TypeScript
- Article
- 타입스크립트
- 뷰
- 메서드
- 아티클
- 차이
- 기초
- 브라우저
- Study
- html
- VUE
- JS
- 제이쿼리
- css
- 통신
- 공부
- 프로젝트
- vue.js
- 자바스크립트
- frontend
- jQuery
- 강의
- 프론트엔드
- React
- 리액트
- 제로초
- 코딩애플
- Method
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | ||||||
2 | 3 | 4 | 5 | 6 | 7 | 8 |
9 | 10 | 11 | 12 | 13 | 14 | 15 |
16 | 17 | 18 | 19 | 20 | 21 | 22 |
23 | 24 | 25 | 26 | 27 | 28 |