들어가며

드래그 앤 드롭은 예전부터 알고 싶었던 주제였다. 기존에 버튼을 통해 기능을 구현하는 방식에서 드래그 앤 드롭을 적용하면 훨씬 간편하게 사용자가 원하는 기능을 제공할 수 있을 것 같았기 때문이었다. 노션에서 드래그 앤 드롭을 사용해 요소의 위치를 변경하기도 하고, 로컬에 있는 파일을 드래그 앤 드롭으로 브라우저에 업로드 하기도 하는 등 다양한 곳에서 사용되고 있다. 알아두면 꼭 써먹을 곳이 있을 것 같다.

드래그 앤 드롭

자바스크립트에서 드래그 앤 드롭 기능을 사용하기 위해서는 드래그 하려는 요소에 draggable 이라는 속성을 추가해야한다. 마찬가지로 요소를 드롭해야 할 요소에는 droppable 속성을 추가해야한다.

사용자가 요소를 드래그하기 시작해서 드롭할 때 까지 다양한 이벤트가 발생하는데 이번에는 dragstart, dragover, drop 이벤트를 사용해 구현했다.

• dragstart: 사용자가 객체를 드래그하기 시작할 때 발생함.
• dragover: 드래그하면서 마우스가 대상 요소 위에 있을 때 발생함.
• drop: 드래그하던 객체를 놓은 droppable 요소에서 발생함.

위의 세 가지 이벤트 외에도 다양한 드래그 이벤트가 있기 때문에 알아두면 좋을 것 같다. MDN 드래그 앤 드롭

위에서 설명한 세 가지 이벤트를 사용해 드래그 가능한 빨간색 박스를 만들어보았다. 주의해야 할 점은 dragover 이벤트에서 기본 이벤트 동작을 막아야 drop 이벤트가 제대로 동작한다. 기본적으로 HTML 요소는 다른 요소의 위에 위치할 수 없기 때문이다.

드래그 이벤트 객체는 dataTransfer 라는 객체를 가지고 있다. 이 객체는 드래그 형태나 드래그 데이터, 각 드래그 아이템의 종류와 같은 드래그 이벤트의 상태를 담고 있다. dataTransfer 의 getData, setData 메서드를 사용해 데이터를 전달할 수 있다.

1  // 데이터 설정
2  e.dataTransfer.setData(type, data);
3  // 데이터 불러오기
4  e.dataTransfer.getData(type);

위의 코드에서 type 은 dataTransfer 객체에 담을 데이터의 타입을 의미하고, data 는 담을 데이터를 의미한다. type 에는 드래그 앤 드롭에 사용할 수 있는 공통 데이터 타입을 넣을 수도 있고, 사용자가 정한 임의의 문자열도 사용할 수 있다.

사실 위의 간단한 예제를 만들 때에도 헷갈리는 부분이 많아서 시간이 꽤 오래 걸렸다. 아직 완벽하게 이해하지 못해서 그렇다. 처음 드래그 이벤트를 공부할 때 e.preventDefault() 를 어디에 넣어야 할 지 엄청 헷갈렸는데 지금은 HTML 요소가 다른 요소 위에 올라갈 수 없기 때문에 dragover 의 기본 동작을 막아야 한다고만 이해해야 할 것 같다.

AJAX 지연이 생기면

비동기 통신을 하다보면 응답이 늦어질 때 화면을 어떻게 처리해야 할 지 고민이 많다. 예전에 혼자 공부할 때는 어떻게 해결하는 게 좋은 방법인지 몰라서 고민을 많이 했었다. 완벽한 방법이 있다고 생각했었는데 다양한 방법으로 구현할 수 있는 것 같다. 오늘 강의를 통해 requestIdleCallback 과 web worker 키워드에 대해 알게 되었다. 또, queue 를 사용해 연속적인 작업을 모아뒀다가 한번에 처리하는 방법도 배웠다. 여기는 나중에 다시 공부하고 정리해야겠다.

정리

오늘로 바닐라 js 강의가 끝이 났다. 처음 강의 시작할 때는 컴포넌트를 만드는 방법도 익숙하지 않았는데, 지금은 컴포넌트 구조는 뚝딱 짤 수 있는 정도는 된 것 같다. 그래도 아직 부족한 게 많아서 만들어 놨던 프로젝트 구조를 컴포넌트 구조로 변환하는 작업을 진행할 계획이다.

참고자료

https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API
https://inpa.tistory.com/entry/%EB%93%9C%EB%9E%98%EA%B7%B8-%EC%95%A4-%EB%93%9C%EB%A1%AD-Drag-Drop-%EA%B8%B0%EB%8A%A5