프레임워크 없이 SPA 만들기[2주차] 회고

2주차 과제를 진행하면서 배운 것들

1️⃣ VirtualDOM?

Virtual DOM은 실제 DOM과 똑같은 구조를 가진 메모리 상의 가상 트리다. 주로 React, Vue 등의 프레임워크에서 사용되며, 실제 DOM을 직접 조작하는 대신 Virtual DOM을 이용해 성능을 향상시킨다.

🔍 실제 DOM과 Virtual DOM 비교

항목	실제 DOM	Virtual DOM
위치	브라우저 내부	메모리 내부 (JS 객체)
속도	느림 (무거움)	빠름 (가벼움)
사용 비용	높음 (재렌더링 부담)	낮음 (차이점만 계산해서 적용)
업데이트 방식	직접 조작	차이 계산 후 최소 변경

2️⃣ CreateVNode

• 평탄화(flattening) 해주는 이유
  중첩된 배열을 단일 배열로 펼쳐서 다루기 쉽게 만들기 위해서

아래 코드를 보면

안에 자식 노드가 있다.
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  }]]

3️⃣ NormalizeVNode

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

// 정규화 전 (비정규화 상태)
// 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" }
};

4️⃣ Diffing 알고리즘

🔍 1. Diffing 알고리즘이란?

간단히 말하면:

이전 상태(Old State)와 새로운 상태(New State)를 비교해서,
"무엇이 변경되었는지(diff)"를 계산하는 알고리즘이다.

UI에서는 일반적으로 Virtual DOM을 비교할 때 사용되며,
React, Vue 등 대부분의 모던 프론트엔드 프레임워크에서 핵심 역할을 한다.

🔧 2. 왜 사용하는가?

✅ 문제
브라우저의 DOM 조작은 느립니다.

상태가 바뀔 때마다 전체 DOM을 다시 렌더링하면 성능 저하가 크다.

✅ 해결 방법: Diffing
바뀐 부분만 찾아서(=diff)

해당 부분만 최소한의 DOM 조작으로 업데이트함

즉, 최적화된 UI 업데이트 방식
🧠 핵심 요약
| 항목 | 내용 |
|-----------------|----------------------------------------------------------------------|
| 무엇인가? | 두 구조 간 차이점을 찾아내는 알고리즘 |
| 왜 필요한가? | 성능 최적화를 위해 (전체 DOM 대신 변경된 부분만 업데이트) |
| 어디서 쓰나? | Virtual DOM 기반 UI 라이브러리 (React, Vue 등) |
| 이점은? | 빠른 렌더링, 부드러운 사용자 경험 |

5️⃣ Map , WeakMap

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이 참조되지 않으면 자동으로 해당 데이터 제거됨

참고링크 : https://devocean.sk.com/blog/techBoardDetail.do?ID=165601