[5팀 박소미] [Chapter 1-2] 프레임워크 없이 SPA 만들기

[confidential-nt]

과제 체크포인트

기본과제

가상돔을 기반으로 렌더링하기

• createVNode 함수를 이용하여 vNode를 만든다.
• normalizeVNode 함수를 이용하여 vNode를 정규화한다.
• createElement 함수를 이용하여 vNode를 실제 DOM으로 만든다.
• 결과적으로, JSX를 실제 DOM으로 변환할 수 있도록 만들었다.

이벤트 위임

• 노드를 생성할 때 이벤트를 직접 등록하는게 아니라 이벤트 위임 방식으로 등록해야 한다
• 동적으로 추가된 요소에도 이벤트가 정상적으로 작동해야 한다
• 이벤트 핸들러가 제거되면 더 이상 호출되지 않아야 한다

심화 과제

1) Diff 알고리즘 구현

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

2) 포스트 추가/좋아요 기능 구현

• 비사용자는 포스트 작성 폼이 보이지 않는다
• 비사용자는 포스트에 좋아요를 클릭할 경우, 경고 메세지가 발생한다.
• 사용자는 포스트 작성 폼이 보인다.
• 사용자는 포스트를 추가할 수 있다.
• 사용자는 포스트에 좋아요를 클릭할 경우, 좋아요가 토글된다.

과제 셀프회고

기술적 성장

• jsx가 컴파일되어 문서에 적용되는 과정
• vNode가 Element가 되기까지의 개괄적인 과정

코드 품질

• 전체적으로 리팩토링 필요(명확한 책임 분리, 정보 은닉 등)

학습 효과 분석

• jsx가 어떻게 컴파일되는걸까? createVNode를 만들기 위해
• 코드가 전체적으로 어떻게 동작하는가? (결국 틀렸지만…)
• vNode를 어떻게 요구사항대로 정규화시킬 수 있을까?
• createElement를 어떻게 요구사항대로 구현할 수 있을까?
• renderElement에 대한 요구사항이 정확히 무슨 뜻인가?
• normalizeVNode의 정확한 역할과 목적
• 이벤트 처리 오류없이 이벤트를 등록하고 삭제하기, eventManager의 동작원리
• store를 통한 상태관리를 어떻게 하는가?

과제 피드백

• renderElement의 요구사항이 좀 헷갈리긴 했는데, 제가 아마 급해서 요구사항을 덜 이해하고 진행한 탓이 아닐까 싶습니다..

리뷰 받고 싶은 내용

• 급하게 하다보니 대부분의 구현을 AI나 책에 의존했어서 제가 코드의 주도권을 쥐고 있지 않았기 때문에 리뷰 요청할 구간이 없네요.. 다만, 요구사항을 잘못 이해해 논리적인 오류가 발생해서 완전히 잘못된 길로 가고 있었고 이를 뒤늦게 깨닫고 수정하느라, 코드를 구현하기 전에 생각하는 시간을 갖는 것이 얼마나 중요한 것인지 새삼 깨달았습니다.
• 코치님은 구현에 들어가기 전에, 논리적 오류를 범하지 않기 위해서 쓰시는 방법이 따로 있으신가요? 저는 구현해보기전에 무엇을 정확히 구현할 것인지, 어떤 상호작용이 오가야하고 데이터는 무엇인지 달아보려고 생각 중입니다

[YeongseoYoon-hanghae]

로그인의 여부를 컴포넌트보다 페이지 단위에서 아는것이 더 낫지 않을까? 생각하는데 어떠실까요?

[confidential-nt]

HomePage에서 글로벌 스토어를 가져와서 로그인 상태를 통해 렌더링하는 방식으로

{loggedIn && <PostForm/>}

[YeongseoYoon-hanghae]

리액트 렌더링 알고리즘에 따르면 텍스트 초기화를 element를 직접 조작하는것보다 state를 통해 관리하는 방식이 어떨까? 제안드려봅니다 ㅎㅎ