[JS] 무한 스크롤 기법 알아보기

주제: infiniteScroll 기법
내용: 비동기로 데이터를 가져와서 처리하는 방법으로 infiniteScroll 기법을 사용하는 방법에 대해서 작성

무한 스크롤(infiniteScroll) 기법이란?
사용자가 페이지의 끝에 도달했을 때, 자동으로 다음 페이지의 내용을 불러오는 방식을 의미합니다.
이 기법은 주로 비동기 통신을 이용하여 서버로부터 추가 데이터를 받아와 화면에 표현하는 방식으로 구현됩니다.

---

무한 스크롤 기법의 기본 원리

무한 스크롤의 기본 원리는 사용자가 페이지 하단에 도달하면, 추가적인 데이터를 서버로부터 비동기적으로 요청하고, 이를 현재 페이지에 동적으로 추가하는 것입니다. 이 과정에서 주로 사용되는 기술은 AJAX(Asynchronous JavaScript and XML) 혹은 Featch API 등이 있습니다.

---

구현 방법

① 스크롤 이벤트 감지

• 사용자의 스크롤 동작을 감지하기 위해 스크롤 이벤트 리스너를 사용합니다.

② 데이터 요청 조건 확인

• 페이지 끝에 도달했는지 확인하고, 도달했다면 추가 데이터를 요청합니다.

③ 비동기 데이터 요청

• AJAX 혹은 Fetch API를 사용하여, 서버로부터 데이터를 비동기적으로 요청합니다.

④ 데이터 렌더링

• 받아온 데이터를 HTML로 변환하여 페이지에 동적으로 추가합니다.

---

예시 코드

document.addEventListener('scroll', () => {
    // window.innerHeight: 브라우저 창의 내부 높이
    // document.documentElement.scrollTop: 문서가 수직으로 얼마나 스크롤 되었는지
    // document.documentElement.offsetHeight: 전체 문서의 높이
    if (window.innerHeight + document.documentElement.scrollTop === document.documentElement.offsetHeight) {
        // 스크롤이 페이지 바닥에 도달했을 때 데이터 로드 함수 호출
        loadData();
    }
});

function loadData() {
    // Fetch API 사용
    fetch('데이터를 불러올 서버의 URL')
        .then(response => response.json()) // 응답을 JSON 형태로 파싱
        .then(data => {
            data.forEach(item => {
                // 데이터를 동적으로 HTML에 추가하는 로직
                // 예: const itemElement = document.createElement('div');
                // itemElement.innerText = item; // 데이터를 텍스트로 설정
                // document.body.appendChild(itemElement); // body에 추가
            });
        })
        .catch(error => console.error('데이터 로드 중 오류 발생:', error));
}

이 코드는 스크롤 이벤트를 이용하여 사용자가 페이지 하단에 도달했을 때, 서버로부터 추가 데이터를 비동기적으로 요청하고 페이지에 추가합니다.