Articles in this series
개발 중 제스처를 활용해야 하는 여러 가지 상황이 있었을 것입니다. 그럼에도 실제 제스처 감지를 직접 구현하는 것은 만만찮은 일입니다. 대부분 라이브러리를 사용하고 계실 것으로 생각되는데요. 그때마다 보면 라이브러리마다 사용법이 다 다릅니다. 또 지원도 제각각이라...
잠깐! PointerEvent에 대해 아직 잘 모른다면 [typescript] 포인터 대통합(with. PointerEvent)을 먼저 읽어보세요! 탭은 일반적으로 짧은 시간 내에 눌렀다 떼는 동작을 말합니다. 따라서 구현은 아래와 같이 두 가지 방식을 생각할 수...
이번 편은 이전 편으로부터 이어집니다. 이전 편에서 정의했듯 탭은 짧은 시간에 눌렀다 떼는 동작을 말합니다. 여기서 짧은 시간은 어떻게 정의할까요? 정해진 표준은 없지만 일반적으로 1,000ms 이내의 시간을 말합니다. 그중에서도 500ms를 기본값으로 사용하는...
이번 편은 이전 편으로부터 이어집니다. 탭을 할 때 누른 지점과 뗀 지점의 차이가 큰 경우에 이를 유효하다 할 수 있을까요? 물론 허용할 수는 있지만 관점에 따라서는 부적절해 보일 수 있습니다. 요소 내부로 제한 범위를 요소 내부로 제한하고자 하는 경우,...
더블 탭은 짧은 시간 내에 탭을 두 번 시행하는 것을 말합니다. 따라서 이전 편에서 다뤘던 탭 감지의 구현을 활용할 수 있습니다. 구현 함수는 아래와 같이 정의할 수 있습니다. function onTap(callback: (e: TapEvent) =>...
잠깐! PointerEvent에 대해 아직 잘 모른다면 [typescript] 포인터 대통합(with. PointerEvent)을 먼저 읽어보세요! 롱 프레스는 긴 시간 동안 누른 상태를 유지하는 것을 말합니다. 긴 시간은 어느 정도의 시간을 말할까요? 예상하셨을...
![[TypeScript] 제스처로 대화하기. #0](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/-84tQTSV_aE/upload/b581838c5de8cadc381aea1e7d6941bd.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[TypeScript] 제스처로 대화하기. #1 - 탭 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/m7zKB91brGo/upload/301ad29bc2cdfd828f14b630ec83b39a.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[TypeScript] 제스처로 대화하기. #2 - 탭(with. 지연 시간) 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/dtSCKE9-8cI/upload/62f866d982d9bc89632a8bb6bd2f1408.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[TypeScript] 제스처로 대화하기. #3 - 탭(with. 범위) 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/LgHNehAIcOs/upload/e41f3275230af2812495cbc6c88ab4d1.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[TypeScript] 제스처로 대화하기. #4 - 더블 탭 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/d5yOOWHcFnc/upload/30d9ca5760ad57f3c1b975a46559df94.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[TypeScript] 제스처로 대화하기. #5 - 롱 프레스 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/NEmWWfMvfpw/upload/cd6ff0bd2c7d74efcf9ca33c40c47eee.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
