InfiniteScroll에 대해서 알아보자.

사진 출처 gygy.log

what is infiniteScroll??

무한 스크롤이란 위 예시처럼 웹 페이지나 애플리케이션에서 콘텐츠를 끊임없이 로드하고 표시하는 기법 중 하나를 말한다. 이는 당연히 비동기로 처리가 되어야 하며 보편적으로 JavaScript와 AJAX(Asynchronous JavaScript and XML) 또는 fetch API를 사용한다.

과연 이런 무한 스크롤은 어떻게 구현하는 것일까?

무한 스크롤을 구현해보자.

1. HTML 문서 준비하기
   무한 스크롤을 적용할 콘텐츠를 포함하는 HTML 요소를 마크업합니다. 이 요소는 스크롤 가능한 컨테이너 역할을 합니다.

<div id="content-container">
  <!-- 여기에 동적으로 로드될 콘텐츠가 들어갑니다. -->
</div>

2. javaScript로 스크롤 이벤트 처리하기
   javaScript를 사용하여 스크롤 이벤트를 감지하고, 스크롤 위치가 특정 임계값에 도달하면 새로운 데이터를 불러오는 함수를 호출합니다.

const contentContainer = document.getElementById('content-container');
let isLoading = false;

function loadMoreContent() {
  if (isLoading) return;

  const scrollPosition = window.scrollY;
  const containerHeight = contentContainer.offsetHeight;
  const windowHeight = window.innerHeight;

  // 스크롤 위치가 특정 임계값 (예: 아래로 스크롤할 때 80% 지점)에 도달하면 데이터를 불러옵니다.
  if (scrollPosition + windowHeight >= containerHeight * 0.8) {
    isLoading = true;

    // AJAX 또는 fetch를 사용하여 새로운 데이터를 가져옵니다.
    fetch('url/for/more/data')
      .then(response => response.json())
      .then(data => {
        // 데이터를 받아와서 DOM에 추가합니다.
        appendDataToDOM(data);

        isLoading = false;
      })
      .catch(error => {
        isLoading = false;
        console.error('Error:', error);
      });
  }
}

function appendDataToDOM(data) {
  // 데이터를 DOM에 추가하는 로직을 작성합니다.
}

// 스크롤 이벤트를 리스닝하여 loadMoreContent 함수 호출
window.addEventListener('scroll', loadMoreContent);

// 초기 로딩을 위해 페이지 로드 시에도 loadMoreContent 함수 호출
window.addEventListener('load', loadMoreContent);

3. 새로운 데이터를 DOM에 추가하기
   새로운 데이터를 가져와서 DOM에 추가하는 함수를 작성합니다. 이 함수는 비동기적으로 호출되며, 데이터를 받아와서 화면에 표시합니다.

function appendDataToDOM(data) {
  const contentFragment = document.createDocumentFragment();

  data.forEach(item => {
    const newItemElement = document.createElement('div');
    newItemElement.classList.add('item');
    newItemElement.textContent = item.text;

    contentFragment.appendChild(newItemElement);
  });

  contentContainer.appendChild(contentFragment);
}

4. 스타일링 및 로딩 표시
   새로운 데이터를 로드할 때 로딩 표시를 추가하고, 필요한 경우 스크롤 컨테이너의 스타일을 조정하여 스크롤링 경험을 최적화합니다.

무한 스크롤....뭔가 화려하고 HIP한 느낌이다... 하지만 뭐랄까 굉장히 찝찝하다... 이유는 "무한"이라는 단어는 개발자를 불안하기 만들기 때문이다.
'과연 이 로직을 메모리가 어떻게 감당할까??' 하는 고민 동시에 떠오를 수밖에 없다.

고로 다음 주제에서 무한스크롤 구현을 주의해야 하는 몇가지 상황에 대해서 살펴보겠다.

⛔️ 무한스크롤 사용 시 주의사항 ⛔️

1. 콘텐츠 부하
   무한 스크롤을 사용하면 페이지가 끊임없이 새로운 콘텐츠를 로드하므로, 사용자의 브라우저와 서버에 부하를 줄 수 있습니다. 특히 대규모 콘텐츠를 다루는 경우, 이로 인해 성능 저하 문제가 발생할 수 있습니다.

2. 검색 및 정렬 어려움
   무한 스크롤은 보통 콘텐츠를 시간순서로 표시하며, 사용자에게 정렬이나 검색 기능을 제공하기 어렵게 만들 수 있습니다. 사용자가 특정 아이템을 찾고 싶을 때 쉽게 검색할 수 있어야 하는 경우에는 무한 스크롤을 사용하기 어려울 수 있습니다.

3. 페이지 번호 및 북마크 어려움
   무한 스크롤 페이지는 일반적으로 페이지 번호나 고유 URL을 가지고 있지 않으므로, 사용자가 특정 페이지로 이동하거나 북마크를 만들기 어렵습니다. 사용자 경험을 향상시키려면 추가 노력이 필요합니다.

4. 접근성 문제
   무한 스크롤은 모든 사용자에게 동등한 경험을 제공하기 어렵습니다. 스크린 리더 및 키보드 사용자에게는 페이지 내에서 콘텐츠를 쉽게 찾기 어려울 수 있습니다.

5. 광고 표시 어려움
   광고 표시는 무한 스크롤에서 복잡하게 처리해야 할 수 있습니다. 새로운 콘텐츠가 로드될 때마다 광고를 적절하게 표시하려면 추가 노력이 필요합니다.

위와 같은 주의사항을 꼭 인지하고 내가 만들고자 하는 웹 어플리케이션의 사용성과 목적에 맞게 무한 스크롤을 구현할지 말지 여부를 현명하게 결정하도록 하자!