과제 체크포인트

배포 링크

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

기본과제

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

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

이벤트 위임

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

심화 과제

Diff 알고리즘 구현

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

과제 셀프회고

• 리액트의 가상돔에 대해서는 그저 면접 답변을 위해서만 외웠던 내용이었다. 이번 과제를 통해 개념을 좀 더 톺아볼 수 있는 기회가 되었다. 다만 시간 부족과 파편적으로 알고있는 개념들이 논리적인 코드로 작성되지 못했다. 과제를 완벽히 수행하지 못한 점에 대해 아쉽게 생각된다.
• 특히 eventManager 파트는 위임을 통해 핸들러를 어떻게 관리할지에 대한 고민으로 꽤나 많은 시간을 소모했다. 막연하게 산개된 논리 흐름을 구체화 하는 능력이 부족하다고 생각된다. 차근차근 생각하며 코드를 작성하는 습관을 들여야겠다.

기술적 성장

• React가 가상돔을 객체형태로 관리하고 이벤트를 최상위에 위임해서 관리하는 건 알았지만, 깊게 생각을 안해봤었다. 이번 기회에 어떤 식으로 가상돔을 생성하는지, 이벤트 위임을 관리하는지 학습하게 되었다.
• WeakMap, WeakSet의 개념에 대해 학습했다.

코드 품질

• AI의 도움을 많이 받기도 했고, 모든 기능을 완성하지 못했기 때문에 만족스럽지 않다. 좀 더 시간을 투자해야할 필요를 느끼고 있다.
• eventManager에서 eventTypes의 경우, event type이 모두 해제되었을 때, 해당 type을 제거하는 코드가 필요할 것 같다. 다만 효율적인 방법이 생각나지 않아 그만두었다.

학습 효과 분석

• event를 상위 container에 위임하고, Map, Set을 통해 관리하는 방식이 인상 깊었다.
• React의 작동원리에 대해 따로 시간내서 학습해야겠다. 과제하기에 급급해서 개념에 대한 이해가 부족하다.

과제 피드백

리뷰 받고 싶은 내용

• eventManager를 어떤식으로 접근하는게 효율적인 방식인지에 대한 의문이 있습니다. WeakMap의 경우 Map과 다르게 유용한 프로토타입 메서드가 없는데, 차라리 Map으로 순회 메서드 등을 사용하는게 오히려 효과적일까 생각했습니다.
• updateAttribute하는 부분에서 각 엘리먼트마다 프로퍼티들이 다르고, React와 이름, 타입 등이 조금 씩 다른 경우가 있는 것 같은데, 모든 경우에 대해 분기로 대응하는 방법 말고 또 뭐가 있을까요?