컴포넌트 Resize 기능을 마우스 이벤트로 처리(feat. throttling) - boostcamp-2020/Project15-B-Client-Based-Formula-Editor GitHub Wiki

메인화면에서 두 영역을 나누면서 크기를 조절 할 수 있는 Bar를 만들고자 했습니다. 처음엔 drag&drop API로 드래그해서 resize하는 기능을 구현하려고 했습니다. Bar를 드래그해서 드랍할 때 마우스 위치를 계산하여 두 영역의 높이를 계산해주는 것까지는 잘 진행되었으나, 드래그할 때 마우스를 따라다니는 Bar를 수직으로만 이동하게 하고 싶었습니다.

그러나 drag&drop API로는 이 문제를 해결할 수 없어 mouse 이벤트로 변경하게 되었습니다. Bar에 onMouseDown으로 Bar를 클릭한 시점에 Bar가 이제 움직일 것이라는 상태로 변경하고, Bar가 움직이는 상태가 되면 onMouseMove로 하얀 점선이 움직이는 마우스를 따라다니며 높이를 미리 볼 수 있게 했습니다. Bar가 움직일 수 있는 영역에 onMouseUp 이벤트를 주어 마우스 드래그가 끝날 때 Bar의 상태를 바꾸고, 더 이상 마우스가 움직일 때 점선이 따라다니지 않고 두 영역의 높이가 resize 되도록 구현했습니다.

더불어 mouseMove 이벤트가 너무 빈번하게 발생하여 이를 최적화하기 위해 **쓰로틀링(throttling)**을 적용하여 100ms 마다 이벤트가 처리되도록 했습니다.