항해 플러스 프론트엔드 과정 2주 차 회고

항해플러스 챕터 1-2 과제: 가상돔과 이벤트 위임 시스템을 직접 구현하기

---

1. 과제 목표

• 바닐라 JavaScript로 SPA 구조에서 가상 DOM 기반 렌더링 시스템 구현
• 이벤트 위임, diff 알고리즘 등 React 렌더링 로직의 핵심 개념 직접 구현
• JSX → 가상 노드 → 실제 DOM 렌더링 플로우 체계 이해 및 적용

---

2. 과제를 수행하기 앞서 알아본 Virtual DOM 이 생긴 이유와 핵심 개념

2-1. DOM의 조작에 대한 복잡도가 나날이 늘어감

• DOM 내부의 특정 요소가 변경됨에 따라 렌더 트리를 재생성하고, 리플로우 및 리페인트 과정이 반복된다.
  • 렌더 트리는 큰 부하가 없지만 리플로우 및 리페인트 과정에서 리소스를 많이 낭비하게 된다.

2-2. 기존 DOM 구조를 복사한 객체인 Virtual DOM이라는 개념 등장

• DOM에 변화가 있을 때 구 가상돔과 신 가상돔을 비교해서 변경된 내용만 일괄 변경한다.
  • 구 가상돔: 렌더링 이전 화면 구조를 나타내는 가상돔
  • 신 가상돔: 렌더링 이후에 보이게 될 화면 구조를 나타내는 가상돔
  • React에서는 상태가 변경될 때 신 가상돔을 만들어낸다.

---

3. Virtual DOM 만들기

1. createVNode
2. normalizeVNode
3. createElement
4. eventManager
5. renderElement
6. updateElement
7. diff-algorithm

4. 회고

처음 이 과제를 접했을 때는 1주차 과제보다 난이도는 쉽다고 생각했지만,
어떻게 시작해야할지에 대한 고민은 더 막막했어요.

곰곰히 생각해보면 이러한 함수들을 왜 써야하고, 어떻게 적용되는지에 대한 이해도가 낮아서 그런 것 같습니다.
그래서, 이슈를 작성하면서 분할과 정복 방식으로 과제를 해결해 나갔습니다.

그러다 보니 작성한 코드에 대해서 이유를 찾게되고, 더 나은 코드에 대해서도 고민할 수 있는 계기가 되어서
한 주간 많이 배우고 학습했습니다.(이런 방식을 소개해준 지훈님. 감사합니다!)

이러한 학습 방법을 통해 한 주간 개발하며 얻은 지식은

가상돔
리액트(컴포넌트, 상태) 동작 원리
diff 알고리즘
같은 저에게 생소한 개념들이었습니다.
물론, 다 이해하진 못했고 아직 부족한 점도 많다고 생각합니다.
그래도 이런 식으로 접하게 되고, 나중에 여러 번 복기한다면
더 명확하고 상세하게 이해하게되어 기본기가 탄탄해질거라 믿습니다.

참고 자료

• 개발자 황준일님의 Vanilla Javascript로 가상돔(VirtualDOM) 만들기
• React의 가상돔 (Virtual DOM)이 뭔가요?
• MDN Web API 문서: Document.createDocumentFragment, HTMLElement.dataset

추천인 코드(20% 할인 혜택 제공)

• 5vFlqB