[7팀 이재인][Chapter1-2] 프레임워크 없이 SPA 만들기

[zaenny]

과제 체크포인트

기본과제

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

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

리뷰 받고 싶은 내용

궁금한 점

• 함수 컴포넌트를 처리해야 한다 -> 테스트코드에서 계속 통과하지 못했던 부분입니다

 if (typeof vNode === 'function') {
    return createElement(vNode.type(vNode.props));
  }

처음에 이렇게 작성했었습니다. 문자열이나, 숫자일때는 무리없이 통과하다가 왜 함수형일때에는

 if (typeof vNode.type === 'function') {
    return createElement(vNode.type(vNode.props));
  }

이렇게 작성해야하는지 궁금합니다

과제를 수행하면서 느낀점

• 가상돔에 대해서 와닿지않은 상태였는데, 과제를 진행하면서 조금은 동작을 이해할수있게된거같다.

과제 시작 전 생각

• 막막하다

과제 제출 후 생각

• 야근 사라져.. 제발 .. 1-2 기본테스트만 겨우끝낸것에 대한 아쉬움이 너무크다 부족한게 너무너무 많고, 알아야할게 너무 많다구요..
• 여전히 막막하다. 나를 위한 과제이기 보다는 또 해결에 급급한 과제 진행이였던것 같다.

기타

과제 난이도

5