과제 체크포인트

배포 링크

https://lieblichoi.github.io/front_6th_chapter1-2/

기본과제

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

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

이벤트 위임

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

심화 과제

Diff 알고리즘 구현

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

과제 셀프회고

기술적 성장

이번 프로젝트를 하면서 가상돔이 왜 필요한지, 그리고 실제로 어떻게 동작하는지에 대해 감을 잡을 수 있었습니다.
특히, createElement 함수를 직접 구현하면서 재귀적으로 DOM을 만들어가는 과정이 기억에 남습니다. 이전에는 막연하게만 알던 부분들을 하나씩 구현해보니 보다 명확하게 보였습니다.

사실 아직 기본기가 부족하다고 느끼는 부분이 많습니다. 특히 diff 알고리즘이 적용된 updateElement 부분은 아직도 완전히 이해가지 않습니다.
그래도 각 함수의 역할과 구조를 단계별로 분석하고, 몰랐던 부분을 하나씩 채워가는 과정 자체가 도움이 많이 되었습니다.

이번에는 모든 기능을 완벽하게 이해하는 것보다는 일단 전반적인 DOM 구조와 렌더링 방식에 대한 큰 그림을 그릴 수 있었던 것에 만족합니다.
그동안 궁금했던 부분이 많이 해소된 느낌이라 앞으로 더 신나게(?) 공부할 동기부여가 되었습니다.

코드 품질

코드 품질에 대해서는 솔직히 AI의 도움을 많이 받으면서 작성하다 보니 제 손에 완전히 타서 나온 코드라고 하기는 어렵습니다.
그래도 각 함수의 역할을 나누고, 구조를 파악하려고 노력하면서 예전보다 체계적으로 코드를 바라볼 수 있게 된 것 같습니다.

특히, createElement의 재귀 구조를 직접 따라가면서 함수가 어떻게 동작하는지, 그리고 왜 이렇게 설계되어야 하는지에 대한 감을 잡을 수 있었습니다.

학습 효과 분석

가장 크게 배운 점은 가상돔이 단순히 객체로 DOM을 흉내내는 것이 아니라 실제 DOM과의 차이를 효율적으로 관리하기 위한 핵심적인 구조라는 것이었습니다.

diff 알고리즘이나 이벤트 위임 등을 직접 구현해보면서 이론으로만 접했던 개념들이 실제로 어떻게 코드로 구현되는지 체감할 수 있었던 것 또한 긍정적이었습니다.

아직 완전히 이해하지 못한 부분도 많지만 이번 기회를 통해 앞으로 어떤 부분을 어떻게 더 공부해야 할지 방향을 잡을 수 있었습니다.

과제 피드백

과제 자체가 단계별로 잘 나누어져 있어서 부담 없이 따라갈 수 있었던 점이 좋았습니다.

다만, diff 알고리즘 부분은 처음 접하는 입장에서는 조금 더 구체적인 예시나 설명이 있었으면 더 좋았을 것 같다는 아쉬움이 남습니다. 그래도 제공해주신 학습 자료가 구현 방향을 잡는 데 큰 도움이 되었습니다.

자랑하고 싶은 내용

이번 과제를 하면서 특별하게 자랑할 만한 코드는 없지만 막연하게만 알고 있던 가상돔과 DOM 렌더링 과정을 직접 코드로 구현해보고, 재귀적으로 동작하는 구조를 내 손으로 따라가 보면서 이해하려고 노력했다는 점은 좋았던 점이라 생각합니다.

특히, createElement를 구현하면서 이렇게 해서 실제로 DOM이 만들어지는구나라는 깨달음을 얻었을 때 제일 큰 재미가 느껴졌습니다.

리뷰 받고 싶은 내용

• updateElement의 diff 알고리즘 구조
  updateElement 함수에서 newNode와 oldNode를 비교해서 DOM을 업데이트하는 로직이 아직 완전히 익숙하지 않습니다.
  지금은 타입이 다르면 노드를 교체하고, 속성만 다르면 updateAttributes로 처리하고, 자식 노드는 재귀적으로 updateElement를 호출하는 방식으로 구현했는데, 이 구조가 실제로 효율적인지, 혹은 더 나은 비교/업데이트 방식이 있는지 궁금합니다. 특히, 자식 노드가 많아질 때 성능이나 코드 복잡도 측면에서 개선할 수 있는 부분이 있는지 피드백 주시면 감사하겠습니다.

• createElement의 재귀 구조와 함수 분리
  createElement 함수에서 vNode의 타입에 따라 텍스트 노드, 배열, 일반 노드로 분기해서 처리하고, 자식이 있을 때는 재귀적으로 createElement를 호출하는 구조로 만들었습니다. 이 과정에서 함수 분리나 코드 구조가 적절한지, 혹은 더 명확하게 역할을 나눌 수 있는 방법이 있는지 피드백 주시면 감사하겠습니다.