[7팀 김민지] Chapter2-2. 나만의 React 만들기 (easy)

[minjeeki]

과제 체크포인트

배포 링크

https://minjeeki.github.io/front_7th_chapter2-2/

기본과제

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

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

이벤트 위임

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

심화 과제

1) Diff 알고리즘 구현

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

과제 셀프회고

아하! 모먼트 (A-ha! Moment)

이번 과제 구현은 일단 시작하는게 중요해서 AI를 통해서 먼저 작업을 하고, 이후 작성된 코드를 이해하기 위해 노력하면서 질문하는 과정에서 배움을 얻겠다고 목표를 세웠습니다.

테스트 코드를 기반으로 각 단계 통과를 위해 함수 구현을 진행했고, 그 중 “새로고침 시 목록이 API 응답 배열 순서대로 렌더링되지 않는다”에서 AI로 작성한 코드가 통과하지 못해 원인을 찾던 중 로직을 이해할 수 있었습니다.

API 응답 순서대로 상품 카드가 나오지 않는 문제에 대해서 원인이 될 부분을 생각해본 뒤 하나씩 확인하는 방식으로 진행했습니다.

1. API를 새로고침할 때 호출하지 않음 ⇒ 문제 없음
2. 이전 탐색 조건을 제대로 정리하지 못함 (children에 대해서 정리 로직이 미흡함) ⇒ 문제 없음
3. API 응답에 대해서 배열을 인덱스 기준이 아닌 다른 기준을 갖고 렌더링하고 있음 ⇒ 원인

사실 AI에게 많이 의존해서 과제를 하는게 의미가 있을까 하고 혼자 하다가 매번 과제 통과를 못했기 때문에 이번에는 정말 과제 초록불이 보고 싶었습니다. 사실 하면서도 이걸 통과한다고 나한테 의미가 있을까 계속 의심했고요. 하지만 구체화되지 않은 요구사항을 바탕으로 AI가 문제를 일으킬 때 해결하는 과정에서도 이해도가 늘어날 수 있다는 것을 깨달았습니다. 물론, 이게 되려면 테스트가 잘 뒷받침되어야 한다는 것도 실감했습니다.

기술적 성장

코드 품질

AI의 코드 이해하는데 벅차 품질에는 신경쓰지 못했습니다. 과제 주간이 끝난 이후 팀원들의 코드와 교육생들의 코드를 보면서 배운 점들을 기록하고 AI 없이 다시 구현해보려고 합니다.

학습 효과 분석

hard 과제에 있는 기본 훅 구현 등에 관심이 있었는데 기간 상 해결하지 못할 것 같아서 통째로 이번 과제 끝난 이후에 추가 학습을 해보며 실습해보려고 해요.

과제 피드백

리뷰 받고 싶은 내용