Section5 - Summary

강의보면서 새로 알게된 것 정리 및 리마인더 입니당.

 

Chat 내역을들 날짜별로 그룹핑

채팅메세지 별로 날짜에 따라 분류해서 객체에 인덱싱하는 유틸함수로 사용해서 데이터를 가공해주고, 맵핑해서 그룹핑이 쉽게끔 만들었습니다. 

 

그리고 'sticky'라는 position 속성을 사용해서 같은 날짜안에 채팅내역들이 헷갈리지 않도록 했다고 합니다.  기존에 한번도 안써본 속성이였는데, 이번 기회에 직접 적용시켜보니 와닿네요 하하; 

https://developer.mozilla.org/ko/docs/Web/CSS/position

position - CSS: Cascading Style Sheets | MDN

---

리버스 인피니트 스크롤

https://swr.vercel.app/ko/docs/pagination#useswrinfinite

페이지네이션 – SWR

 

일단 부모 컴포넌트에서, SWRInfinite 훅과 Ref, 그리고 setSize와 같은 page를 증감시켜주기 위한 함수, 변수들을 다 넘겨줍니다. 

자식 컴포넌트에서는 forwardRef를 통해서 ref를 전달 받는데, 이때 props를 받는 방식이 정해져있습니다.  forwardRef<Type>({...props}, ref) 이런식으로 받아야하는 것을 처음알았습니다. forwardRef또한 사용해본적이 많이 없기에... 그리고 부모컴포넌트에서 먼저 선언해 놓은, isReachingEnd와 Scrollbar 라이브러리에서 제공해주는 프로퍼티를 통해서 더 불러올지를 조건 걸어놓고 그에 따라서 페이지를 증감해주고, 현재 위치를 고정시켜주기위해서 if(current) 밑에 코드를 더해주셨다고 하네요.

 

---

DnD 이미지 업로드 

 일단 기본적으로 Drag 관련된 이벤트는 기본적으로 WebAPI에서 지원하는 이벤트이다.

이건 나도 처음알아서 신선했다. 써본적도 없고. 

https://developer.mozilla.org/ko/docs/Web/API/HTMLElement/drag_event

Document: drag 이벤트 - Web API | MDN

 

onDragOver는 드래그해서 마우스를 올려놓는 동안 계속해서 이벤트가 발생하게 되는데, 이런식으로 상태만 true로 바꿔주고 드래그 중일때 내가 지금 드래그해서 올려놓고 있다는 표시의 컴포넌트를 마운트 시킬수 있다. 

onDrop할때는 어떤 이벤트가 일어나는지 코드를 보자

위에 onDrop에 대한 코드를 보자면 일단 FormData 생성자를 통해 객체를 만들고, 분기처리를 해주게 되는데. 위처럼 분기처리를 한 이유는 제로초님이 드래그 엔 드롭 API 관련해서 정리한 글에서 잘 설명해주셔서 이해가 쉬웠습니다. 여기서 읽어보면 구형 브라우저는 files 객체가 작동하지 않기때문에 어쩔수 없이 items 객체를 사용해줘야하기 때문에 이런식으로 된 것이고 그리고 여러개 파일을 한번에 드롭하면 모두 받아지는데 그것을 위해서 for문을 통해 List를 Item으로 나눠준다고 합니다. 

https://www.zerocho.com/category/HTML&DOM/post/5942c4ed858a010018a8c32f

https://www.zerocho.com/category/HTML&DOM/post/5942c4ed858a010018a8c32f

그러고 나서 해당 formData 객체를 body에 담아서 Post를 통해 서버로 파일데이터를 보내고 난 후 mutate로 revalidate 작업을 수행해줍니다. 

 

---