데이터 10,000개를 가지고 무한 스크롤을 구현할 때, 효율성과 사용자 경험을 최적화하기 위해 몇 가지 중요한 고려사항이 있습니다:
-
성능 최적화: 한 번에 모든 10,000개의 데이터를 로드하는 것은 브라우저에 부담을 줄 수 있으므로, 특정 개수만큼 쪼개서 로드하는 것이 좋습니다. 예를 들어, 한 페이지당 20개 혹은 50개의 아이템을 로드하도록 구현할 수 있습니다.
-
스크롤 감지: 사용자가 페이지 하단에 도달하면 새로운 데이터를 로드해야 합니다. 스크롤 위치와 뷰포트 높이를 감지하여 적절한 시점에 데이터를 로드하는 로직이 필요합니다.
-
로딩 상태 표시: 사용자에게 다음 데이터가 로드 중임을 알리는 로딩 표시가 중요합니다. 이를 통해 사용자는 시스템이 반응하고 있음을 인지할 수 있습니다.
-
데이터 캐싱: 이미 로드된 데이터는 캐싱해두는 것이 좋을 수 있습니다. 이렇게 하면 사용자가 스크롤을 위로 올릴 때 다시 로드하지 않아도 되므로 더 나은 사용자 경험을 제공합니다.
-
메모리 관리: 만약 모든 데이터를 DOM에 계속 추가하면 메모리 소모가 커져 성능이 저하될 수 있습니다. 이를 방지하기 위해 가상 스크롤(Virtual Scrolling)과 같은 기법을 사용해 현재 화면에 보이는 아이템만 실제로 DOM에 렌더링하고 나머지는 제거하는 방식을 적용할 수 있습니다.
-
에러 핸들링: 네트워크 요청이 실패할 수도 있으므로, 에러 발생 시 사용자에게 알리는 방법이 필요합니다. 재시도 옵션을 제공하는 것도 좋은 방법일 수 있습니다.
-
접근성: 키보드나 스크린 리더를 사용하는 사용자들도 무한 스크롤을 사용할 수 있게끔 접근성을 고려하는 것이 중요합니다.
-
SEO 최적화: 무한 스크롤은 검색 엔진 최적화에 영향을 줄 수 있으므로, 적절한 페이징 구조와 함께 사용해야 합니다.
-
디자인 일관성: 사용자가 무한 스크롤의 동작을 예측하고 이해할 수 있도록 디자인과 상호작용이 일관성 있어야 합니다.
무한 스크롤 구현은 간단해 보이지만 성능, 사용자 경험, 접근성 등을 고려하면 복잡한 작업이 될 수 있습니다. 이러한 요소들을 잘 고려하여 구현하면 사용자에게 효과적인 인터랙션을 제공할 수 있을 것입니다.
포인트
적당한 양의 데이터를 정기적으로 요청하게 만들고 , 기존의 데이터는 가상돔에 렌더링하고 실제 데이터는 받아오는 새 데이터로 교체하는 방식으로 메모리에 누적되지 않게 만든다. React-query의 InfiniteQuery를 활용하여 다음 스크롤의 데이터를 캐싱하고 중간에 로딩이 생기는 경우 스켈레톤UI/로딩애니메이션/LAZYQUERY등을 활용해 사용자 경험에 신경쓰는 것이 좋다.
면접에서 할 대답
intetcection Observer를 활용한 Inview로 보이지않는 100px짜리 컨테이너를 페이지 바닥에 생성하고 이를 ref로 감시하는 방식으로 해당 컨테이너가 스크롤에 들어올때마다 InfiniteQuery를 통해 캐싱된 데이터를 적당량 가져오며, 기존 데이터는 렌더링시키고 새 데이터로 메모리를 교체하는 식으로 효율적인 구조를 만들고, 트렌드에 맞게 중간에 로딩이 발생할시 next/image의 blur이미지로 스켈레톤UI를 보여주는 방식으로 구현하게 될 것 같습니다.
