과제 체크포인트
배포 링크
기본과제
가상돔을 기반으로 렌더링하기
- createVNode 함수를 이용하여 vNode를 만든다.
- normalizeVNode 함수를 이용하여 vNode를 정규화한다.
- createElement 함수를 이용하여 vNode를 실제 DOM으로 만든다.
- 결과적으로, JSX를 실제 DOM으로 변환할 수 있도록 만들었다.
이벤트 위임
- 노드를 생성할 때 이벤트를 직접 등록하는게 아니라 이벤트 위임 방식으로 등록해야 한다
- 동적으로 추가된 요소에도 이벤트가 정상적으로 작동해야 한다
- 이벤트 핸들러가 제거되면 더 이상 호출되지 않아야 한다
심화 과제
Diff 알고리즘 구현
- 초기 렌더링이 올바르게 수행되어야 한다
- diff 알고리즘을 통해 변경된 부분만 업데이트해야 한다
- 새로운 요소를 추가하고 불필요한 요소를 제거해야 한다
- 요소의 속성만 변경되었을 때 요소를 재사용해야 한다
- 요소의 타입이 변경되었을 때 새로운 요소를 생성해야 한다
과제 셀프회고
기술적 성장
코드 품질
학습 효과 분석
과제 피드백
리뷰 받고 싶은 내용
과제 피드백
안녕하세요 연수님~ 현재 테스트 코드는 통과하는데, e2e 테스트는 실패하고 있군요 ㅠㅠ
대체로 잘 만들어주셨는데 이 부분 딱 하나가 문제가 되고 있어요.
updateAttribute를 실행할 때
else if (key.startsWith("data-")) {
// data 속성 처리
const dataKey = key.substring(5);
$el.dataset[dataKey] = value;
}
사실 dataKey도 어차피 attribute라서 저 조건만 제거하면 정상적으로 동작한답니다..
자세한 내용은 https://discord.com/channels/1288769861589270590/1395603615820943400/1395604400919285842 여기에 올려놨으니 참고해주세요!