중간에 사람들이 탈주를해서 3명끼리하다가 4명으로 마무리됐는데, 분명쉬운건데 왜이리 지치는지(드래그 앤 드랍 제외)
보통의 컨디션이였으면 더 잘했을텐데 신경쓰는 일이 많았고 지치는 일이 많았다. 모달도 많이 구현해봤고 그랬는데..
남의 코드의 로직을 잘 이해하지 못한 상태에서 이어간다는게 정말 보통일이 아니구만
정말 나를 힘들게 했던
드래그앤 드랍!!! 제대로 구현하지 못했지만, 조금 더 생각해볼 예정이다...
새로 알게된 점.
1.드래그를 하고픈 요소에 draggable이라는 속성을 추가하면 드래그가 된다.
2. 드래그 이벤트가 존재한다. pointerdown 이런거 안써도 된다..
3.드랍하고픈 위치에서의 closest를 사용하면 안된다.
- 클릭 위치가 li가 아니고section일때는 에러가 발생한다
- 그래서 null값이 떠서 문제가 생길 수 있다.
-영역에 따라 넘겨주는게 더 나아보인다.
4. dataTransfer의 존재
https://developer.mozilla.org/ko/docs/Web/API/DataTransfer
DataTransfer - Web API | MDN
The DataTransfer object is used to hold the data that is being dragged during a drag and drop operation. It may hold one or more data items, each of one or more data types. For more information about drag and drop, see HTML Drag and Drop API.
developer.mozilla.org
드래그앤 드랍동안 데이터를 hold해줄수 있는 web api다. setData로 데이터를 저장해놨다가 getData해서 꺼내쓸 수 있다.
하지만 내코드가 선택받지 못했기 때문에 뽐낼수가없었다(???)
다른분이 작성한 코드에서 section부분을 drop할 위치로 지정해놔서 계속 오류가 발생했는데, closest로 하면 안되겠다 싶었다^^....그리고 정확도를 높이기 위해서는
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
Element.getBoundingClientRect() - Web APIs | MDN
The Element.getBoundingClientRect() method returns a DOMRect object providing information about the size of an element and its position relative to the viewport.
developer.mozilla.org
이걸 사용해서 영역의 정확한 위치를 확인해서 하는게 더 낫지 않나싶다...
횡단 관심사 부분 다시 해보기
https://codesandbox.io/s/hidden-shape-pcf1lt?file=/App.js
hidden-shape-pcf1lt - CodeSandbox
hidden-shape-pcf1lt by sweesweett using react, react-dom, react-scripts, react-tabs
codesandbox.io
