인피니티 스크롤(Infinity Scroll)
웹 페이지에서 사용자가 스크롤을 내릴 때 새로운 콘텐츠를 자동으로 로드하는 기술을 뜻한다. 이 기술은 사용자 경험을 향상시키고 페이지 네비게이션을 더 원활하게 만들 수 있다. 기존의 페이지네이션과 같이 하단의 숫자로 이루어진 네비게이션은 데이터를 로드하려면 일일이 버튼을 클릭해야했다. 이 방법 대신, 인피니티 스크롤을 사용하면 스크롤을 내리면서 자연스럽게 콘텐츠가 로드되는 것을 경험할 수 있다.
스크롤 이벤트로 사용하는 방법
이 방법은 스크롤 위치가 특정 임계값에 도달했을 때 추가 콘텐츠를 로드하는 방식이. 이 방법의 장점은 비교적 간단하게 구현할 수 있다는 점이다. 하지만 스크롤 이벤트 자체가 빈번하게 발생하므로 성능 저하의 원인이 될 수 있다.
스크롤 방식의 한계
스크롤을 움직일 때마다 이벤트가 발생하기에 성능문제가 야기될 수 있다. 이를 해결하기 위해 브라우저 단계에서 보통 스크롤 이벤트에 쓰로틀링(Throttling)을 적용하여 이벤트를 제한한다.
Throttling
Throttle은 이벤트가 발생하더라도 일정한 간격으로만 해당 이벤트를 실행한다. 따라서 이벤트 핸들링 주기가 일정하게 유지되며, 빈번한 호출을 줄여 성능을 개선할 수 있다.
예를 들어, 브라우저 스크롤 이벤트에서 매 스크롤마다 이벤트를 처리하는 것이 아니라, 일정 간격마다 한 번씩만 처리하는 방식으로 쓰로틀링을 구현할 수 있다.
이와 같은 종류의 방법으로 디바운싱(Debouncing)이 있다.
Debouncing
Debounce는 일정 시간 동안 이벤트 호출이 없을 때에만 해당 이벤트를 실행한다. 이벤트를 그루핑해서 특정 시간이 지난 후 하나의 이벤트만 발생하도록 하는 기술이다. 사용자가 input 창을 입력하는 등의 이벤트에 적용되며 사용자의 입력을 마치 안정화시키는 효과를 가져온다.
간단한 예시로, 검색 입력 필드에서 사용자가 타이핑하는 동안 실시간으로 검색 결과를 보여주는 경우를 들 수 있다. 사용자가 타이핑을 멈췄을 때만 검색 요청을 보내도록 한다.
구현 방식
개발자가 인피니티 스크롤을 구현하는 데는 두 가지 일반적인 방법이 있다. 일반적인 스크롤 이벤트를 사용하는 방법과 Intersection Observer를 사용하는 방법이 있고, 각각의 방법은 장단점을 가지고 있다. 먼저 일반적인 스크롤 이벤트 방법을 다음 포스트에서 살펴보자.
npm i throttle-debounce 와
npm i @types/throttle-debounce -D라이브러리를 공통적으로 설치해야한다.
