가상 돔 개념

우선

1. 돔(DOM: Document Object Model) - 구조화 된 텍스트 단위

 

HTML은 DOM을 컨트롤 할수 있다? 가 맞나 자바스크립트는 DOM을 컨트롤 할수 있다? 가 맞나.

체감상 javascript로 DOM을 호출하고 변경 할수 있다.

 

예~전에 

XML을 파싱하는 방법에 두가지가 있다고 배웠다.

하나가 DOM, SAX

DOM은 로딩시 문서 모두를 메모리에 올려서 처음 로딩할때 오래 걸리지만 그 이후 빠르다고 알고 있고

SAX는 클릭등, 이벤트 시 하이라키를 그 때 읽는 방식으로 기억하고 있다. 트리처럼

 

그 DOM이 이 DOM이네.

요즘의 웹페이지는 내가 저걸 읽던 시절과는 확연히 다른 정보량과 복잡한 구조로 되어있고, 

가변적이다!

그래서 가상돔이라는 개념이 나온것 같다.

 

2. 가상돔을 살펴본 이유

Vue.js 공부중이고 거기서 나오는 개념이다.

 

3. 아래 링크에 꽤 잘 설명되어있다.

 

참고링크

https://blog.hanumoka.net/2018/08/15/web-20180815-web-virtual-dom/

가상돔(Virtual DOM)?

이런 블로그 보면, 이 사람들은 이미 작년에 다 공부한 내용을 난 이제 보는 자괴감에 빠질때가 있는데

그냥 난 거북이이고, 나를 뭐랑 비교할건 없다고 생각한다.

 

 4. 내가 이해한거

사용자가 화면을 클릭하던 뭔가 변경을 막 해, 그럼 그게 가상돔에 계속 반영됨.

실제 브라우저는 대기. 뭔일인지 모름.

그리고 웹프레임워크(vue.js, react.js, angular.js등)에서 어느 시점에 

가상돔과 실제 브라우저 돔 사이의 차이점만 골라서 브라우저한테 반영함.

브라우저에 100번 변경될 것을 1번 하게 하는것.

그래서 저 블로거는 버퍼라는 얘기를 한거고.

 

근데 그런 반영시점은?

어디서부터 어디까지는 가상돔이고 어디서부터는 실제 브라우저 돔인가...

 

5. 적용 예제

https://falsy.me/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%9B%84%EB%A0%A4%EC%B9%98%EA%B8%B0-1-%EA%B0%80%EC%83%81%EB%8F%94/ 

폴시랩

 

6. 장점

빠르다. 속도지 뭐.

 

7. 단점

난 가상돔을 메모리에 주구장창 올리게 되면 브라우저가 버벅거리게 될거라 생각하는데

프레임워크에서 아마 잘 관리해서인지 딱히 단점으로 검색되지않는다.

 

아직 제대로 안써봐서 체감적인 장단점을 서술 할순 없는 단계

근데 장단점을 검색해보면 가상돔의 장단점이라기 보다는 리액트, vue의 장단점이 나오게 되는 상황이다.

 

결론:

빨리 vue.js 제대로 써봐야한다. https://kr.vuejs.org/v2/guide/

시작하기 — Vue.js