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라고도 하는 것의 색깔...'이라고 되어 있다.

오늘 한 일

• 엊그제 만들어놓은 이벤트리스너가 겉보기엔 문제 없이 잘 동작하는데, 영상 몇 개가 재생되고 난 후 콘솔에 찍히는 로그를 보면 기함하게 된다. 동일한 단 하나의 타겟에 붙인 이벤트리스너가 여러 번 실행되면서 콜백함수에 넣어둔 console.log()가 거듭제곱으로 늘어난다. 소오름
• 영양가 있는 해결책을 찾았지만 사실 근본적인 문제는 내가 짠 코드의 구조에 있었던 것 같다. 처음에는 once: true 옵션 덕에 해결됐다고 생각했으나, 그와 동시에 함수의 전체적인 구조를 바꾸고 나니 해당 옵션을 제거하고도 같은 개선된 결과가 나왔다.
• 하지만 개선이라고 해봤자 거듭제곱은 아니더라도 영상 재생 1회당 이벤트리스너가 두 번 실행되는 정도.. 물론 거듭제곱보다야 낫다. 이건 좀 더 공부해봐야 할 것 같다.

오늘 배운 것

• addEventListener(type, function, {once: true})를 나에게 알려주신 링크님

• MDN의 addEventListener()에 대한 설명. 근데 나 이거 분명 꽤 들여다봤는데, 그래서 options의 capture와 passive도 분명 봤는데, 그 둘 사이에 있던 once를 못 봤다고!? 진짜로!?ㅠㅠ

once
A boolean value indicating that the listener should be invoked at most once after being added. If true, the
listener would be automatically removed when invoked.

오늘 한 일

• 타입스크립트 공부는 못했다ㅠㅠ
• 웹페이지 메인에 동영상 띄우는 것과 관련해서 체크하고 넘어가야 할 것들이 꽤 있어서 하루종일 거기에만 시간을 쏟았다. 의외로 허무한 데서 해결되어 버린 게 있어서 시간을 투자한 만큼의 성과가 있었는지는 미지수다.
• 자동재생으로 띄워놓은 영상이 종료되면 그 다음 영상 목록들을 뒤져서 재생 우선순위에 맞는 것을 찾아야 한다. video 태그에 id를 주고, 그걸 getElementById로 가져와서 변수에 할당한 다음, 거기에 addEventListener('ended', function) 형식으로 함수를 붙인다. 그러면 영상이 종료되는 'ended' 타입의 이벤트를 감지할 수 있다.

오늘 배운 것

• ISO 8601 형식으로 나타내는 표준시는 아무런 처리를 하지 않는다면 국제표준시 기준으로 나온다. 당연한 건데 이걸 생각 못해서 삽질이 길어졌다...

오늘 한 일

• 어제 기껏 useRef 어쩌고 하며 TIL을 써놓은 게 무색하게, 오늘은 useRef를 적용한 모든 코드를 이벤트 핸들링으로 변경했다. 각 항목에 대한 입력을 마칠 때마다 그 값을 state에 저장하고 싶었기 때문이다. 어차피 서버에 넘길 때 또 가공해야 할 테니 객체에 key-value로 저장하는 게 나을 것 같았다. 이번에는 지금껏 자주 쓰던 onClick, onChange가 아닌, onBlur를 써 봤다. onBlur는 focus를 가졌다가 잃었을 때 작동하는 이벤트 핸들러다. (focus가 있었는데 없었습니다!?)
• 이벤트 핸들링 얘기가 나와서 말인데, 오전 내내 특정 div에 외부 파일을 드래그하면 div의 모양새(?)가 바뀌게 하는 작업에 매달려 있었다. 그때는 onDragOver를 썼었다. 근데 이게 DB에 있는 항목들을 배열로 받아 input에 넣어 나열하는 상황 때문인지, 파일이 드래그 오버되는 그 div에만 변화를 주는 게 쉽지 않았다. 어쩌면 그냥 내 머리가 안 돌아간 걸 수도 있고.

오늘 배운 것

• 지금 TIL 작성하면서 찾은 링크인데 진작 이게 있었어야 했다... onDragOver를 찾아 헤맨 과거의 나를 위해 첨부.