TIL 22-04-27

윤·2022년 4월 27일

데브코스-TIL

목록 보기

6/8

drag이벤트를 알게된것
네트워크 통신,웹워커 등 통신할 때 최적화를 고민해 본것

requestIdleCallback
브라우저가 idle 상태 일 때 호출할 함수를 대기열에 넣을 수 있는 매서드
즉 ui나 중요한 애니메이션 작업이 끝난 이후 진행 할 함수들을 보통 넣는다
낙관적 ui를 그리고 이후 네트워크 통신을 한다면 나쁘지 않을 메서드이다

단 can i use에서 보면 지원이 안되는 브라우저가 사파리가 있는데 폴리필이 있어서 나쁘지 않은듯 하다

idle 상태란 해당 자원이 어떠한 프로그램에 의해서 사용되지 않을 때를 뜻한다

늘 서버랑 통신할지 아니면 일정 시점에 서버와 동기화 할지 방법은 여러 가지다
네트워크 통신은 웹워커에 돌릴 수도 있다.

강의 내용은 트렐로 처럼 위치를 바꾸는것 보다는
원하는 위치로 해당 태그를 보내는 기능을 구현했지만 활용성이 무궁무진 하다

많은 옵션들이 있지만

크게
drag 드래그를 하고있으면 발생하는 이벤트
dragover 이것도 비슷하지만 드롭대상위를 지나 갈때 발생하는 이벤트
dragstart drag를 시작할때 발생하는 이벤트
drop droppable한 구역에 drop했을때 발생하는 이벤트이다

dropstart 했을 때의 원하는 값들을
event.dataTransfer 객체의 각종 매서드들로 보낼수도 있다
setData등.

그리고 event.clientX 같은걸로 드래그 이벤트가 발생한 좌표값을 얻은후
document.elementFromPoint 를 통해서 해당 포인트가 있는 element값도 가져올수 있어서
다양한 곳에 활용 할 수 있겠다

webApi 문서, 공식 문서를 잘 읽고 정리하는 능력은 정말 큰 능력인듯하다
공식문서를 늘 먼저 읽자,