프론트엔드 개발의 두 가지 세계

모든 프론트엔드 개발 프레임워크는 어떤 방식으로든 DOM을 조작하고 있습니다. 그들은 Virtual DOM 또는 Shadow DOM을 사용합니다. 이 기사를 쓰는 목적은 이러한 접근 방식을 실제로 구현하고 논의하여 지식을 요약하는 것입니다.

What is DOM?
DOM(Document Object Model) also known as a tree-structured HTML node interface, where each node represents an HTML element.

가상 DOM이란 무엇입니까?

Javascript plain object representing the structure of actual DOM. At the time of state change frameworks updates objects on background and then render it on DOM tree.

Virtual DOM은 React Framework에서 도입되어 많이 사용되어 다른 프레임워크에 비해 가장 안정적이고 빠릅니다. 다음은 가상 DOM 객체가 실제 세계에서 어떻게 구성될 수 있는지에 대한 빠른 표현입니다. 주의할 점은 다른 속성 이름을 사용할 수 있습니다.

// Here is an HTML Element
<div id="app">Hello World!</div>

// In virtual dom we can construct this as
const vApp = {
  tagName: 'div',
  attributes: {
    id: 'app',
  },
  children: [
    'Hello World'
  ]
};

위의 예에서는 거의 중요하지 않은 고유한 속성 이름을 가질 수 있습니다. Virtual DOM은 프로그래밍 인터페이스를 따르지 않기 때문에 실제 DOM에 비해 더 가볍습니다.

나만의 가상 DOM을 만드시겠습니까?

자신의 가상 DOM을 만들려면 다음 구성 요소가 필요합니다.

For understanding the implementation please refer to Jason Yu article at

createElement(tagName, options) 이 함수는 "가상 요소"를 반환합니다.

render(vNode)는 가상 노드를 가져와 해당 DOM을 반환합니다.

마운트($node, $target)는 ""의 데이터를 대체하여 실제 DOM에서 vapp을 렌더링합니다.

diff(oldVTree, newVTree)는 두 가상 트리 간의 차이를 계산합니다. patch 의 실제 DOM을 가져오고 실제 DOM에 적절한 작업을 수행하여 실제 DOM이 oldVTree 처럼 보이도록 하는 newVTree 함수를 반환합니다.

diffAttrs(oldAttrs, newAttrs) 새 속성에 대한 이전 속성의 패치를 만들고 다른 속성을 제거합니다.

diffChildren(oldVChildren, newVChildren)은 작성자 문서에 표시된 여러 사례를 고려하여 자식을 대체하는 데 사용됩니다.

main.js는 가상 DOM을 구현합니다.

감사
코드가 매우 명확하게 구현되고 Jason Yu가 설명하기 때문입니다. 나는 그의 기사에서만 그것을 사용했습니다. 나는 그의 지식을 공유하고 우리가 새로운 것을 배울 수 있도록 도와준 그에게 감사하고 싶습니다. 자세한 내용은 에서 그의 블로그로 이동하여 확인하십시오.

요약
지금까지 가상 DOM의 기본 개념과 우리 자신의 가상 DOM 시스템을 만드는 방법에 대해 살펴보았습니다. 다음으로 React에서의 Virtual DOM 구현과 Virtual DOM과 Shadow DOM을 사용한 Framework에 대해 설명하겠습니다. 따라서 Two Worlds of Front-End Development에 대한 시리즈의 다음 기사를 기대해 주십시오.