Series

[TypeScript] 제스처로 대화하기.

TypeScript를 통해 브라우저 환경에서 제스처 인식을 구현하는 법을 배웁니다.

[TypeScript] 제스처로 대화하기. #0
개발 중 제스처를 활용해야 하는 여러 가지 상황이 있었을 것입니다. 그럼에도 실제 제스처 감지를 직접 구현하는 것은 만만찮은 일입니다. 대부분 라이브러리를 사용하고 계실 것으로 생각되는데요. 그때마다 보면 라이브러리마다 사용법이 다 다릅니다. 또 지원도 제각각이라 의존성이 넘쳐 나는 경우도 다반사이지요. 따라서 이번 시리즈에서는 브라우저 환경에서 제스처 인식을 직접 구현해 보고, 이를 활용할 수 있도록 하는 것을 목표로 합니다. 그에 앞서 주요...
Sep 15, 20242 min read16
[TypeScript] 제스처로 대화하기. #1 - 탭 편
잠깐! PointerEvent에 대해 아직 잘 모른다면 [typescript] 포인터 대통합(with. PointerEvent)을 먼저 읽어보세요! 탭은 일반적으로 짧은 시간 내에 눌렀다 떼는 동작을 말합니다. 따라서 구현은 아래와 같이 두 가지 방식을 생각할 수 있습니다. pointerup을 최초 진입점으로 등록합니다. 즉, 최초에 pointerdown과 함께 모든 포인터에 대해 등록하는 것입니다. const activePointerSe...
Sep 19, 20241 min read30
[TypeScript] 제스처로 대화하기. #2 - 탭(with. 지연 시간) 편
이번 편은 이전 편으로부터 이어집니다. 이전 편에서 정의했듯 탭은 짧은 시간에 눌렀다 떼는 동작을 말합니다. 여기서 짧은 시간은 어떻게 정의할까요? 정해진 표준은 없지만 일반적으로 1,000ms 이내의 시간을 말합니다. 그중에서도 500ms를 기본값으로 사용하는 경우가 많습니다. 시간 초과의 판단은 두 가지 방식을 생각할 수 있습니다. 타이머를 사용하여 유효성을 즉시 판단합니다. pointerdown 시 setTimeout을 통해 취소 함수...
Sep 19, 20241 min read9
[TypeScript] 제스처로 대화하기. #3 - 탭(with. 범위) 편
이번 편은 이전 편으로부터 이어집니다. 탭을 할 때 누른 지점과 뗀 지점의 차이가 큰 경우에 이를 유효하다 할 수 있을까요? 물론 허용할 수는 있지만 관점에 따라서는 부적절해 보일 수 있습니다. 요소 내부로 제한 범위를 요소 내부로 제한하고자 하는 경우, elementFromPoint을 활용할 수 있습니다. 이 함수는 좌표를 포함하는 최상단 요소를 반환합니다. 만약 반환된 요소가 추적 중인 요소와 다르다면 포인터가 외부에 있는 것으로 판단할 ...
Sep 20, 20241 min read11
[TypeScript] 제스처로 대화하기. #4 - 더블 탭 편
더블 탭은 짧은 시간 내에 탭을 두 번 시행하는 것을 말합니다. 따라서 이전 편에서 다뤘던 탭 감지의 구현을 활용할 수 있습니다. 구현 함수는 아래와 같이 정의할 수 있습니다. function onTap(callback: (e: TapEvent) => void); TapEvent는 가상의 유형으로, 내부적으로 필요한 정보를 넘겨주어야 합니다. 이를 활용하여 더블 탭을 감지할 수 있습니다. let count = 0; onTap(e => { ...
Sep 21, 20241 min read25
[TypeScript] 제스처로 대화하기. #5 - 롱 프레스 편
잠깐! PointerEvent에 대해 아직 잘 모른다면 [typescript] 포인터 대통합(with. PointerEvent)을 먼저 읽어보세요! 롱 프레스는 긴 시간 동안 누른 상태를 유지하는 것을 말합니다. 긴 시간은 어느 정도의 시간을 말할까요? 예상하셨을 수도 있겠지만 정해진 표준은 없습니다. 그러나 일반적으로 1,000ms 이내를 말하며, 그중에서도 500ms를 많이 사용합니다. 롱 프레스는 일정 시간 후에 발생하는 것이 기본입니다...
Sep 25, 20241 min read18

Command Palette