[18팀 오소현][Chapter1-2] 프레임워크 없이 SPA 만들기

[osohyun0224]

현재 테스트 코드 CICD 통과 여부를 테스트 중입니다. 추후 내용 수정하겠습니다!

과제 체크포인트

✅ 2주차 기본과제 구현 목록 체크 포인트

1) createVNode

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

2) createElement

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

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

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

✅ 2주차 심화과제 구현 목록 체크 포인트

1) Diff 알고리즘 구현

• 초기 렌더링이 올바르게 수행되어야 한다
• diff 알고리즘을 통해 변경된 부분만 업데이트해야 한다
• 새로운 요소를 추가하고 불필요한 요소를 제거해야 한다
• 요소의 속성만 변경되었을 때 요소를 재사용해야 한다
• 요소의 타입이 변경되었을 때 새로운 요소를 생성해야 한다
• 함수형 컴포넌트가 업데이트될 때 필요한 부분만 렌더링해야 한다
• 중첩된 함수형 컴포넌트에서 깊은 레벨의 변경사항만 업데이트해야 한다

2) 이벤트 위임 구현

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

• ✅ 1주차 과제 테스트를 모두 통과하고, 정상적으로 기능이 동작해야한다.

리뷰 받고 싶은 내용

궁금한 점

과제를 수행하면서 느낀점

과제 시작 전 생각

과제 제출 후 생각

기타

과제 난이도

5.0/5.0