D'story

오늘 한 일

• 현재 회사의 웹과 앱에 적용된 기능의 범위에 약간 차이가 있어서, 오늘은 그 차이의 간극을 메우는 작업을 했다. 앱에는 이미 있는 기능이지만 웹에서는 아직 구현하지 않은, 예를 들면 댓글 관련 기능 같은 것들을 붙여 보았다.
• 앱에서 돌아가게 하느라 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라고도 하는 것의 색깔...'이라고 되어 있다.

오늘 한 일

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

오늘 배운 것

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