실무개발·2026년 2월 24일
HTML5 드래그 앤 드롭이 웨일에서 안 된다: dnd-kit으로 해결한 이야기
HTML5 Drag and Drop API로 만든 칸반 보드가 네이버 웨일에서만 동작하지 않았다. 브라우저 제스처가 네이티브 드래그 이벤트를 가로채는 문제, dnd-kit의 Pointer Events 기반 아키텍처로 해결했다.
#React#dnd-kit#Drag and Drop#Frontend
개발과 기술에 대한 이야기를 기록합니다.
HTML5 Drag and Drop API로 만든 칸반 보드가 네이버 웨일에서만 동작하지 않았다. 브라우저 제스처가 네이티브 드래그 이벤트를 가로채는 문제, dnd-kit의 Pointer Events 기반 아키텍처로 해결했다.
오픈소스에 기여하려고 봤는데 README가 없어서 포기한 적이 있다. 그때 좋은 문서의 가치를 뼈저리게 느꼈다.
맥을 새로 사면 개발 환경 세팅에 이틀이 걸렸다. dotfiles과 자동화 스크립트를 만들고 나니 30분이면 끝난다.
정규표현식을 외계어처럼 느꼈는데, 실제로 자주 쓰는 패턴 20개만 익히니 텍스트 처리가 한 줄로 끝났다.
폼 검증 로직을 직접 작성하다가 엣지 케이스 지옥에 빠졌다. React Hook Form과 Zod 조합이 폼 개발의 최적해였다.
Redux가 너무 복잡해서 Zustand로 바꿨는데, 보일러플레이트가 90% 줄었다. 근데 제대로 쓰려면 알아야 할 패턴이 있었다.
SSR 페이지가 데이터 로딩 때문에 3초간 빈 화면을 보여주고 있었다. Streaming SSR로 준비된 부분부터 먼저 보여주니 체감 속도가 극적으로 개선됐다.
API 라우트 만들고, fetch 호출하고, 로딩 상태 관리하고... 폼 하나 처리하는 데 너무 많은 코드가 필요했는데, Server Actions로 획기적으로 줄었다.
Server Component에서 함수를 props로 전달했더니 에러가 났다. 직렬화 경계를 이해하고 나니 RSC의 진짜 패턴이 보였다.
블로그 이미지가 전체 페이지 용량의 80%를 차지하고 있었다. 포맷 변환과 반응형 이미지로 로딩 속도를 극적으로 개선한 이야기.
오프라인에서도 앱이 돌아가게 만들고 싶었는데, Service Worker의 캐싱 전략을 제대로 이해하고 나니 가능해졌다.
CSV 파일을 파싱하는 동안 UI가 완전히 멈췄다. Web Worker로 무거운 연산을 분리하니 UI가 부드럽게 유지됐다.
lodash 하나 import했을 뿐인데 번들에 전체 라이브러리가 들어갔다. Tree Shaking이 제대로 작동하게 만드는 법을 정리했다.
번들 크기가 2MB를 넘어가면서 초기 로딩이 5초나 걸렸다. Lazy Loading과 Code Splitting으로 필요한 코드만 불러오니 2초로 줄었다.
매번 수동으로 빌드하고 배포하다가 실수로 버그를 프로덕션에 올렸다. GitHub Actions로 자동화한 후 그런 실수가 사라졌다.
이미지와 정적 파일을 서버에서 직접 서빙하면 트래픽이 몰릴 때 서버가 위험해진다. S3 + CloudFront 조합으로 정적 파일 서빙을 분리하는 방법을 정리했다.
세 플랫폼 다 써봤는데, 가격, 속도, 기능 각각 장단점이 확실했다. 프로젝트 상황별로 어디를 써야 하는지 정리했다.
서버가 미국에 있어서 한국 사용자 응답이 느렸는데, Cloudflare Workers로 전 세계 엣지에서 코드를 실행하니 응답 시간이 극적으로 줄었다.
처음엔 다 비슷해 보였는데, 실제로 써보니 각각 강점이 완전히 달랐다. 스타트업 관점에서 클라우드 선택 기준을 정리했다.
isLoading, isError, data를 따로 관리하다가 불가능한 상태 조합이 생겼다. Discriminated Union으로 상태를 완벽하게 표현한 이야기.
