안에 자식 노드가 있다. map은 배열을 반환하고

<div>
   <div>hello</div>
   Array.map((name) => { <div>${name}</div> });
</div>
----
위와 같은 코드
<div>
   <div>hello</div>
   <button>name1</button>
   <button>name2</button>
</div>
---
[{ type: div , props: '', children: 'hello'}, [{.type: button, props: '', children: name1 }, { .type: button, props: '', children: name2  }]]

nomalizeVNode 정규화를 해주는 이유 : 객체/배열 구조 데이터를 평탄하고 효율적으로 구성하는 것

// 정규화 전 (비정규화 상태)
// company 정보가 사용자마다 중복되어 있다. 이렇게 되면 수정 시 모든 곳을 찾아서 바꿔야 한다.
const users = [
  {
    id: 1,
    name: "Alice",
    company: { id: 100, name: "OpenAI" }
  },
  {
    id: 2,
    name: "Bob",
    company: { id: 100, name: "OpenAI" }
  }
];

// 회사 정보가 한 곳에만 있어서 변경, 추적이 쉽고 실수도 줄어든다.
const users = {
  1: { id: 1, name: "Alice", companyId: 100 },
  2: { id: 2, name: "Bob", companyId: 100 }
};

const companies = {
  100: { id: 100, name: "OpenAI" }
};

createElement entries 사용하여 attr , value 로 배열화하여 element 요소 넣어주기.

function updateAttributes($el, props) {
    Object.entries(props).forEach(([attr, value]) => {
      if (attr.startsWith("on") && typeof value === "function") {
        const eventType = attr.toLowerCase().slice(2);
        addEvent($el, eventType, value);
      } else if (["checked", "disabled", "selected", "readOnly"].includes(attr)) {
        $el[attr] = Boolean(value);
      } else if (attr === "className") {
        $el.setAttribute("class", value);
      } else if (attr === "style" && typeof value === "object") {
        Object.assign($el.style, value);
      } else {
        $el.setAttribute(attr, value);
      }
    });
  }

eventManager

• 이벤트 위임 Map, eventMap JavaScript에서 키-값 쌍을 저장하는 자료구조지만, 사용 목적과 내부 동작 방식에 큰 차이

📊 Map vs WeakMap 차이 요약

항목	Map	WeakMap
키 타입	객체, 원시값 모두 가능	객체만 가능
반복	가능	불가능
크기 확인	.size 가능	불가능
GC 영향	수동 제거 필요	자동 제거 (키가 없으면 값도 제거됨)
사용 목적	일반적인 키-값 저장	프라이빗 데이터나 메모리 누수 방지 등

• WeakMap 을 사용하는 이유 메모리 누수 방지 (가비지 컬렉션) DOM 요소가 삭제되면 WeakMap의 키(= 요소)에 대한 참조도 사라짐 그러면 JavaScript 엔진이 해당 entry를 자동으로 메모리에서 제거함

const el = document.createElement("div");
addEvent(el, "click", handler);
document.body.removeChild(el); // el DOM에서 제거됨

만약 Map을 사용했다면 eventMap이 el을 계속 참조 → 메모리 누수 발생 하지만 WeakMap은 el이 참조되지 않으면 자동으로 해당 데이터 제거됨

updateElement

• diffing 알고리즘 두 데이터 구조 간의 차이점(Difference)을 찾아내는 알고리즘

• 주로 DOM을 효율적으로 업데이트하기 위해 사용
• 성능 최적화를 위해 필요 (전체 DOM 대신 변경된 부분만 업데이트)

renderElement

• 이전 Node 와 현재 Node

const vNodeMap = new WeakMap();

export function renderElement(vNode, container) {
  const normalizedVNode = normalizeVNode(vNode);
  const oldNode = vNodeMap.get(container);
  
  if (!oldNode) {
    // 최초 렌더링시에는 createElement로 DOM을 생성하고
    const element = createElement(normalizedVNode);
    container.appendChild(element);
  } else {
    // 이후에는 updateElement로 기존 DOM을 업데이트한다.
    updateElement(container, normalizedVNode, oldNode, 0);
  }

  // 렌더링이 완료되면 container에 이벤트를 등록한다.
  setupEventListeners(container);
  vNodeMap.set(container, normalizedVNode);
}

코드 품질

코드 리팩토링 필요한 부분

• flat 메서드 사용 (코드가 더 간결해짐)
• flat 메서드의 존재를 모르고 AI를 통해 함수로 작성하였다.

export function createVNode(type, props, ...children) {
  // Helper to flatten deeply nested arrays
  function flatten(arr) {
    return arr.reduce((acc, val) => {
      if (Array.isArray(val)) {
        acc.push(...flatten(val));
      } else {
        acc.push(val);
      }
      return acc;
    }, []);
  }

  // Remove null, undefined, boolean (except 0/number)
  function filterValid(child) {
    return !(child === null || child === undefined || typeof child === "boolean");
  }

  // Flatten and filter children
  const flatChildren = flatten(children).filter(filterValid);

  return {
    type,
    props,
    children: flatChildren,
  };
}

// children.flat(Infinity) 사용
// flat(depth)는 배열을 얼마나 깊이까지 평탄화할지를 지정하는데, Infinity를 넣으면 모든 깊이까지 완전히 펼치라는 의미
export function createVNode(type, props, ...children) {
  return {
    type,
    props,
    children: children.flat(Infinity).filter((value) => value === 0 || Boolean(value)),
  };

학습 효과 분석

• 이벤트 위임, 직접 바인딩의 차이점 addEvent (이벤트 위임) 과 addEventListener (직접 바인딩) 의 차이 요약표

항목	addEvent	addEventListener
리스너 수	1개 (이벤트 종류별 1개)	요소마다 1개씩
메모리 사용량	적음	많아질 수 있음
동적 요소 대응	자동	수동 등록 필요
이벤트 타겟 정확성	event.target 기반, 부모 탐색 필요	명확하게 해당 요소
이벤트 종류 제한	기본적으로 버블링되는 이벤트만 가능	캡처링 포함 모든 이벤트 가능
성능 (많은 요소일 때)	우수	성능 저하 가능
구현 난이도	약간 복잡	간단함

과제 피드백

createElement.js 파일에서 createDocumentFragment 사용 이유 알아보기..!

• VirtualDOM 을 직접 구현해보면서 VirtualDOM에 대해 알아갈 수 있어 좋은 기회가 된거 같습니다. [바뀐 부분만 업데이트 해주어서 효율적]

리뷰 받고 싶은 내용

1. 평탄화를 해줄 때 "" 으로 return 해주는 이유와 falsy한 값을 왜 필터링 해주는 지 궁금합니다.

export function normalizeVNode(vNode) {  
  if (vNode == null || vNode == undefined || typeof(vNode) == "boolean") {
    return "";
  }
  
  if (typeof(vNode) == "number" || typeof(vNode) == "string") {
    return String(vNode);
  }
  
  if (typeof vNode.type === "function") {
    return normalizeVNode(vNode.type({ ...vNode.props, children : vNode.children }));
  }
 
  return {
    type: vNode.type,
    props: vNode.props || null,
    children: vNode.children.map(normalizeVNode).filter(Boolean),
  };
}

2. handleEvent 함수에서 elementEvents 를 디버그 찍어보면 아래 내용이 나오는데, 어떤 것인지 궁금합니다. [Function: spy] { 안에 있는 내용은 이벤트 핸들러들인가요 ? 무엇인지 궁금합니다. }

Map(1) {
  'click' => Set(1) {
    [Function: spy] {
      getMockName: [Function (anonymous)],
      mockName: [Function (anonymous)],
      mockClear: [Function (anonymous)],
      mockReset: [Function (anonymous)],
      mockRestore: [Function (anonymous)],
      getMockImplementation: [Function (anonymous)],
      mockImplementation: [Function (anonymous)],
      mockImplementationOnce: [Function (anonymous)],
      withImplementation: [Function: withImplementation],
      mockReturnThis: [Function (anonymous)],
      mockReturnValue: [Function (anonymous)],
      mockReturnValueOnce: [Function (anonymous)],
      mockResolvedValue: [Function (anonymous)],
      mockResolvedValueOnce: [Function (anonymous)],
      mockRejectedValue: [Function (anonymous)],
      mockRejectedValueOnce: [Function (anonymous)],
      [Symbol(nodejs.dispose)]: [Function (anonymous)]
    }
  }
}

function handleEvent(event) {
    let target = event.target;

    while (target && target !== rootElement) {
        const elementEvents = eventMap.get(target);
        if (elementEvents) {
            const handlers = elementEvents.get(event.type);
            if (handlers) {
                handlers.forEach((handler) => handler(event));
                return;
            }
        }
        target = target.parentElement;
    }
}