[항해 플러스 프론트엔드 3기] 2주차 WIL

1. 문제 (과제, 프로젝트를 진행하면서 부딪혔던 기술적인 문제)

이번 주차를 지나며 겪었던 문제가 무엇이었나요?
이번 주에 겪었던 가장 큰 문제는 자식 노드를 처리할 때 발생했습니다. 기존 DOM의 자식 노드와 새로운 가상 DOM의 자식 노드를 비교하지 않고, 단순히 추가하는 방식으로 구현했더니, 불필요한 자식 노드가 남아있거나 업데이트되지 않은 노드가 그대로 남는 현상이 발생했습니다.

2. 시도

문제를 해결하기 위해 어떤 시도를 하셨나요?
 
첫번째 시도:

(vNode.children || []).forEach((child) => {
  domElement.appendChild(processVNode(child));
});

기존 DOM에 있는 자식 노드를 고려하지 않고, 새로운 자식 노드만 단순히 추가했습니다. 이 방법은 노드가 제대로 갱신되지 않는 문제를 초래했습니다.
 
두 번째 시도:

for (let i = 0; i < maxChildrenLength; i++) {
  updateElement(
    oldDomNode,              // 기존 DOM 노드
    oldVNode.children?.[i],   // 기존 가상 DOM의 자식
    newVNode.children?.[i],   // 새로운 가상 DOM의 자식
    i
  );
}

 
기존 자식 노드와 새로운 자식 노드를 비교하여 필요한 경우에만 업데이트하도록 코드를 개선했습니다. 불필요한 노드를 남기지 않고, 필요한 부분만 갱신되도록 처리했습니다.

3. 해결

문제를 어떻게 해결하셨나요?

for (let i = 0; i < maxChildrenLength; i++) {
  updateElement(
    oldDomNode,              // 기존 DOM 노드
    oldVNode.children?.[i],   // 기존 가상 DOM의 자식
    newVNode.children?.[i],   // 새로운 가상 DOM의 자식
    i
  );

 
이 방식은 기존 자식 노드와 새로운 자식 노드를 비교하여 필요할 때만 업데이트하는 방식으로 최종 해결되었습니다.

4. 알게된 것

문제를 해결하기 위해 시도하며 새롭게 알게된 것은 무엇인가요?
 
이번 문제를 해결하면서 리액트가 내부적으로 어떻게 부분적인 렌더링을 처리하는지 직접 경험하게 되었습니다. 평소 리액트가 당연히 처리하던 업데이트 과정을 직접 구현하며, 컴포넌트 렌더링 최적화와 관련된 중요한 개념을 배웠습니다.

---

Keep : 현재 만족하고 계속 유지할 부분

이번 주를 마무리 하며 나에게 만족했던 부분은 무엇인가요?
 
기본, 심화과제 제출한 것에 대해 만족했습니다. 주석으로 각 함수마다 TODO리스트가 작성되어있어서 편했던 것 같습니다.

Problem : 개선이 필요하다고 생각하는 문제점

이번 주를 마무리 하며 개선이 필요하다고 생각했던 문제점은 무엇인가요?
 

이번 주에 이보라 코치님이 말씀하셨던 검증(Verification)과 확인(Validation)에 대해 생각해봤습니다.

 

Verification(검증): “우리는 제품을 올바르게 만들고 있는가?”를 묻는 질문입니다. 소프트웨어가 명세서대로 정확하게 구현되었는지를 확인하는 과정입니다. 주로 코드 리뷰나 단위 테스트, 통합 테스트 등을 통해 이루어집니다.

Validation(확인): “우리는 올바른 제품을 만들고 있는가?”를 묻는 질문입니다. 소프트웨어가 실제 사용자의 요구와 기대를 충족시키는지를 확인하는 과정으로, 사용자 테스트나 베타 테스트를 통해 진행됩니다.

 
테스트 코드만 통과한 것에 만족했었는데, 과연 Validation까지 고려했는지 반성하게 되었습니다. 앞으로는 Verification뿐만 아니라 Validation까지 꼼꼼히 챙기며 개발해야겠다고 다짐했습니다.

Try : 문제점을 해결하기 위해 시도해야 할 것

이 문제점을 해결하기 위해 다음 한 주간 시도 할 것은 무엇인가요?
 
다음 주부터는 단순히 테스트 통과에만 집중하지 않고, 제품의 Validation까지 고려하며 개발하는 자세를 가져가겠습니다 !