infinite scroll 구현하기

infinite scroll

유저가 기사를 불러올 때 처음에 모든 기사를 불러올 경우 네트워크 데이터를 불필요하게 많이 소비하게 됩니다.

따라서 유저에게 필요할 때 적절하게 기사를 전달해주는 것이 필요합니다.

이를 위해서 infinite scroll이라는 방법을 통해 최초 3개의 기사를 불러오고, 이후의 기사부터는 무한 스크롤을 통해 비동기적으로 서버로부터 기사를 받아옵니다.

최초 3개의 기사는 임시로 정한 숫자이며 이후 10개 정도로 변경할 예정입니다.

기사를 받아올 때 jquery의 ajax를 활용하여 구현하였습니다.

$(window).scroll(function() {
    console.log($(window).scrollTop(), element.scrollHeight, $(document).height(), $(window).height());
#(1)  if ($(window).scrollTop() + DEFAULT_HEIGHT > ($(document).height() - $(window).height()) && !isUsed) {
      isUsed = !isUsed; #(2)
      $.ajax({
        url:`/moreArticles?page=${page}`,
        type:'get',
        success: function(articles) {
          JSON.parse(articles).map(function(article) {
            return articleList.insertAdjacentHTML('beforeend', makeTemplate(article))
          })
          isUsed = !isUsed;
          page += ADD_PAGE;
        },
        error: function(err) {
          console.error("error");
        }
      });
    }
});

브라우저에서 스크롤 이벤트를 통해 스크롤바가 현재 화면의 중간정도를 지나가면 새롭게 데이터를 받아옵니다.

이를 수식으로 표현하면

#(1) 현재 스크롤의 맨 위쪽 위치 + 기본 높이 > 전체 문서의 높이 - 현재 보고있는 화면의 높이가 될 때 서버에 요청을 통해 데이터를 받아옵니다.

데이터를 불러오는 내용은 controllers/userController.js에 moreArticles 프로퍼티에 작성되어있습니다.

#(2) 추가적으로 스크롤 이벤트는 굉장히 빈번하게 발생하기 때문에 스크롤이 적절한 위치에 도달 했을 때 단 한번만 동작하도록하기 위해서 isUsed 변수를 반전시켜 활용합니다.

(true -> false로 false -> true로 반전)

이후 makeTemplate(article)함수로 받아온 기사 데이터로 내용을 채워줍니다.

그리고 생성한 template을 기사 리스트에 추가해줍니다.

데이터 받아오기

  moreArticles: async (req, res, next) => {
    const { page } = req.query;
    const articles = await Article.findAll({
      where: { status: 4 },
      order: [['updatedAt', 'DESC']],
      offset: +page,
      limit: 3,
    });
    res.send(JSON.stringify(articles));
  },

유저에서 스크롤 이벤트를 통해 데이터 요청이 오면 moreArticles를 통해 유저에게 데이터를 전해줍니다.

status = 4 (게재가 완료된 기사)를 대상으로 최근에 업데이트 된 순서대로 client가 요청한 page부터 3개 (이후 10개로 변경)의 기사를 전달합니다.

파일 위치

public/javascripts/infiniteScroll.js에서 확인 할 수 있습니다.

출처

1. 무한스크롤 구현
2. jquery ajax