JavaScript로 드래그 앤 드롭 구현하기
칸반 보드 같은 걸 만들 때 드래그 앤 드롭은 필수다. 라이브러리를 쓰면 편하긴 한데, 간단한 기능이면 직접 구현하는 게 번들 사이즈도 줄고 커스터마이징도 자유롭다. HTML5 Drag and Drop API가 있긴 하지만 모바일에서 제대로 작동하지 않아서, 마우스/터치 이벤트를 직접 다루는 방식으로 구현했다. HTML 구조 <div class="container"> <div class="column" id="todo"> <h2>할 일</h2> <div class="card" draggable="true">카드 1</div> <div class="card" draggable="true">카드 2</div> </div> <div class="column" id="doing"> <h2>진행 중</h2> <div class="card" draggable="true">카드 3</div> </div> <div class="column" id="done"> <h2>완료</h2> </div> </div> CSS 드래그 중인 요소에 시각적 피드백을 주는 게 중요하다: ...