[10팀 장동진][Chapter1-2] 프레임워크 없이 SPA 만들기

[dongjang]

과제 체크포인트

기본과제

1) createVNode

• 올바른 구조의 vNode를 생성해야 한다
• 여러 자식을 처리해야 한다
• 자식 배열을 평탄화해야 한다
• 중첩 구조를 올바르게 표현해야 한다
• JSX로 표현한 결과가 createVNode 함수 호출과 동일해야 한다

2) createElement

• 문자열 입력에 대해 텍스트 노드를 생성해야 한다
• 숫자 입력에 대해 텍스트 노드를 생성해야 한다
• null 입력에 대해 빈 텍스트 노드를 생성해야 한다
• false 입력에 대해 빈 텍스트 노드를 생성해야 한다
• 배열 입력에 대해 DocumentFragment를 생성해야 한다
• 함수 컴포넌트를 처리해야 한다
• 올바른 속성으로 요소를 생성해야 한다
• 이벤트 리스너를 연결해야 한다
• 중첩된 자식 요소를 올바르게 처리해야 한다
• 깊게 중첩된 구조를 처리해야 한다
• 혼합 콘텐츠(텍스트와 요소)를 처리해야 한다
• 빈 자식 배열을 처리해야 한다
• undefined 자식을 무시해야 한다
• 불리언 속성을 처리해야 한다
• 데이터 속성을 처리해야 한다

3) 컴포넌트를 jsx로 정의하여 사용했는지 확인하기

• Post
• PostForm
• Header
• Navigation
• Footer
• HomePage
• LoginPage
• NotFoundPage
• ProfilePage
• HomePage를 렌더링 했을 때 html 문자열로 잘 변환되는지 확인

심화 과제

1) Diff 알고리즘 구현

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

2) 이벤트 위임 구현

• 이벤트가 위임 방식으로 등록되어야 한다
• 동적으로 추가된 요소에도 이벤트가 정상적으로 작동해야 한다
• 이벤트 핸들러가 제거되면 더 이상 호출되지 않아야 한다

리뷰 받고 싶은 내용

PR을 올리는 시점으로 다른 분들의 App.jsx를 보지는 못했는데
NotFoundPage 처리할 때 현재는 3개의 페이지만 사용해서 함수로 return이 되다 보니 함수가 받아지면 페이지가 정상이라 생각하고 처리했습니다.
그게 괜찮은 방법인지 궁금합니다.

궁금한 점

commit을 이번에는 최대한 쪼개서 했는데 처음에는 basic 테스트 단위로 commit을 했습니다.
이게 괜찮았는지 궁금하네요

과제를 수행하면서 느낀점

준일 코치님 존경스럽다.. 어떻게 이런 과제를 내셨을까라고 느꼈습니다..

과제 시작 전 생각

이번 과제 쉽지 않겠네.. 라고 느꼈고 계속 같은 생각이었습니다..

과제 제출 후 생각

첫 과제처럼 제가 많이 부족하다고 다시 한번 느꼈습니다.
PR 되게 빨리 올린 분도 계신데 존경스럽습니다..
저도 더 발전해서 제 코드를 모든 분들이 참고하실 수 있게 빨리 올릴 수 있는 날이 오면 좋습니다!

기타

날이 많이 추워졌는데 몸 관리 잘 하세요!

과제 난이도

5점