항해 플러스 프론트엔드 2주차 회고(VirtualDOM 만들기)

이번 주에 학습한 부분

• 어째서 Virtual DOM을 사용하는가?
• Virtual DOM은 어떻게 구현되어 있는가?
• Diffing Algorithm은 어떻게 구현되어 있는가?

KPT 회고

Keep (유지하고 싶은 부분)

• 목적 중심 사고: 이걸 왜 해야할까?를 중심으로 생각하면서 과제를 진행한 접근 방식
  • 테스트 코드에 이렇게 구현해라!는 적혀있었지만, 이렇게 구현해야하는 이유에 대해서는 따로 없어서 이 부분들을 가능하면 이해하고 코딩하려던 마음가짐
• 지난 경험에서의 학습: 지난주에 제대로 이해하지 못한 상태로 손대서 아쉬웠기 때문에, 이번에는 이해를 중심으로 접근한 점
• 기술적 이해도 증진: 과제를 구현하기 전, 왜 VirtualDOM을 써야하는지 학습하고 깊게 이해한 것
  • JSX가 실제로 렌더링되어 사용자에게 보여지는 과정 이해: JSX → createVNode → normalizeVNode → createElement → (EventManager) -> renderElement

Problem (문제점/아쉬웠던 점)

양털깎기의 지옥

• Yak Shaving에 빠졌던 점
  • 코드 레벨까지 못가고 개념이 이해가 안가서 계속 찾아보면서 들어가다 보니 너무 많은 시간 소비
  • 예를 들어, React의 VirtualDOM이 어떤 애니메이션에서 불리한가, 왜 불리한가? 같은 깊은 부분까지 파고든 것
  • 그 결과, 처음에는 왜 이런 방향으로 구현해야하는지를 완벽하게 이해하고 코드를 작성하고 싶었는데, 뒤로 갈수록 시간이 없어서 그냥 작성하게 된 상황 
• 적절한 추상화 수준 부족: 적당히 추상화를 할 필요가 있었는데 그 균형점을 찾지 못한 것
• 코드 레벨 구현 미흡: `왜 이렇게 구현하는가?`는 이해했지만, 코드 레벨까지는 내려가서 고민해보지 못해 아쉬움

Try (다음에 시도해볼 점)

• 균형잡힌 이해 수준: 다음 주에는 왜 하는지는 이해하되, 너무 깊게 들어가지는 말고 구현에 조금 더 집중할 계획
  • 개념 이해와 실제 구현 사이의 적절한 균형점을 찾을 예정
• 다른 사람의 경험 활용: 다른 분들이 작성한 코드나 이슈를 보고 참조하면서 진행할 계획
  • 혼자서 모든 것을 완벽하게 이해하려 하기보다는, 기존의 좋은 사례들을 참고하는 방식 시도
• 시간 박싱: 이해에 투입할 시간을 미리 정해두고, 그 시간 내에서 적절한 수준의 이해를 달성한 후 구현으로 넘어가는 방식 시도
• 심화 학습 계획: diff 알고리즘을 구현해보지 못해 추후 도전할 예정
  • 코드 레벨까지 내려가서 고민하고 개선해볼 추가 학습 계획