[10팀 윤현수][Chapter 1-2] 프레임워크 없이 SPA 만들기 chapter1-2:basic

[temeraire97]

과제 체크포인트

기본과제

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

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

리뷰 받고 싶은 내용

코멘트를 정확히 어디에 어떻게 달아야 할 지 감이 안 잡힙니다!
혹시 지금 코드 정도면 코멘트가 없어도 되는 걸까요?

궁금한 점

제가 DefaultLayout을 사용하면서 FunctionComponent안의 요소를 이렇게 처리했는데 더 나은 방법이 있을까요?

export const DefaultLayout = (_, children) => {
  return (
    <div className="bg-gray-100 min-h-screen flex justify-center">
      <div className="max-w-md w-full">
        <Header />
        <Navigation />

        {children}

        <Footer />
      </div>
    </div>
  );
};

export const HomePage = () => {
  const { posts } = globalStore.getState();

  return (
    <DefaultLayout>
      <main class="p-4">
        <div id="posts-container" class="space-y-4">
          {posts.map((post) => (
            <Post {...post} />
          ))}
        </div>
      </main>
    </DefaultLayout>
  );
};

과제를 수행하면서 느낀점

과제 시작 전 생각

전보다 더 막막하다...
스토어와 라우터의 관리 및 옵저버 패턴을 사용한 상태 업데이트...

과제 제출 후 생각

생각보다는 매우 진행이 쉬웠다.
PostForm은 언제 사용하는거지?

기타

과제 난이도

3