D'story

오늘 한 일

• 지금은 아니고 예전에, 동영상과 문서 파일을 업로드하는 기능을 한창 작업하고 있을 때였다. 파일을 올리면 화면에 첨부한 파일 리스트가 생성되고 그 리스트에서 파일을 지울 수가 있었는데, 파일 A를 올렸다가 지우고 다시 같은 파일을 올리려고 하면 먹통이 되곤 했다.
• 사용자가 어쩌다 파일 하나를 올리고 실수로 지워버려서 다시 올리려고 한다면? 파일 A가 재차 첨부되지 않으므로, 임의로 파일 B를 첨부했다가 그 뒤에 파일 A를 첨부하고, 애초에 필요가 없는 파일 B를 다시 지워야 한다. 수고롭다...
• onChange 이벤트를 통해 첨부된 파일을 감지하는데, 말 그대로 onChange이기 때문에 기존 상태와 다른 데이터가 들어가야지만 이벤트가 실행된다. 파일 A가 들어갔는데, 다시 똑같은 파일 A가 들어간다면 변화가 없으므로 아무런 일도 일어나지 않는다.

오늘 배운 것

• onChange가 실행될 때마다 event.target.value에 빈 값을 주면 다음 순서로 똑같은 파일이 들어와도 변화를 감지할 수 있게 된다.

오늘 한 일

• 으으 예정보다 늦어지는 것 같은데 아무튼 지난 주부터 붙잡고 있던 페이지를 아직 차마 놓아주지 못하고 마무리 작업에 돌입했다. 물론 지금 단계에서야 마무리라고 해도 새로운 기획이 나오면 재시작이지만.
• 이 페이지를 처음 작업하기 시작했을 때, type 속성이 file인 input을 만들 때 일단 그 못생긴 브라우저 기본 버튼을 숨겨놓고 다른 element를 클릭하면 파일 창이 나오게 했다. 거기서 조금 더 욕심을 냈던 게 라이브러리 없이 drag&drop 기능을 넣는 거였는데, 잘 안 됐었다. 원하는 위치로 파일을 드래그하기만 하면 콘솔창이 온통 새빨개지기 일쑤였다. 그땐 뭐가 문젠지 몰랐었다. 사실 지금도 모른다.
• 아무튼 그때 알 수 없는 원인으로 실패해버리고 만 그 작업을 오늘 다시 시도해보았다. 지난번과 같은 레퍼런스를 참고하면 또 같은 일이 일어날 것이었으므로 아예 검색부터 새로 하기로 했다. 그리고 참고한 갓MDN 덕분에 드디어 성공했다.
• 생각해 보면 이 작업을 처음 시도했을 때는 input을 클릭해서 파일을 넣어서 aws s3로 보내는 기능조차 완성되어 있지 않은 상태였다. 만약 drag&drop이 성공했다 하더라도 input을 클릭해서 파일을 첨부하는 것과 input에 drag&drop 해서 첨부하는 것, 이 두 갈래길을 처음부터 만들어놓고 파일을 가공해야 했을 것이다. 하지만 지금은 이미 클릭으로 파일을 첨부하면 어떻게 처리할지를 모두 정하고, 단순히 파일을 첨부하는 방식만 한 가지 더 추가하는 것이므로 어쨌든 지금이 훨씬 더 나은 방법인 것 같다.

오늘 배운 것

• 갓MDN의 File drag and drop 링크.

• 여기서 나는 dataTransfer를 사용하는 과정에서, 분명히 파일을 첨부했는데도 dataTransfer.files의 length가 0이 나오는 문제를 겪었다. 그건 아래 링크를 참고하고 해결했다. 갓스택오버플로우