DOM

이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. 이전게시글에서 render와 rerender를 구현했다....만 너무 성능이 안좋을 것 같으니 개선을 해보고자 한다. 참고로 아래의 diffing알고리즘은 이 블로그 글의 코드를 기반으로 작성, 개선되었다. 기존의 DOM요소 변경은 특정 DOM요소를 DOM API를 통해 가져와서 그 부분만 업데이트하는 형태이다. 이런 형태를 지금의 render방식에 적용할수는 없을까? 할수있다! 바로 기존의 element객체를 활용하는 것이다. 우리는 element객체를 DOM요소로 변경했다. 따라서 element객체의 중첩구조와 DOM요소의 중첩구조는 완벽하게 동일하다. 따라서..

이 글을 읽기에 앞서 이 게시글은 리액트처럼 동작 하는 코드를 작성해보는 것이지 리액트와 100% 동일한 코드를 작성하려 하는 것이 아닙니다. 이전게시글을 통해 JSX요소를 객체형태로 변환하는 것 까지 진행했다. 이제 JSX 컴포넌트는 tagName, props객체, children배열을 가진 객체로 관리된다. 그럼 이제 이걸 DOM api를 사용해서 객체를 DOM요소로 변환시키자. makeDOM /** * @param {object} element createElement로 만들어진 요소 * @param {string} element.tagName 요소의 태그 이름 * @param {object} element.props 요소의 속성 객체 * @param {Array|undefined} element...

Dom Class class를 사용해 Dom을 쉽게 생성할 것이다. 그냥 할수도 있겠지만, 그냥 해봤더니 DOM요소 하나 만드는데 5줄 넘게 든다. 이러면 나중에 읽기가 싫어진다. 분명 이거보다 나은 방법이 있겠지만, 지금 당장 떠오른 방법은 이거니 이렇게 하겠다. class Dom { constructor(elementType, className, innerHTML) { this.element = document.createElement(elementType); if (innerHTML !== undefined) { if (elementType === 'input') { this.element.placeholder = innerHTML; } else { this.element.innerHTML = in..