[12팀 하정원][Chapter1-2] 프레임워크 없이 SPA 만들기

[JayeHa]

과제 체크포인트

⚠️ 과제는 완성을 했는데, 아직 PR 텍스트를 작성하지 못했습니다! 😂

기본과제

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) 이벤트 위임 구현

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

리뷰 받고 싶은 내용

궁금한 점

• TODO: 내부함수 사용에 대해 여쭤보기

과제를 수행하면서 느낀점

과제 시작 전 생각

과제 제출 후 생각

기타

과제 난이도