과제 체크포인트

배포 링크

https://annkimm.github.io/front_6th_chapter1-2/

기본과제

가상돔을 기반으로 렌더링하기

• createVNode 함수를 이용하여 vNode를 만든다.
• normalizeVNode 함수를 이용하여 vNode를 정규화한다.
• createElement 함수를 이용하여 vNode를 실제 DOM으로 만든다.
• 결과적으로, JSX를 실제 DOM으로 변환할 수 있도록 만들었다.

이벤트 위임

• 노드를 생성할 때 이벤트를 직접 등록하는게 아니라 이벤트 위임 방식으로 등록해야 한다
• 동적으로 추가된 요소에도 이벤트가 정상적으로 작동해야 한다
• 이벤트 핸들러가 제거되면 더 이상 호출되지 않아야 한다

심화 과제

Diff 알고리즘 구현

• 초기 렌더링이 올바르게 수행되어야 한다
• diff 알고리즘을 통해 변경된 부분만 업데이트해야 한다
• 새로운 요소를 추가하고 불필요한 요소를 제거해야 한다
• 요소의 속성만 변경되었을 때 요소를 재사용해야 한다
• 요소의 타입이 변경되었을 때 새로운 요소를 생성해야 한다

과제 셀프회고

• 가상 DOM 파이프라인 전반 구현
  • JSX 코드가 createVNode로 vNode 객체로 생성되고, normalizeVNode를 통해 일관된 형태로 정규화된 뒤, createElement로 실제 DOM에 매핑되는 전체 과정을 처음으로 완성하였다.
  • vNode 트리와 실제 DOM 트리 간의 변환 원리를 눈으로 확인하였다.

기술적 성장

• Map vs WeakMap와 개념과 메모리 관리 차이를 학습을 아직 제대로 학습하지 못하였다.

코드 품질

• createVNode와 normalizeVNode 등등 나머지 함수에서 처리하다 보니, 로직이 길어지고 이해하기 이해하기 어려워서 현재 짠 코드에 대한 추가적인 공부가 필요할 것 같다.
• 회사에서 코드 짤 때 타입스크립트를 이용해서 짜는데, 확실히 JSX로 짜다보니 타입에 대한 추정이 힘들어 디버깅하기가 힘들었던 것 같다. 근데 TS 바꿀 시도는 엄두도 못했다.

학습 효과 분석(효과보다는 공부가 필요한 것)

• Map과 WeakMap 차이점 알기
• 재귀함수(평소에 사용할 일이 없다보니 더 그런거 같기도...)

과제 피드백

AI 도움 받아서 짜면 너무 어렵지도 않고, 너무 쉽지도 않었던 것 같습니다.

리뷰 받고 싶은 내용

• EventManager와 updateElement의 핵심 로직을 AI가 대부분 생성해 주었는데, AI를 어쩔 수 없이 쓰게 될 수 밖에 없는데 AI를 쓰면서 성장할 수 있는 방법이 있을까요?
• EventManager와 updateElement( 이 함수들이 아니더라도 재귀함수같은 익숙하지 않은 걸로 함수를 짜야할 때)를 처음 구현할 때 어디서부터 시작해야 할지 감이 잘 잡히지 않고 막막해 AI로 코드를 구현했습니다. 이런 상황에서 우선적으로 무엇을 살펴보고 어떻게 감을 잡아서 나아가야할지 알고 싶습니다.