오류 해결) Unable to preventDefault inside passive event listener invocation

코드

const handleTouchMove = (event) => {
    event.preventDefault();
    const x = event.touches[0].clientX;
    const y = event.touches[0].clientY;
    const day = calculateDayFromTouch(x, y);
    console.log("터치 중"+x+":"+y);
    handleDrag(day);
  };

마우스 드래그와 터치 드래그를 구현하는데 터치가 제대로 작동하지 않아서 (터치가 먹히질 않고 드래그로 먹힘) event.preventDefault(); 를 추가하니 정상적으로 작동되긴 됐다.
근데 콘솔창에 오류가 뜨기 시작함

콘솔창

Unable to preventDefault inside passive event listener invocation

찾아보니 일반적으로 브라우저가 주는 경고로
터치 이벤트 핸들러에서 event.preventDefault()가 호출될 때 발생

해당 핸들러가 브라우저에서 성능 최적화를 위해 preventDefault()을 호출할 수 없다는 것을 알려주는 것

해결 방법

1. event.preventDefault() 지우기

2. Passive event listener로 등록하지 않도록 수정
특정 이벤트 핸들러에서 preventDefault()이 필요하다면 해당 핸들러를 passive가 아닌 active listener로 등록
-> 이렇게 하려면 이벤트 리스너 객체의 옵션에 { passive: false }를 지정하여 등록
-> 이벤트 핸들러는 passive가 아닌 active listener로 등록되어서 preventDefault()을 사용할 수 있게 됨 이러한 변경이 성능에 영향을 줄 수 있으므로 반드시 필요한 경우에만 사용

event.preventDefault() 지우니 제대로 작동했다