D'story

오늘 한 일

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

오늘 배운 것

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

오늘 한 일

• 현재 회사의 웹과 앱에 적용된 기능의 범위에 약간 차이가 있어서, 오늘은 그 차이의 간극을 메우는 작업을 했다. 앱에는 이미 있는 기능이지만 웹에서는 아직 구현하지 않은, 예를 들면 댓글 관련 기능 같은 것들을 붙여 보았다.
• 앱에서 돌아가게 하느라 api는 이미 완성되어 있는 상황이라 나는 말 그대로 거기에 맞춰 구현하기만 하면 되는 거였다. (+ 디자인)
• 기획안과 디자인에 따르면, 댓글을 작성할 수 있는 페이지에 처음 진입하면 댓글 입력란만 보이고 등록 버튼은 보이지 않는데 입력란을 클릭해서 커서를 띄우는 순간 한쪽에 등록 버튼이 생긴다. 다시 외부 요소를 클릭해 커서를 없애면 등록 버튼도 없어져 원래의 레이아웃으로 돌아간다.

오늘 배운 것

• 해당 input 태그에 포커스가 맞춰져 있을 때 실행하는 함수는 onfocus 이벤트로 넣어준다. html이나 자바스크립트에서는 onfocus로 쓰지만, 리액트에서는 camel case로 onFocus라고 쓴다.

• onblur는 워낙 자주 썼는데도, onfocus의 반대의 경우를 생각하려고 하니 오히려 생각이 잘 안 났다. 그러다 위 링크 Definition and Usage 부분 3번째 줄에 적혀 있는 걸 보고서야 아차 싶었다. onfocus의 반대의 경우, 그러니까 포커스를 잃었을 때의 이벤트는 onblur로 넣는다. 리액트에서는 역시 onBlur.

The onfocus event is the opposite of the onblur event.

• input 태그에 들어가는 커서를 cursor라고 하는 게 맞는지, CSS에서 쓰는 것처럼 caret이라고 하는 게 맞는지 확인해보려다 찾은 내용이다. caret-color는 그 커서의 색깔을 지정하는 CSS 속성인데, 아래 링크에 따르면 'insertion caret 또는 text input cursor라고도 하는 것의 색깔...'이라고 되어 있다.

오늘 한 일

• 으으 예정보다 늦어지는 것 같은데 아무튼 지난 주부터 붙잡고 있던 페이지를 아직 차마 놓아주지 못하고 마무리 작업에 돌입했다. 물론 지금 단계에서야 마무리라고 해도 새로운 기획이 나오면 재시작이지만.
• 이 페이지를 처음 작업하기 시작했을 때, 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이 나오는 문제를 겪었다. 그건 아래 링크를 참고하고 해결했다. 갓스택오버플로우

오늘 한 일

• 아직 API도 붙이지 않은(그냥 내가 알아서 원래 있는 API 적당히 갖다 붙여놓고 시험 중인) 페이지만 계속 만지작거렸다. 오늘 안에 끝나지 않을까 싶어서 아침 스크럼 때 그렇게 말했는데 웬걸, 하루 웬종일 시간 다 잡아먹고 결국은 오늘을 넘기게 되었다. 언제나 그랬듯이...
• 게시판과 같은 종류의 페이지를 만드는 건 여러 프로젝트를 거치며 쉽게 할 수 있다고 생각했는데, 지금껏 해 온 것과는 조금 다른 형태를 다루게 되니 마냥 새롭기만 하다. 회사 일이다 보니 조금 더 신중히 작업하게 되는 것도 같다.
• DB에 저장된 항목들이 input(text, file)이나 select로 알아서 나열되어야 한다. 당연하게도, DB에 저장된 그 항목들은 언제든지 개수가 늘어날 수도, 줄어들 수도, 내용이 바뀔 수도 있다. 그러다 보니 input과 select가 어떤 순서로 몇 개가 나열될지는 알 수 없다. 그런 상황에서 useRef로 해당 태그의 값들을 가져오고 싶은데, 일일이 선언하자니 말도 안되는 짓인 것 같았다. 만약 input 태그가 극단적으로 많아져서 100개라면!? 1억개라면!? (생활코딩?ㅋㅋㅋ)

오늘 배운 것

• 그래서 찾아온, useRef의 초깃값을 애초에 배열로 줘버리고 배열로 관리하기 링크.