[13팀 김유진] [Chapter 1-2] 프레임워크 없이 SPA 만들기

[yireum]

과제 체크포인트

기본과제

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

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

이벤트 위임

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

심화 과제

1) Diff 알고리즘 구현

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

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

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

과제 셀프회고

이번 과제를 통해 Virtual DOM의 동작 원리와 이벤트 위임의 실제 구현에 대해 깊이 있게 이해할 수 있었습니다. 특히 Diff 알고리즘을 직접 구현하면서 React의 내부 동작 방식을 더 명확하게 파악할 수 있었고, 이는 앞으로의 React 개발에 큰 도움이 될 것 같습니다. 또한 이벤트 버블링과 캡처링의 개념을 실제 코드로 구현하면서, 브라우저의 이벤트 처리 메커니즘에 대한 이해도도 한층 높아졌습니다.

기술적 성장

• Virtual DOM과 실제 DOM의 차이점을 깊이 이해하게 되었으며, 렌더링 최적화의 중요성을 실감했습니다
• 이벤트 위임 패턴을 실제로 구현하면서 성능 최적화와 코드 구조화에 대한 실질적인 경험을 얻었습니다
• Diff 알고리즘 구현을 통해 복잡한 상태 관리와 DOM 조작의 효율적인 처리 방법을 터득했습니다

코드 품질

• 특히 만족스러운 부분으로는 이벤트 위임 패턴의 구현이 있습니다. 코드의 재사용성과 성능 최적화를 모두 달성할 수 있었습니다.
• 리팩토링이 필요한 부분은 Diff 알고리즘의 복잡도를 줄이는 것입니다. 현재는 기능은 정상적으로 동작하지만, 더 효율적인 비교 로직이 가능할 것 같습니다.
• 코드 설계에서는 컴포넌트의 책임과 역할을 명확히 분리하려 노력했으나, 상태 관리 로직의 중앙화가 더 필요해 보입니다.

학습 효과 분석

• Virtual DOM과 실제 DOM의 상호작용을 직접 구현해본 것입니다. Diff 알고리즘을 통한 효율적인 DOM 업데이트 방식이 인상적이었고, 이것이 실제 프레임워크들의 성능 최적화에 어떻게 기여하는지 깊이 이해할 수 있었습니다.
• 추가 학습이 필요한 부분은 메모리 관리와 성능 최적화 기법입니다. 대규모 애플리케이션에서의 상태 관리와 메모리 누수 방지에 대해 더 깊이 공부하고 싶습니다.
• 이번 학습 내용은 실무에서 즉시 적용 가능할 것으로 보입니다. 특히 이벤트 위임 패턴은 대규모 리스트나 테이블 구현 시 유용하게 활용할 수 있을 것 같습니다.

리뷰 받고 싶은 내용

스토어를 응용해서 만들고 싶어서 postStore.js를 만들어서 상태를 업데이트 하다보니 globalStore와 postStore 간의 의존성이 높이보이는 것 같기도 해서 이 부분에 대한 코치님의 피드백 부탁드립니다.

[9yurilee]

유진님... 저희 페어조에서 되게 빨리 하신 편인데... 어찌 그 짧은 시간에... 스토어를 응용하실 생각까지 하셨나요.....👍...

[pangkyu]

2주차도 고생많으셨습니다💪

[pangkyu]

 setTimeout(() => {
      const element = document.querySelector(`[id="${props.id}"]`);
      if (element) {
        // 이전에 등록된 클린업 함수가 있다면 실행
        if (element._cleanup) {
          element._cleanup();
        }

        // 새로운 ref 콜백 실행 및 반환된 클린업 함수 저장
        const cleanup = props.ref(element.parentElement);
        if (typeof cleanup === "function") {
          element._cleanup = cleanup;
        }
      }
    }, 0);

저는 처음에 setTimeout이 0초로 설정되어있어서 이러면 타임아웃을 거는 이유가 뭘까 생각해보고 찾아봤는데, 0으로 설정해도 바로 실행되는게 아니라는 것을 배우고 갑니다 ㅎ

dom이 다 그려진 이후에 클린업을 체크하려고 넣으신걸로 이해했는데 제가 맞게 이해한게 맞을까요??

[hanghaehyunjin]

postStore를 분리해서 사용하니 관심사별로 store 관리가 명확해지고, 코드 유지보수성이 확실히 좋아질 것 같아요!덕분에 한수 배우고 갑니다!👍🏻

[dosilv]

콘솔로그가 귀엽게 남아있어용ㅎㅎ

[dosilv]

저는 appendChild만 알고 있었어서 append는 모지..?! 하고 찾아보니 용도는 비슷하지만

• appendChild
  • DOMNode만 추가 가능
  • 하나의 요소만 추가 가능
• append
  • DOMNode뿐만 아니라 text도 추가 가능
  • 여러개의 요소를 한 번에 추가 가능

요런 차이점이 있더라구요! append가 더 최신 문법이고 유용한 것 같아용 하나 배워갑니다~~✨