프로젝트 배경

Githru VSCode Extension에서 대량의 커밋 데이터를 효율적으로 표시하기 위해 무한 스크롤 기능이 필요했습니다. 기존의 "Load More" 버튼 방식은 사용자 경험을 저해하고 있었습니다.

AS-IS (Load More 버튼)

장점

  • 구현이 단순함

고려할 점

  • 사용자가 매번 클릭해야 함
  • UX 저해
  • 54줄의 레거시 코드

TO-BE (무한 스크롤)

장점

  • 자연스러운 데이터 로딩
  • 클릭 액션 제거
  • 재사용 가능한 훅

고려할 점

  • IntersectionObserver 최적화 필요

주요 구현 내용

1. 재사용 가능한 커스텀 훅 개발

useInfiniteScroll 훅을 처음부터 설계하고 구현했습니다(52줄). IntersectionObserver API를 활용한 뷰포트 감지 로직을 구현했으며, 로딩 상태 관리 및 에러 핸들링을 포함했습니다. 다양한 컴포넌트에서 재사용할 수 있도록 범용 인터페이스로 설계했습니다.

2. 컴포넌트 통합

Summary 컴포넌트에 무한 스크롤을 적용했습니다(91줄 추가). Sentinel 요소를 활용한 스크롤 감지와 데이터 로딩 상태에 따른 UI 처리를 구현했으며, IntersectionObserver 최적화로 성능을 개선했습니다(34줄 리팩토링).

VerticalClusterList 컴포넌트에도 무한 스크롤을 통합했습니다(51줄 추가). 클러스터 목록의 점진적 로딩을 구현하고 스크롤 위치 유지 로직을 추가했습니다.

3. 성능 최적화

IntersectionObserver 설정을 최적화했습니다. threshold 및 rootMargin 튜닝을 수행하고, 불필요한 재생성을 방지하기 위한 메모이제이션을 적용했습니다. 페이지당 커밋 수를 10개에서 20개로 증가시켜 로딩 빈도를 50% 감소시켰으며, 기존 "Load More" 버튼을 제거하여 54줄의 코드를 삭제하고 UI를 간소화했습니다.

  1. useInfiniteScroll 훅 설계
  2. IntersectionObserver 통합
  3. 컴포넌트 적용
  4. 성능 튜닝

4. 개발 환경 개선

FakeIDEAdapter에 페이지네이션을 구현하고(49줄), VSCodeIDEAdapter와 페이로드 구조를 정렬했습니다(7줄 수정). 이를 통해 로컬 개발 시 실제 환경과 동일한 무한 스크롤 테스트가 가능해졌습니다.

5. 데이터 안정성 강화

useAnalyzedData에 데이터 유효성 검증을 추가했습니다(8줄). Author avatar 에러 핸들링 및 fallback 로직을 구현하여(17줄 추가) 빈 데이터 및 네트워크 오류 상황에 대응할 수 있도록 했습니다.

기술적 성과

🧩

코드 품질

재사용 가능한 커스텀 훅으로 관심사 분리

⚡

성능

IntersectionObserver 기반 효율적 스크롤 감지

🎯

UX 개선

버튼 클릭 없이 자연스러운 데이터 로딩

🔧

유지보수성

54줄 코드 삭제 및 명확한 구조

사용 기술

  • TypeScript
  • React Hooks (useState, useEffect, useCallback, useRef)
  • IntersectionObserver API
  • 전역 상태 관리

측정 가능한 결과

코드 변경량
항목비교값 (줄)
신규 기능 코드200200 줄
레거시 제거5454 줄

총 200줄 이상의 새로운 기능 코드를 작성했고, 54줄의 레거시 코드를 제거했습니다. 페이지 로딩 빈도가 50% 감소했으며, 사용자 클릭 액션을 제거하여 UX를 개선했습니다.