react-dnd3 [DragNDrop] 드래그 도중 커서 변경 안녕하세요, 개발자 Sean입니다. 이전에 만들었던 DragNDrop 기능에서 고스트 이미지가 마음에 안 들어, 별도의 컴포넌트로 더 예쁜 커스텀 고스트 이미지를 만들어 보았습니다. 하지만 이로인해 마우스 커서 스타일이 도로 화살표로 돌아와 버렸는데요. 원인은 고스트 이미지를 없애기 위해 빈 이미지를 넣었기 때문에 그런 것 같습니다. react-dnd를 만든 개발자 깃헙에도 들어가 해결방법을 찾아보았지만 해결방법이 딱히 없다는 충격적인 답변을 보기만 했습니다 ㅠㅠ 하지만 해결방법이 없는 건 아닙니다. 왜냐하면 다른 웹사이트에서는 멋지게 드래그 앤 드롭 도중에 커서를 변경해주고 있거든요. 따라서 저는 약간은 과격한 방법으로 문제를 해결했습니다. 해결방법은 바로 드래그 이벤트가 시작되면 전역 스타일에 커서를.. 2023. 3. 21. [DragNDrop] 드래그 도중 커서 변경 안녕하세요, 개발자 Sean입니다. 오늘은 react-dnd를 이용한 드래그 앤 드롭 기능 구현도중 겪었던 커서 변경 문제에 대해 포스팅을 해보려고 합니다. 드래그 앤 드롭을 이용해 drag 이벤트를 발생시키면 자동적으로 마우스 뒤편에 ghost image가 나타나고 마우스는 기본 커서로 변경되는 것을 확인할 수 있습니다. 이는 html5 백엔드 api에서 자동으로 설정된 값이기 때문입니다. 안타깝게도 html5의 백엔드 api는 다루기가 어려운 데다 자유도가 낮아 많은 드래그 앤 드롭 예제에서는 커서변경을 포기하고 기능에 초점을 맞추고 있습니다. 구글에서도 많은 분들이 관련해서 불편함을 토로하는 글을 읽어볼 수 있습니다. 근본적인 해법으로는 드래그엔드랍을 지원하는 백엔드 api를 변경하는 것이지만 np.. 2023. 3. 16. [React] React-dnd 사용방법 안녕하세요, 개발자 Sean입니다. 오늘은 플랫폼 상단 탭의 Drag and Drop 기능 리펙터링을 진행했습니다. 베타 테스트용으로 급하게 만드느라 기존의 드래그 앤 드롭은 html5에서 기본적으로 지원하는 내장 기능을 이용해 구현해 놓은 상태였습니다. 하지만 ui/ux가 다소 엉성(?)하고 이를 해결하려면 여러 부수적인 코드를 많이 만들어야 하는 까닭에 많은 사람들이 이용해 안정성을 입증하면서 개발자의 의도대로 커스터마이징이 용이한 React-dnd를 사용하기로 했습니다. 완성된 동작은 아래와 같습니다. React-Dnd를 이용한 드래그 앤 드랍 하지만 사용하는 개발자 수에 비해 어딘가 부실한 설명으로 이해하는데 시간이 다소 걸렸습니다. 따라서 많이 부족하지만 다른 분들의 시간을 아껴드리기 위해 간단.. 2022. 11. 29. 이전 1 다음
