[5팀 김나희] [Chapter 1-2] 프레임워크 없이 SPA 만들기

[imfineimgood]

과제 체크포인트

기본과제

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

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

이벤트 위임

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

심화 과제

1) Diff 알고리즘 구현

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

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

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

과제 셀프회고

기능 구현을 하고 테스트코드 하나씩 격파해 나갔는데요..
테스트코드 통과하기에 급급해서.. 일단 통과하고 어떤 로직인지 학습하는 과정이었어요..

기술적 성장

코드 품질

학습 효과 분석

과제 피드백

리뷰 받고 싶은 내용

1. 이벤트를 어디서 관리해야 할까요?

• 컴포넌트 페이지 내에서 해야 할까요? 따로 분리해야 하는지?
• 태그나 클래스를 이용해 eventManager에서 관리해야하는지?
• toggleLike를 globalstore에 action으로 등록했는데 맞는지..?

2. globalstore의 state를 받아올 때
   예를들어 만약에 상위 hompage에 post(user와 post 상태 필요)와 postform(user)이 있을때

• 각 컴포넌트에서 각각 받아오는 건가요?
• 상위 페이지에서 관리하는 게 맞을까요..? (prop으로 전달..)

🥲

[confidential-nt]

toggleLike을 정의해서 상태에 대한 조작을 캡슐화해두셨군요 좋은 접근인 것 같습니다!

[YeongseoYoon-hanghae]

리액트는 이벤트를 document.root에 위임하여 관리하고 있습니다..! 때문에 이번 과제 또한 eventManager가 있는 것이라고 이해했어요 ㅎㅎ

만약 핸들러에 대한 의미라면, 저는 개인적으로 굳이 전역 상태를 두고싶지 않아면 지역상태로 두어도 되지 않을까 생각했어요.

현재는 main에서 store를 구독하는 형태로 두고 있어서 그런 형태로 하면 어떨까 생각했습니다...!
지금은 코드 단위가 그리 크지 않으니 globalStore에서 하거나, 그게 좀 내켜지지 않는다면 저처럼 지역 상태를 두어 useState 처럼 사용하는것이 어떨까요?