Create Week8 Mission1, 2

[wantkdd]

📝 미션 번호

8주차 Misson 1, 2

📋 구현 사항

• Debounce를 이용하여 검색 및 무한 스크롤 구현
• Throttling을 사용하여 무한 스크롤 시 성능 개선

📎 스크린샷

✅ 체크리스트

• Merge 하려는 브랜치가 올바르게 설정되어 있나요?
• 로컬에서 실행했을 때 에러가 발생하지 않나요?
• 불필요한 주석이 제거되었나요?
• 코드 스타일이 일관적인가요?

[hyesngy]

이번 주 워크북을 통해 React의 성능 최적화 기법인 debounce와 throttle을 적용해봤습니다! 쉽지 않은 개념이지만 모두 잘 해내셔서 대단합니다! 👏🏻👏🏻👏🏻

이런 최적화 기법들은 실제 서비스에서 UX를 크게 향상시키는 요소입니다. 앞으로 있을 데모데이 프로젝트에서도 꼭 활용해서 구현해보면 좋겠습니다!👍🏻👍🏻👍🏻

[hyesngy]

현재 search-page와 home-page에서 정렬 버튼 UI가 중복되고 있는데, 이 부분을 별도의 SortButton 컴포넌트로 분리하면 코드 중복을 줄이고 일관된 UI를 유지할 수 있을 것 같습니다.

[hyesngy]

현재 home-page에서 스켈레톤을 로딩 중이 아닐 때도 항상 표시하도록 구현되어있는데, 의도된 동작인지 이해가 가지 않습니다. 추가 데이터를 불러올 때에만, 스켈레톤을 보여주는 것이 사용자에게도 명확한 피드백을 전달할 수 있을 것 같습니다.

일반적으로 isFetchingNextPage 상태에 따라 조건부로 렌더링하여 예시로는 {isFetchingNextPage && <LpCardSkeletonList count={20} />} 이런 식으로 작성할 수 있을 것 같습니다.

[hyesngy]

2025-05-22.220636.mp4

현재 무한 스크롤에서 여러 번의 요청이 연속으로 발생하는 문제가 있습니다.

home-page와 search-page 모두에서 useEffect(() => { if (throttledInView && hasNextPage && !isFetchingNextPage) { fetchNextPage(); } }, [throttledInView, hasNextPage, isFetchingNextPage, fetchNextPage])로 구현되어 있는데, fetchNextPage() 실행 후 hasNextPage가 여전히 true이고 throttledInView도 계속 true로 유지되면서 연속적으로 요청이 발생하고 있는 것 같습니다.

또한, useInView({ threshold: 0 })로 설정되어 있어서 타겟 요소가 화면에 조금이라도 보이면 즉시 트리거됩니다. 또한 <div ref={ref} className="h-10 mt-4"></div> 요소가 계속 화면에 노출되어 있어서 지속적으로 inView가 true 상태를 유지하게 됩니다.

fetchNextPage() 호출 직후 throttledInView를 일시적으로 false로 만들거나, 요청 완료 후에만 다시 감지할 수 있도록 상태 관리를 개선해야 합니다. useCallback으로 fetchNextPage 함수를 감싸서 불필요한 의존성 변경을 방지하는 것도 고려해볼 수 있을 것 같습니다.

Intersection Observer에서도 threshold를 0.1 정도로 높이거나, rootMargin을 음수값으로 설정하여 요소가 완전히 화면 중앙에 들어왔을 때만 트리거되도록 조정하여 정확한 시점에만 감지되도록 개선해주세요!

[hyesngy]

현재 HomePage에서 하드코딩된 "asc" | "desc" 타입을 사용하고 있습니다. PAGINATION_ORDER enum을 별도 파일에 정의해놨음에도 불구하고 문자열 리터럴 타입을 직접 사용하면 타입 정의가 중복되고 유지보수성도 떨어집니다.

정의해둔 enum을 사용해서 useState<PAGINATION_ORDER>(PAGINATION_ORDER.DESC) 같은 형태로 변경하면, 타입 안정성을 높이고 코드 유지보수성도 개선할 수 있을 것 같습니다!