[7팀 정건휘] Chapter 1-2. 프레임워크 없이 SPA 만들기 (2)

[geonhwiii]

과제 체크포인트

배포 링크

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

기본과제

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

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

이벤트 위임

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

심화 과제

Diff 알고리즘 구현

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

과제 셀프회고

이전 1차 과제에서는 제대로된 이해 없이 과제를 시작하여, 무작정 과제를 하는 방향이었습니다.

그래서 이번에는 과제를 시작하기 전에 부담을 내려놓고 VDom에 대해 이해하는 시간을 가지고 시작한 점이

오히려 과제를 진행함에 있어 도움이 된 것 같습니다 :)

기술적 성장

기술 질문 문제의 대답처럼 단순하게 "리액트는 가상돔을 이용해서 렌더링 성능을 개선한다."

라는 단순한 생각에서, React가 실제로 Dom element를 그려가는 과정을 이해하면서,

가상돔에 대해 좀 더 이해하고, 리액트라는 프레임워크의 방향성에 대해 좀 더 공감할 수 있는 시간이었습니다

과제 피드백

리뷰 받고 싶은 내용

이번 과제는 이해에 좀 더 집중할 수 있는 시간이어서 만족스러웠습니다.

한번 더 공부를 하면서, 리팩토링과 재구현을 진행해보고 싶습니다.

과제 내용에서 없는 리액트의 동작 과정 중 조금 더 구현하면 좋을 내용이 있을까요?

발제 리뷰를 통해 Fragment와 같은 것들을 구현하면 좋다고 들어서요~!