🔔 20일차
오늘은 내가 맡은 채팅 부분에서 추가적으로 에러가 있는지 검토를 해보는 시간을 가졌다. 그 후 이미지를 drag & drop을 통해 업로드 하는 기능을 추가하였다!
자바스크립트 API인 onDrop, onDragOver 등등 기능을 활용하여 구현하였다.
이미 이미지 업로드 기능을 구현해보았기 때문에, 여기서 추가적으로 드래깅 기능만 추가하면 되는 문제였다!!
💪 오늘은 어떻게 프로젝트에 기여했나요?
이런식으로 드래그를 통해서도 이미지를 업로드할 수 있도록 구현하였다!! 👏👏👏
아주 만족스럽다!! 스스로 mdn에서 기능을 찾아보고 구현해보았다!!
🤔 오늘의 프로젝트에서 힘든 점은 무엇인가요?
드래깅을 통해서 업로드하는 것은 그리 어렵지 않았다. 하지만 테스트를 하는 과정에서 한 가지 에러를 발견했었다. 바로 드래깅을 하다가 드래깅을 취소했을 경우이다.
바로 이런 경우이다!!! ㅜㅜㅜ
처음에는 onDragEnd(드래그 요소의 드래깅이 완료될 때 발생)을 이용해서 해결을 하려고 했다.
하지만 계속 드래깅이 끝난 시점에도 setState가 작동하지 않았고, console도 먹히지가 않았다. 화면 안에서는 이 이벤트가 실행되지만 화면 밖에서 드래깅을 끝내면 이 이벤트가 실행되지 않는 듯 하였다.
그래서 onDragLeave라는 이벤트를 찾았고, 적용시켜주었다.
// 타입스크립트 생략
const onDragLeave = useCallback((e) => {
e.preventDefault();
if (e.clientX === 0 && e.clientY === 0) {
setDragOver(false);
}
}, []);
이런식으로 드래그 요소가 화면 밖을 벗어났을 경우 setState 요청을 하였고, 다시 drop 영역안으로 들어왔을 경우는 미리 작성해 놓은 onDragOver 이벤트로 인해 이벤트가 다시 실행 되도록 해주었다.
이렇게 하니 바로 해결이 되었다!!! 후후후!!
🔥 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?
인피니티 스크롤 마무리, 채팅 마지막 점검, 프로필 모달 오류 해결