과제 체크포인트
배포 링크
https://0miiii.github.io/front_6th_chapter1-2/
기본과제
가상돔을 기반으로 렌더링하기
- createVNode 함수를 이용하여 vNode를 만든다.
- normalizeVNode 함수를 이용하여 vNode를 정규화한다.
- createElement 함수를 이용하여 vNode를 실제 DOM으로 만든다.
- 결과적으로, JSX를 실제 DOM으로 변환할 수 있도록 만들었다.
이벤트 위임
- 노드를 생성할 때 이벤트를 직접 등록하는게 아니라 이벤트 위임 방식으로 등록해야 한다
- 동적으로 추가된 요소에도 이벤트가 정상적으로 작동해야 한다
- 이벤트 핸들러가 제거되면 더 이상 호출되지 않아야 한다
심화 과제
Diff 알고리즘 구현
- 초기 렌더링이 올바르게 수행되어야 한다
- diff 알고리즘을 통해 변경된 부분만 업데이트해야 한다
- 새로운 요소를 추가하고 불필요한 요소를 제거해야 한다
- 요소의 속성만 변경되었을 때 요소를 재사용해야 한다
- 요소의 타입이 변경되었을 때 새로운 요소를 생성해야 한다
과제 셀프회고
1주차 때도 마찬가지고 실력에 대한 부족함을 많이 느끼고 있고, 제가 고민한 부분이나 알게 된 부분을 정리하는 것이 약한데 다른분들이 작성하신 것을 참고하고 느낀것이 많습니다. 이번 주가 가기 전에 내용을 최대한 이해하고 정리하는 것이 목표입니다.
기술적 성장
코드 품질
학습 효과 분석
과제 피드백
리뷰 받고 싶은 내용
과제 피드백
안녕하세요 영민, 수고했습니다! 이번 과제는 React의 핵심 원리인 가상 DOM과 diff 알고리즘을 직접 구현해보면서 프레임워크가 어떻게 효율적인 렌더링을 수행하는지 이해하는 것이 목표였습니다. 특히 이론으로만 알던 Virtual DOM을 실제로 구현하면서 '필요가 공부를 만든다'는 경험을 하셨기를 바랍니다.
Virtual DOM의 전체 흐름(createVNode → normalizeVNode → createElement → renderElement)을 잘 이해하고 구현하셨네요. 잘했습니다.
회고에서 실력 부족을 느끼신다고 하셨는데, 쉬운 과제 아닙니다. 저희 쉬운 과제 준다고 한적 없었잖아요. ㅎㅎ 오히려 이렇게 어려운 개념을 직접 구현해내신 것만으로도 충분한 성장을 하고 있는거에요. 실력 부족을 느낀게 아니라 나 이제 여기까지 왔구나라고 생각해보세요. 처음이라 어렵지 두번하면 금방입니다.
이제 Virtual DOM의 원리를 체득하셨으니, React를 사용할 때도 내부에서 어떤 일이 일어나는지 더 잘 이해하실 수 있을 거예요. 다음 주차도 화이팅입니다! :)