매우 긴 목록이나 게시물 리스트를 사용자에게 보여줄 때, 한 번에 모든 데이터를 로드하지 않고 스크롤을 내리면서 추가적인 데이터를 동적으로 로드하는 방식을 구현하는 것이 일반적입니다. 이를 “무한 스크롤”이라고 합니다. 이를 구현하기 위해서는 JavaScript 라이브러리 중에서도 jQuery를 사용하면 간편하게 구현할 수 있습니다.

1. HTML 구조 설정

우선, 스크롤을 구현할 HTML 구조를 설정해야합니다. 예를 들어, 스크롤을 적용시킬 div 태그와 데이터를 출력할 ul 태그를 포함하는 구조를 생성합니다.

<div id="scroll-container">
  <ul id="data-list">
    <!-- 데이터가 동적으로 추가될 부분 -->
  </ul>
</div>

2. 스크롤 이벤트 처리

다음으로 jQuery를 사용하여 스크롤 이벤트를 처리합니다. 스크롤 이벤트가 발생할 때마다 추가적인 데이터를 가져오는 AJAX 요청을 보내고, 가져온 데이터를 동적으로 출력합니다.

$(window).on('scroll', function() {
  if ($(window).scrollTop() + $(window).height() >= $(document).height()) {
    // AJAX 요청을 보내고 데이터를 가져오는 로직 작성
    $.ajax({
      url: '데이터를 가져올 URL',
      method: 'GET',
      success: function(response) {
        // 가져온 데이터를 동적으로 출력하는 로직 작성
        response.forEach(function(data) {
          $('#data-list').append('<li>' + data + '</li>');
        });
      }
    });
  }
});

위의 코드는 사용자가 스크롤을 끝까지 내릴 때마다 AJAX 요청을 보내고, 받아온 데이터를 ul 태그 내에 li 태그로 추가하는 로직입니다.

3. 페이징 처리

추가적인 데이터를 받아오는 AJAX 요청 시, 서버 측에서 페이징 처리를 해야합니다. 예를 들어, 요청한 페이지 번호와 한 페이지당 보여줄 데이터의 개수를 파라미터로 받아 해당 페이지의 데이터를 반환해야합니다.

$.ajax({
  url: '데이터를 가져올 URL',
  method: 'GET',
  data: {
    page: currentPage,
    limit: itemsPerPage
  },
  success: function(response) {
    // 가져온 데이터를 동적으로 출력하는 로직 작성
  }
});

서버 측에서는 받은 페이지 번호와 한 페이지당 보여줄 데이터의 개수를 기반으로 필요한 데이터를 조회하여 응답해주면 됩니다.

4. 추가적인 개선 사항

무한 스크롤을 구현할 때 발생할 수 있는 성능 문제를 개선하기 위해서는 몇 가지 추가적인 사항을 고려해볼 수 있습니다.

• 스크롤 이벤트가 발생할 때마다 AJAX 요청을 보내는 것이 아니라, 일정한 간격을 두고 요청을 보내도록 설정할 수 있습니다. 이를 위해 setTimeout 함수를 사용하여 일정 시간이 지나면 AJAX 요청을 보내는 로직을 실행할 수 있습니다.
• 스크롤 이벤트가 발생할 때마다 데이터를 가져오는 것이 아니라, 현재 로드되어 있는 데이터의 마지막 인덱스를 기준으로 이후의 데이터만 가져오는 방법을 사용할 수 있습니다. 이를 위해서는 서버 측에서 로드된 데이터의 마지막 인덱스를 전달해주어야합니다.

이렇게 jQuery를 사용하여 무한 스크롤과 페이징 처리를 구현할 수 있습니다. 참고로, 위의 코드는 예시일 뿐이며, 실제 구현에는 맞춤화된 로직을 적용해야합니다.