과제 체크포인트

배포 링크

https://hyojin-k.github.io/front_6th_chapter1-2/

기본과제

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

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

이벤트 위임

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

심화 과제

Diff 알고리즘 구현

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

과제 셀프회고

기술적 성장

• Map과 Set과 조차도 제대로 사용해 본 적이 없었던 것 같은데, 거기에 더해 WeakMap과 WeakSet을 사용함으로써 메모리 누수를 방지하는데 유용하다는 점을 알게 되었습니다.
• diff 알고리즘이 어떻게 동작하는지에 대해서 알 수 있었습니다.

코드 품질

1주차 이후로 중복 코드를 지양하고 가독성이 좋은 코드를 짜고자 했지만, 이 부분이 잘 고려되고 있는지는 아직 잘 모르겠습니다.

학습 효과 분석

초반에는 테스트를 통과하도록 코드를 짜다보니 코딩테스트 하는 느낌으로 과제를 진행했습니다. 그러다보니 과제의 목적과는 조금 다른 방향으로 시작을 하게된 것 같습니다. 그러다가 막히면서 ai를 활용 하다보니 그제서야 조금씩 흐름을 파악하면서 과제를 진행했는데, 도움을 받기 시작한 타이밍이 조금 늦지 않았나 생각합니다. 너무 오래 혼자 붙잡고 고민하기 보다는 어느정도 시간을 정해놓고 도움을 받았다면 학습의 방향을 좀 더 빨리 잡을 수 있을 수 있었을 것 같습니다.

과제 피드백

리뷰 받고 싶은 내용

• Map , WeakMap, Set, WeakSet를 사용할 때 조금은 무분별하게 혹은 적절하지 않게 사용하지 않았나 생각이 듭니다. 특히 eventManager 코드에서 세개나 사용하고 있는데 어떻게 사용했어야 좀 더 효율적으로 구현할 수 있었을까요?
• element._hasEventDelegation 이런 방식으로 DOM 요소에 직접 속성을 추가하는 방식에 대해서는 어떻게 생각하시는지 궁금합니다. ai를 사용하다보면 이런 방식으로 코드를 짜주기도 하던데, 잘 모르는 방식이기도 하고 좋지 않은 패턴이라고 해서 최대한 적용하지 않는 방향으로 진행했는데 드물지 않게 나타나는 것 같아서요. 최대한 지양하는게 좋은지, 아니면 적절하게 사용하는 방법이 있는지 궁금합니다.