Hammer.js는 터치 제스처를 쉽게 처리할 수 있는 자바스크립트 라이브러리입니다. 그 중에서도 다중 터치 제스처를 처리하는 방법에 대해 알아보겠습니다.

먼저, Hammer.js를 다운로드하여 프로젝트에 포함해야 합니다. 아래 명령어를 사용하여 Hammer.js를 설치할 수 있습니다.

npm install hammerjs

다음으로, HTML 파일에서 Hammer.js를 로드해야 합니다. 아래 코드를 삽입하여 Hammer.js를 로드할 수 있습니다.

<script src="path/to/hammer.js"></script>

이제 터치 제스처를 처리할 엘리먼트를 지정해야 합니다. Hammer.js에서는 Hammer() 생성자를 사용하여 엘리먼트에 대한 인스턴스를 생성합니다. 다음 코드는 myElement라는 엘리먼트를 선택하고 해당 엘리먼트에 대한 Hammer.js 인스턴스를 생성하는 예입니다.

var element = document.getElementById('myElement');
var hammer = new Hammer(element);

이제 인스턴스에 이벤트 리스너를 추가하여 다중 터치 제스처를 처리할 수 있습니다. 다음 코드는 tap, swipe, pinch, rotate 이벤트에 대한 리스너를 추가하는 예입니다.

hammer.on('tap swipe pinch rotate', function(ev) {
  // 제스처에 따라 실행될 코드 작성
});

위의 코드에서 ev는 이벤트 객체를 나타내며, 제스처 관련 정보를 포함하고 있습니다. 따라서 ev 객체를 통해 제스처의 유형, 위치, 방향 등을 알 수 있습니다.

Hammer.js를 사용하여 다중 터치 제스처를 처리하는 방법에 대해 소개해드렸습니다. 자세한 내용은 Hammer.js 공식 문서를 참조하시기 바랍니다.