과제 체크포인트

배포 링크

기본과제

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

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

이벤트 위임

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

심화 과제

Diff 알고리즘 구현

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

과제 셀프회고

기술적 성장

• 과제를 구현하기 전, 왜 VirtualDOM을 써야하는지 학습했고 깊게 이해하였습니다.
• JSX가 실제로 렌더링되어 사용자에게 보여지는 과정을 이해하게 되었습니다.
  • JSX → createVNode → normalizeVNode → createElement → (EventManager) -> renderElement

코드 품질

학습 효과 분석

• 가장 큰 배움이 있었던 부분
• 추가 학습이 필요한 영역
  • diff 알고리즘을 구현해보지 못해 추후 도전해볼 예정입니다.
  • 왜 이렇게 구현하는가?는 이해했지만, 코드 레벨까지는 내려가서 고민해보지 못해 아쉽습니다. 이 부분도 추가적으로 개선해보고 싶습니다.

과제 피드백

리뷰 받고 싶은 내용

• 코드 레벨까지 내려가서 학습을 진행하지 못해, 따로 코드 리뷰받고 싶은 내용은 없습니다