[javascript] Hammer.js를 사용하여 터치 이벤트를 무한 스크롤 기능에 적용하는 방법은?

27 Nov 2023

javascript

Hammer.js는 JavaScript로 작성된 터치 제스처 인식 라이브러리로써, 터치 이벤트를 쉽게 인식할 수 있게 해주는 도구입니다. 이러한 Hammer.js를 사용하여 무한 스크롤 기능에 터치 이벤트를 적용하려면 다음과 같이 해야합니다.

Hammer.js 설치 Hammer.js를 사용하기 위해서는 먼저 해당 라이브러리를 프로젝트에 설치해야 합니다. 아래의 명령어를 사용하여 Hammer.js를 설치합니다.
```
npm install hammerjs
```
Hammer.js 라이브러리 로드 Hammer.js를 사용하기 위해서는 해당 라이브러리를 로드해야 합니다. 다음과 같이 HTML 파일의 <head> 태그에서 Hammer.js를 로드합니다.
```
<script src="https://hammerjs.github.io/dist/hammer.min.js"></script>
```
터치 이벤트 인식 Hammer.js를 사용하여 터치 이벤트를 인식하기 위해서는 다음과 같이 해야합니다. 계속해서 스크롤할 수 있는 무한 스크롤 컨테이너 엘리먼트를 선택하고, Hammer.js를 활용하여 터치 이벤트를 인식합니다.
```
const container = document.querySelector('.infinite-scroll-container');
   
const hammer = new Hammer(container);
   
hammer.on('swipeup', function(event) {
  // 스크롤을 아래로 이동시키는 로직
});

hammer.on('swipedown', function(event) {
  // 스크롤을 위로 이동시키는 로직
});
```
위의 예시 코드에서 .infinite-scroll-container는 무한 스크롤 컨테이너 엘리먼트의 CSS 선택자입니다. 여기에는 사용자의 터치 동작에 따라 아래로 스크롤 또는 위로 스크롤하는 로직을 구현하면 됩니다.

물론, swipeup이나 swipedown외에도 Hammer.js에서 제공하는 다른 터치 이벤트를 사용할 수도 있습니다. 여러분의 프로젝트에 맞게 적절한 이벤트를 선택하시면 됩니다.
무한 스크롤 기능 구현 마지막으로, 터치 이벤트로 스크롤을 이동시키는 로직에 무한 스크롤 기능을 구현해야 합니다. 무한 스크롤은 사용자가 아래로 스크롤할 때 새로운 컨텐츠를 동적으로 불러오는 것을 의미합니다. 이 부분은 프로젝트의 로직에 따라 구현하시면 됩니다.

예를 들어, 사용자가 아래로 스크롤할 때마다 Ajax 요청을 통해 새로운 데이터를 가져오고, 가져온 데이터를 스크롤 컨테이너에 추가하는 일련의 과정을 구현해야 합니다.

이렇게 Hammer.js를 사용하여 터치 이벤트를 무한 스크롤 기능에 적용할 수 있습니다. Hammer.js를 활용하면 모바일 웹 애플리케이션에서 터치 이벤트를 간편하게 처리할 수 있으므로, 웹 사이트나 웹 앱에서 무한 스크롤 기능을 구현할 때 유용하게 활용할 수 있습니다.

참고 자료: