[6팀 조영민] Chapter 1-2. 프레임워크 없이 SPA 만들기

[0miiii]

과제 체크포인트

배포 링크

https://0miiii.github.io/front_6th_chapter1-2/

기본과제

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

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

이벤트 위임

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

심화 과제

Diff 알고리즘 구현

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

과제 셀프회고

1주차 때도 마찬가지고 실력에 대한 부족함을 많이 느끼고 있고, 제가 고민한 부분이나 알게 된 부분을 정리하는 것이 약한데 다른분들이 작성하신 것을 참고하고 느낀것이 많습니다. 이번 주가 가기 전에 내용을 최대한 이해하고 정리하는 것이 목표입니다.

기술적 성장

코드 품질

학습 효과 분석

과제 피드백

리뷰 받고 싶은 내용

[minjaeleee]

영민님~~ 회사에서 업무도 많으시다고 들었는데 병행하는 것 진짜 리스펙이에요!
늦어도 괜찮습니다~~ 영민님의 페이스대로 끝까지 같이 완주해요! 화이팅!

[0miiii]

영민님~~ 회사에서 업무도 많으시다고 들었는데 병행하는 것 진짜 리스펙이에요! 늦어도 괜찮습니다~~ 영민님의 페이스대로 끝까지 같이 완주해요! 화이팅!

감사합니다. 팀에 민폐끼치는거 같아서 죄송하네요 ㅜㅜ 끝까지 열심히 하겠습니다!

[0miiii]

handleDelegatedEvent 함수를 setupEventListeners 내부에 선언하면 다른 테스트 코드는 다 통과되나,
"동적으로 추가된 요소에도 이벤트가 정상적으로 작동해야 한다" 테스트만 통과되지 않습니다. 왜 내부에 선언하지 않고 외부에 선언해야 테스트가 통과되는지 이유가 궁금합니다