FinsFlowforFinsFlowfinsflow.hashnode.dev·Nov 22, 2024Valentine's Three-layered Exploding BoxUnleash Your Creativity with the Valentine’s Three-Layered Exploding Box Valentine's Day is not just about flowers and chocolates; it's also a canvas for expressing heartfelt emotions through creativity. Enter the “Valentine’s Three-Layered Exploding...Discussthreelayered
고라니드로koranidro.hashnode.dev·Nov 17, 2024[TypeScript] 제스처로 대화하기. #11 - 플릭(with. 변위) 편이번 편은 이전 편으로부터 이어집니다. 지난 편에서는 간단히 플릭에 대한 초기 속도를 계산해 봤습니다. 그렇다면 이것을 어떻게 활용할 수 있을까요? 여러분의 관심사는 결국 얼마나 이동해야 하는지일 것입니다. 이를 위해서는 시간에 따른 속도를 알 필요가 있습니다. 등가속도 운동에서의 속도는 \(v = v_0 + at\) 입니다. 각각 \(v_0\) = 초기 속도, \(a\) = 가속도, \(t\) = 시간입니다. 속도는 점차 감속해야 하므로 가...Discuss[TypeScript] 제스처로 대화하기.displacement
고라니드로koranidro.hashnode.dev·Nov 10, 2024[TypeScript] 제스처로 대화하기. #10 - 플릭(with. 초기 속도) 편잠깐! PointerEvent에 대해 아직 잘 모른다면 [typescript] 포인터 대통합(with. PointerEvent)을 먼저 읽어보세요! 플릭은 스와이프하다가 포인터를 떼는 동작을 말합니다. 다른 제스처는 포인터를 뗌과 동시에 종료되지만, 플릭은 뗀 이후에 의미가 있습니다. 그렇다면 포인터 이벤트가 종료된 후에 어떻게 동작을 이어갈 수 있을까요? 비밀은 순간 속도에 있습니다. interface PanEvent { timest...Discuss[TypeScript] 제스처로 대화하기.flick
고라니드로koranidro.hashnode.dev·Nov 3, 2024[TypeScript] 제스처로 대화하기. #9 - 팬(with. 스와이프) 편이번 편은 이전 편으로부터 이어집니다. 스와이프는 특정 축을 따라 이동하는 팬 동작을 의미합니다. 즉, 이동 축을 제한한 팬입니다. 대부분 수직, 수평 축에 대해 사용합니다. 축을 제한하려면 어떻게 해야 할까요? 이를 위해서는 포인터의 좌표를 축 위에 놓아야 합니다. 이는 축에 내린 수선의 발을 구하는 문제와 동일합니다. function findPerpendicularFootOnAxis(x: number, y: number, axis: num...Discuss[TypeScript] 제스처로 대화하기.gesture
고라니드로koranidro.hashnode.dev·Oct 27, 2024[TypeScript] 제스처로 대화하기. #8 - 팬(with. 드래그) 편이번 편은 이전 편으로부터 이어집니다. pointermove를 드래그 대상에 설정하면 포인터를 빠르게 이동할 경우, 대상을 놓치는 것을 느끼셨을 겁니다. 왜 이런 일이 벌어질까요? 상상해 보세요. 포인터가 이동했습니다. 충분히 이동했다면 요소 바깥으로 넘어갔을 겁니다. 이후 핸들러가 호출되고, 대상을 이동하면 포인터를 따라잡을 겁니다. 하지만 핸들러가 호출되기 전에 포인터가 한 번 더 이동하면 어떻게 될까요? 이번에도 충분히 이동했다면 대상이...Discuss[TypeScript] 제스처로 대화하기.JavaScript
고라니드로koranidro.hashnode.dev·Oct 20, 2024[TypeScript] 제스처로 대화하기. #7 - 팬 편잠깐! PointerEvent에 대해 아직 잘 모른다면 [typescript] 포인터 대통합(with. PointerEvent)을 먼저 읽어보세요! 팬은 포인터를 누른 상태로 방향 상관없이 이동하는 것을 말합니다. 좌표가 중요했던 이전 제스처와는 달리 이번에 중요한 것은 이동량입니다. 즉, 이전 좌표로부터 현재 좌표는 얼마 만큼 이동했느냐가 관건이지요. interface Point { x: number; y: number; } ...Discuss[TypeScript] 제스처로 대화하기.pan
고라니드로koranidro.hashnode.dev·Sep 26, 2024[TypeScript] 제스처로 대화하기. #6 - 롱 프레스(with. 범위) 편이번 편은 이전 편으로부터 이어집니다. 거리 계산은 지난 편의 내용으로 쉽게 구현할 수 있습니다. 하지만 한 가지 차이점은 탭의 경우, 이벤트 핸들러에서 처리하기 때문에 쉽게 좌표를 받아올 수 있지만 롱 프레스의 경우에는 그렇지 못하다는 것입니다. 현재 구현에서도 pointerdown의 좌표를 받아올 수 있지만 목적에 부합하지 않습니다. 필요한 것은 타이머가 호출된 시점의 좌표입니다. 타이머 호출 시점의 좌표를 받아오려면 어떻게 해야 할까요?...Discuss[TypeScript] 제스처로 대화하기.JavaScript
고라니드로koranidro.hashnode.dev·Sep 25, 2024[TypeScript] 제스처로 대화하기. #5 - 롱 프레스 편잠깐! PointerEvent에 대해 아직 잘 모른다면 [typescript] 포인터 대통합(with. PointerEvent)을 먼저 읽어보세요! 롱 프레스는 긴 시간 동안 누른 상태를 유지하는 것을 말합니다. 긴 시간은 어느 정도의 시간을 말할까요? 예상하셨을 수도 있겠지만 정해진 표준은 없습니다. 그러나 일반적으로 1,000ms 이내를 말하며, 그중에서도 500ms를 많이 사용합니다. 롱 프레스는 일정 시간 후에 발생하는 것이 기본입니다...Discuss[TypeScript] 제스처로 대화하기.long press
고라니드로koranidro.hashnode.dev·Sep 21, 2024[TypeScript] 제스처로 대화하기. #4 - 더블 탭 편더블 탭은 짧은 시간 내에 탭을 두 번 시행하는 것을 말합니다. 따라서 이전 편에서 다뤘던 탭 감지의 구현을 활용할 수 있습니다. 구현 함수는 아래와 같이 정의할 수 있습니다. function onTap(callback: (e: TapEvent) => void); TapEvent는 가상의 유형으로, 내부적으로 필요한 정보를 넘겨주어야 합니다. 이를 활용하여 더블 탭을 감지할 수 있습니다. let count = 0; onTap(e => { ...Discuss[TypeScript] 제스처로 대화하기.double click
고라니드로koranidro.hashnode.dev·Sep 20, 2024[TypeScript] 제스처로 대화하기. #3 - 탭(with. 범위) 편이번 편은 이전 편으로부터 이어집니다. 탭을 할 때 누른 지점과 뗀 지점의 차이가 큰 경우에 이를 유효하다 할 수 있을까요? 물론 허용할 수는 있지만 관점에 따라서는 부적절해 보일 수 있습니다. 요소 내부로 제한 범위를 요소 내부로 제한하고자 하는 경우, elementFromPoint을 활용할 수 있습니다. 이 함수는 좌표를 포함하는 최상단 요소를 반환합니다. 만약 반환된 요소가 추적 중인 요소와 다르다면 포인터가 외부에 있는 것으로 판단할 ...Discuss[TypeScript] 제스처로 대화하기.JavaScript
![[TypeScript] 제스처로 대화하기. #11 - 플릭(with. 변위) 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/r5c_l6SCRdg/upload/bb24791cc87f86f24a26de2040c3736a.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[TypeScript] 제스처로 대화하기. #10 - 플릭(with. 초기 속도) 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/vx-PQnfLDDk/upload/628d48edf6f0e1d85342ae2cd4703fb5.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[TypeScript] 제스처로 대화하기. #9 - 팬(with. 스와이프) 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/AkEr0jc5Lvs/upload/196668bd6e89b7cd40ac8524a8f00963.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[TypeScript] 제스처로 대화하기. #8 - 팬(with. 드래그) 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/Je6p3FF4jh0/upload/1043002fa96fda078514eafbea299e21.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[TypeScript] 제스처로 대화하기. #7 - 팬 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/VHMeU2sUGAs/upload/7404b64bf217df98027f8e04544d955e.jpeg?w=1600&h=840&fit=crop&crop=entropy&auto=compress,format&format=webp)
![[TypeScript] 제스처로 대화하기. #6 - 롱 프레스(with. 범위) 편](https://cdn.hashnode.com/res/hashnode/image/stock/unsplash/a92guIcnpSI/upload/2a6982d249f3eb54f257ef14685550f9.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)
![[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] 제스처로 대화하기. #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)