infiniteScroll 기법이란?

Infinite Scroll, 즉 무한 스크롤은 사용자가 페이지 끝에 도달했을 때 자동으로 추가 데이터를 불러와서 표시하는 기법입니다.
이는 특히 소셜 미디어 피드, 이미지 갤러리, 긴 목록의 기사 등에서 많이 사용되며, 사용자 경험을 향상시키고, 더 많은 콘텐츠를 자연스럽게 탐색할 수 있게 해줍니다.

📌 Infinite Scroll 구현 방법

• 스크롤 이벤트 감지: 사용자가 페이지 하단에 가까워지는 것을 감지하기 위해 스크롤 이벤트를 사용합니다. window 객체의 scroll 이벤트를 리스닝하여 현재 스크롤 위치를 파악할 수 있습니다.

• 데이터 로드 조건 확인: 페이지 하단에 도달했는지 확인하기 위해, 스크롤 위치와 뷰포트의 높이, 그리고 문서의 전체 높이를 비교합니다. 일반적으로 사용자가 문서의 바닥으로부터 일정 거리 내에 있을 때 추가 데이터를 로드하는 것이 좋습니다.

• 비동기 요청으로 데이터 로드: 스크롤 조건이 충족되면, AJAX나 Fetch API를 사용하여 서버로부터 추가 데이터를 비동기적으로 요청합니다. 이 때, 페이지나 커서 기반 페이징 정보를 요청에 포함시켜 현재 로드해야 할 데이터의 위치를 서버에 알립니다.

• 데이터 렌더링: 비동기 요청으로 받아온 데이터를 DOM에 추가하여 사용자에게 보여줍니다. 이 과정에서 새로운 데이터 항목을 위한 HTML 마크업을 생성하고, 이를 기존 목록에 추가합니다.

• 로딩 인디케이터 표시 (선택사항): 데이터를 로드하는 동안 사용자에게 로딩 중임을 알리는 인디케이터(예: 스피너)를 표시할 수 있습니다. 데이터 로드가 완료되면 인디케이터를 숨깁니다.

---

🔎 예제코드

let isLoading = false;
window.addEventListener('scroll', () => {
  const { scrollTop, scrollHeight, clientHeight } = document.documentElement;

  if (!isLoading && scrollTop + clientHeight >= scrollHeight - 5) {
    // 하단에 도달함, 데이터 로드 함수 호출
    loadData();
  }
});

async function loadData() {
  isLoading = true;
  // 로딩 인디케이터 표시
  document.getElementById('loading').style.display = 'block';

  // 데이터를 비동기적으로 로드하는 코드
  const newData = await fetch('데이터_로드_URL').then(res => res.json());
  
  // 데이터 처리 및 DOM에 추가하는 코드
  renderData(newData);

  // 로딩 인디케이터 숨기기
  document.getElementById('loading').style.display = 'none';
  isLoading = false;
}

function renderData(data) {
  // 받아온 데이터를 사용하여 DOM 업데이트
}
를 입력하세요

👩🏻‍💻 기본적인 무한 스크롤 로직을 구현한 것으로, 실제 사용 시에는 데이터_로드_URL, renderData 함수 등을 적절히 수정하여 사용해야 합니다.
무한 스크롤 구현 시 성능 최적화를 고려하는 것도 중요합니다. 예를 들어, 스크롤 이벤트는 매우 자주 발생하기 때문에 쓰로틀링(throttling)이나 디바운싱(debouncing)을 적용할 수 있습니다.

---