무한 스크롤이란 무엇입니까?

페이지를 아래로 스크롤할 때 제품이 계속해서 나타나는 온라인 상점과 같은 사이트를 이미 보신 적이 있을 것입니다. 또 다른 예는 unlimited.horse입니다. 단순해 보일 수도 있지만 "Infinite Scrolls"의 기능을 보여주는 훌륭한 예입니다. 웹사이트에 접속하면 말이 보이지만, 페이지를 아래로 스크롤하면 말의 다리가 무한정 계속 자라며, 결코 말의 발에 닿지 않는다는 것을 깨닫게 됩니다.

무한 스크롤 구현

이 기능은 현대 개발에서 널리 사용됩니다. Twitter, Facebook, 특히 Instagram과 같은 주요 소셜 네트워크에서 페이지를 아래로 스크롤해도 콘텐츠가 끝나지 않는 것처럼 보이는 무한 스크롤을 볼 수 있습니다.

이 글에서는 이 기능의 기본 구현을 보여드리겠습니다. 그러나 이 접근 방식은 긴 쿼리 문제, 캐싱 구현 및 프로덕션 애플리케이션에 필요한 기타 솔루션과 같은 문제를 해결하지 않습니다. 하지만 이는 이 기능을 구현하는 방법을 이해하기 위한 출발점입니다.

1단계: 무한 스크롤 기능을 추가할 위치 결정

먼저 무한 스크롤 기능을 어디에 추가할지 결정하세요. 게시물 목록일까요, 아니면 이미지일까요? 또한 데이터의 출처를 결정해야 합니다. 이 예에서는 기본 API인 Random Fox API의 이미지를 사용합니다.

2단계: HTML 파일 만들기

HTML 파일을 만들고 임의의 여우 이미지에 대한 컨테이너를 포함합니다.

Fox Images

3단계: CSS 파일 만들기

이 예에서는 스타일시트를 매우 단순하게 유지하겠습니다.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.header {
  font-size: 32px;
  color: black;
  text-align: center;
  font-family: Verdana, sans-serif;
}

img {
  width: 400px;
  height: 400px;
  margin: 4px;
  object-fit: cover;
}

4단계: JavaScript 파일 만들기

컨테이너를 선택하고 Random Fox API URL을 가져옵니다. HTML에 JavaScript와 CSS 파일을 연결하는 것을 잊지 마세요.

const container = document.querySelector('.container');
const URL = "https://randomfox.ca/images/";

function getRandomNumber() {
  return Math.floor(Math.random() * 100);
}

function loadImages(numImages = 6) {
  let i = 0;
  while (i 




  
  
  5단계: 스크롤 이벤트 추가


무한 스크롤 기능을 구현하려면 다음 이벤트 리스너를 추가하세요.


window.addEventListener('scroll', () => {
  if (window.scrollY   window.innerHeight >= document.documentElement.scrollHeight) {
    loadImages();
  }
});




scrollY와 innerHeight의 합이 scrollHeight보다 크거나 같으면 문서의 끝에 도달했기 때문에 더 많은 이미지를 로드해야 함을 의미합니다.


  
  
  결론


이제 페이지가 무한 스크롤 기술로 작동할 것입니다. 여기에 여러분을 위한 과제가 있습니다. 선택한 다른 API를 사용하여 이 프로젝트를 다시 실행하고, 항목을 표시하기 위해 좀 더 정교한 스타일을 구현해 보세요. 행운을 빌어요!