[2팀 이진희] Chapter 1-2. 프레임워크 없이 SPA 만들기 (2)

[bebusl]

과제 체크포인트

배포 링크

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

기본과제

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

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

이벤트 위임

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

심화 과제

Diff 알고리즘 구현

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

과제 셀프회고

이번주 뜬금없는 코로나에 걸려 정신없이 보냈습니다;;
심화과제는 진행하지 못했지만, 기본과제를 하면서 가상돔의 역할과 기존에 jsx가 어떻게 DOM으로 변환되는지 과정을 알 수 있어 좋은 경험이었던 것 같습니다.
심화과제는 다음주가 시작되기 전에 꼭 한 번 해결해보고 넘어가려고 합니다.

궁금한점

저는 얼리 리턴을 매우 선호하는 편인데요,(얼리 리턴 가능한 거의 모든 상황에서 얼리 리턴을 하는 편인 것 같습니다.)
얼리 리턴을 비선호하시는 분들도 있다고 알고 있어서요.
코치님은 얼리 리턴을 선호하시는 편인지, 어떠한 경우에는 얼리 리턴을 쓰고 그 외 조건문으로 분기 처리하시는 지 궁금합니다.

[devchaeyoung]

엇 사수님이 얼리리턴 왜 비선호하시는지 궁금해요 👀

[bebusl]

엇 사수님이 얼리리턴 왜 비선호하시는지 궁금해요 👀

조건분기가 많은 함수였는데 그 때는 오히려 얼리리턴이 코드 읽기가 힘들다고 사수님께서는 비선호한다고 하셨어용