Svelte에서 무한 스크롤(Infinite Scroll)을 구현하는 방법은 다음과 같습니다.

1. 초기 설정

   let items = []; // 스크롤로 불러온 항목들을 저장할 배열
   let page = 1;  // 현재 페이지 번호
   
   // 스크롤 이벤트 리스너 등록
   window.addEventListener('scroll', handleScroll);
   

2. 스크롤 이벤트 처리

   function handleScroll() {
     // 사용자가 스크롤을 아래로 내리면서 페이지의 하단에 도달하였는지 확인
     if (window.innerHeight + window.pageYOffset >= document.body.offsetHeight) {
       loadMoreItems(); // 추가 항목들을 불러오는 함수 호출
     }
   }
   

3. 항목 불러오기

   async function loadMoreItems() {
     // 서버로부터 추가 항목들을 비동기적으로 불러옴 (예: API 요청)
     const newItems = await fetchItemsFromServer(page);
   
     // 불러온 항목들을 기존 배열에 추가
     items = [...items, ...newItems];
   
     page++; // 페이지 번호 증가
   }
   

4. Svelte 템플릿에 결과 렌더링

   {#each items as item}
     <div>{item}</div>
   {/each}
   

위의 예제는 가장 기본적인 무한 스크롤 구현 방법입니다. 실무에서는 서버에서 데이터를 로딩하는 방식과 더 많은 로직을 추가해야 할 수도 있습니다.

참고 자료:

1. Svelte 공식 사이트
2. Svelte 튜토리얼