- 자바스크립트 Turbolinks를 이용한 페이스북 스타일의 무한 스크롤 구현하기

09 Nov 2023

javascript

페이스북은 무한 스크롤을 통해 사용자들이 스트리밍 방식으로 콘텐츠를 탐색할 수 있도록 합니다. 이러한 무한 스크롤 기능은 사용자 경험을 향상시키는 동시에 콘텐츠를 효율적으로 로딩할 수 있도록 도와줍니다. 이번 기사에서는 자바스크립트 Turbolinks를 이용하여 페이스북 스타일의 무한 스크롤을 구현하는 방법에 대해 알아보겠습니다.

Turbolinks란?

Turbolinks는 웹 애플리케이션의 페이지 로딩 속도를 향상시키기 위한 자바스크립트 라이브러리입니다. 기존의 전체 페이지 로딩 방식과는 달리, Turbolinks는 페이지의 일부만 변경하여 새로운 컨텐츠를 로딩합니다. 이를 통해 매번 전체 페이지를 새로 로딩하는 비용을 줄이고, 빠른 페이지 전환을 가능하게 합니다.

무한 스크롤을 위한 페이지 구조

무한 스크롤을 구현하기 위해서는 페이지의 구조를 적절히 설계해야 합니다. 가장 간단한 방법은 스크롤 이벤트를 감지하고 스크롤이 페이지 내부의 특정 영역에 도달했을 때 새로운 컨텐츠를 로딩하는 것입니다.

// 스크롤 이벤트 핸들러
window.addEventListener('scroll', function() {
    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    var windowHeight = window.innerHeight || document.documentElement.clientHeight;
    var documentHeight = document.documentElement.scrollHeight;

    // 페이지의 하단에 도달했을 때
    if (scrollTop + windowHeight >= documentHeight) {
        // 새로운 컨텐츠를 로딩하는 로직
        loadMoreContent();
    }
});

Turbolinks를 사용하여 무한 스크롤 구현하기

Turbolinks를 이용하면 페이지 로딩 방식이 변경되기 때문에 기존의 스크롤 이벤트 핸들러만으로는 동작하지 않습니다. 대신 turbolinks:load 이벤트를 통해 새로운 컨텐츠를 로딩하는 로직을 실행해야 합니다.

document.addEventListener('turbolinks:load', function() {
    window.addEventListener('scroll', function() {
        var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
        var windowHeight = window.innerHeight || document.documentElement.clientHeight;
        var documentHeight = document.documentElement.scrollHeight;

        // 페이지의 하단에 도달했을 때
        if (scrollTop + windowHeight >= documentHeight) {
            // 새로운 컨텐츠를 로딩하는 로직
            loadMoreContent();
        }
    });
});

Turbolinks를 사용하면 페이지 이동 시에도 스크롤 이벤트 핸들러가 자동으로 연결되므로, 사용자가 뒤로가기나 앞으로가기 버튼을 클릭할 때마다 무한 스크롤이 계속 동작합니다.

마무리

이번 기사에서는 자바스크립트 Turbolinks를 이용하여 페이스북 스타일의 무한 스크롤을 구현하는 방법에 대해 알아보았습니다. Turbolinks를 사용하면 페이지 로딩 속도를 향상시킬 수 있고, 무한 스크롤을 통해 사용자 경험을 향상시킬 수 있습니다. 참고 자료에 나와있는 Turbolinks 공식 문서를 참조하여 더 자세한 사용법을 알아보시기 바랍니다.

참고 자료

#javascript #webdev