가상돔2 RxJS로 산성비 만들기(3) - 가상돔 업데이트를 위한 Diff 알고리즘 Diff 알고리즘 구현 vDOM에서 무엇보다 중요한 것은 변경된 DOM 요소만을 업데이트 하는 Diff 알고리즘이다. 이번 글에서는 이전 가상돔 글에 이어, Diff 알고리즘을 완성해보도록 한다. Diff 알고리즘의 구현은 개발자 황준일님의 블로그를 참고해 내가 만든 웹 컴포넌트에 맞게 다시 작성했다. updateElement 함수에서 prev는 이전 노드, next는 새로운 노드, $parent는 prev의 부모 엘리먼트, parentComponent는 prev의 부모 vDOM 컴포넌트, index는 prev와 next가 부모의 children 중 몇 번째 자식인지를 의미한다. 여기서의 노드는 vDOM 요소인 Component와 Element의 인스턴스, 그리고 TextNode를 의미한다. 또한 이후 .. 2023. 2. 9. RxJS로 산성비 만들기(2) - 웹 컴포넌트(가상돔) 구현하기 혹시 조회수가 높아질까 싶어 썸네일용 이미지도 넣어본다😂 웹 컴포넌트 특히, 가상돔을 만드는게 여간 어려운 일이 아니었다. 굳이 굳이 가상돔을 구현한 데에는 두 가지 이유가 있다.(이제부터 가상돔은 vDOM, 실제돔은 rDOM이라고 부르도록 하겠다.) 첫째로 컴포넌트의 상태가 변함에 따라 다시 렌더링 되었을 때, 기존 게임 함수가 의존하고 있는 엘리먼트가 항상 그대로 유지되어야만 했다. 예를 들어, 게임 함수가 엘리먼트에 의존하고 있을 때, 외부 상태의 변화로 인해 해당 엘리먼트도 함께 리렌더링 된다면, 게임은 더 이상 rDOM에 존재하지 않는 엘리먼트를 참조하게 된다. 아래 코드에서 render 버튼을 클릭하면 이후로 버튼들이 작동하지 않게 되는 것과 같다. 둘째로, RxJS를 사용함에 따라 컴포넌트가.. 2023. 2. 6. 이전 1 다음
