[9팀 김정태] [Chapter 1-2] 프레임워크 없이 SPA 만들기

[Jayteeee]

과제 체크포인트

기본과제

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

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

이벤트 위임

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

심화 과제

1) Diff 알고리즘 구현

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

2) 포스트 추가/좋아요 기능 구현

• 비사용자는 포스트 작성 폼이 보이지 않는다
• 비사용자는 포스트에 좋아요를 클릭할 경우, 경고 메세지가 발생한다.
• 사용자는 포스트 작성 폼이 보인다.
• 사용자는 포스트를 추가할 수 있다.
• 사용자는 포스트에 좋아요를 클릭할 경우, 좋아요가 토글된다.

과제 셀프회고

기술적 성장

• 지난주차는 제대로 과제를 진행하지 못했고 이번주차부터 시간투자를 하며 과제를 진행했는데 오래간만에 vanilla javascript를 이용하여 코드를 작성하다보니 AI에 의존하게 되는 것 같고 무엇이 문제인지 조차 파악하는 것이 어려웠던 것 같습니다.
• 제대로 알게되었다는 내용은 실질적으로 없는 것 같습니다.
• 다음주부터는 최대한 혼자 힘으로 구현해보고 AI 의존성을 줄여야겠습니다.

코드 품질

• 위의 이유로 이야기할만한 부분이 없습니다.

학습 효과 분석

과제 피드백

리뷰 받고 싶은 내용

• 끝까지 해결하지 못한 테스트케이스가 자꾸 눈에 밟힙니다.
• eventManager.jsx에서 setupEventListeners를 실행하며 이벤트를 제대로 add해주지 못하는 것 같은데 왜그런지 이유를 모르겠습니다ㅜㅜ 자세하게 남기지 못해 죄송합니다.