To do list Drag&Drop

API : https://todo-api.roto.codes/${username}
 ㄴ 응답: todos[{content, isCompleted, _id}]

• draggable 속성
• 요소의 드래그 가능 여부, 모든 요소에 적용 가능
• draggable을 지정하지 않은 경우의 기본값은 auto로, 브라우저 기본 동작(텍스트 선택 영역, 이미지, 링크 외에는 드래그가 불가능)을 따름

• drag이벤트 : 밑의 이벤트들을 모두 포함
• dragstart 이벤트 : 이벤트가 발생된 요소의 드래그를 시작할 때 발생
• dragend 이벤트 : 이벤트가 발생된 요소의 드래그가 끝날 때, 정확히 말하면 드래그 된 요소가 정착했을 때 발생
• dragenter 이벤트 : 이벤트가 발생된 요소에 드래그된 요소가 들어왔을 때
• dragover 이벤트 : 이벤트가 발생된 요소에 드래그된 요소가 들어있을 동안 계속 발생함 (확실치 않은 설명)
• 기본적으로 한 요소(ex.div)의 위에 다른 HTML 요소가 위치(drop)하는건 안됨. 이를 허용하기 위해 대상 요소의 기본 동작(이 위에 올릴 수 없는 동작)을 막을 때 사용
• 대상 요소에 dragover 이벤트를 걸어서 preventDefault를 호출
• preventDefault()는 해당 이벤트 리스너 안에서만 동작, 스코프 밖에서, 즉 콜백이 끝나면 해제된다
• 위에 올리지 못하는 특성을 dragover이벤트처럼 매순간 막아줘야 그 때 drop이벤트가 발생될 수 있음
// 질문1: dragover의 기본동작은 무엇인가.. 위에 올리지 못하게 하는 속성?
// 질문2: defaultEvent는 event에 따라 다른건가? 대상 요소에 따라 다른가?
• dragleave 이벤트 : 이벤트가 발생된 요소에서 드래그하고 있는 마우스 커서가 벗어날 때 발생
• drop 이벤트 : 이벤트가 발생된 요소에 드래그된 요소가 놓아졌을 때(마우스가 떼졌을 때)
 
• dataTransfer
• 드래그되고 있는 데이터를 보관하기 위해 사용되는 drag이벤트의 속성
• drag 이벤트끼리 값이 공유된다
• [속성]
• dropEffect
• 드래그 하는동안 표시되는 커서
• 값은 none, copy, link, move
• copy : A copy of the source item is made at the new location.
• move : An item is moved to a new location.
• link : A link is established to the source at the new location.
• none : 드롭되지 않게 설정
• effectAllowed
• 가능한 작업의 모든 타입을 제공
• none, copy, copyLink, copyMove, link, linkMove, move, all , uninitialized 
• files
• 데이터 전송에서 사용할 수 있는 모든 로컬 파일의 목록을 포함
• 드래그 작업에 드래그하고 있는 파일이 포함되지 않으면 이 속성은 빈 목록
• items 
• 모든 드래그 데이터의 목록인 DataTransferItemList 객체를 받음
• types 
• dragstart 이벤트에 설정된 형식을 제공하는 문자열 배열