📚 공부한 내용
1. Drag & Drop 이벤트
drag와 drop이 되는 간단한 웹 어플리케이션 실습을 진행했다.
1-1.draggable, droppable
기본적으로 html element는 drag를 할 수 없다. 이를 위해서 draggable="true" 옵션을 드래그 하고싶은 element에 적용해야한다.
위에서 볼 수 있듯 draggable 설정에 따라 상호작용이 다르게 적용된다. drop의 경우도 마찬가지다. MDN문서의 drop event를 살펴보면 아래와 같이 적혀있다.
drop
This event is fired when an element or text selection is dropped on a valid drop target.
위에서 말하는 valid drop target이 바로 droppable="true"인 element를 말하는 것으로 drop event를 사용하기 위해서 droppable attribute의 설정이 필요하다.
1-2. dataTransfer
drag event가 동작할 때, 관련 정보를 dataTransfer라는 객체에 저장해서 전달한다. 수업에서는 dataTransfer에 setData()와 getData()로 필요한 정보를 이벤트간에 전달하는 방식으로 사용했다. 데이터의 저장 방식은 로컬 스토리지와 동일한 방식으로 string type의 key와 value를 이용한다. 따라서 Object, Array등의 값을 저장하고 읽어온 값을 사용할 때 JSON.stringify와 JSON.parse를 이용하자. 이 외에도 DataTransfer.dropEffect를 사용해서 드래그 시에 커서의 모양을 바꾸는 예시를 실습했다.
1-3. dragstart - dragover - drop
실습에서는 dragstart event에서 지금 drag된 target의 정보를 저장하고, dragover event 동안 DataTransfer.dropEffect로 커서의 모양을 설정하며, drop event에서 저장된 정보로 처리했다. 그리고 dragover와 drop에서 preventDefault()로 기본 동작을 막아줘야 정상 동작했다.
2. Task Queue
2-1. 서론
실습에서 만든 웹 어플리케이션은 사용자의 상호작용에 의해서 값이 변경되면 변경된 값을 서버에 보내 동기화하고 다시 서버로부터 값을 받아와 화면을 다시 랜더링했다. 하지만 네트워크가 느릴 경우 사용자의 상호작용이 명확하지 않았다. 이를 해결하기 위해서 앞서 배운 낙관적 업데이트를 적용했지만 서버에서 받아온 값들이 밀리면서 랜더링이 부자연스러운 경우가 발생한다. 이 경우 적용할 수 있는 방법이 Task Queue다.
2-2. Task Queue
Task Queue에 일정 시간동안 API 동작 정보를 저장해 놓은 뒤 한꺼번에 처리하는 방식이다. 이 방식을 사용하면 사용자가 데이터의 수정을 취소한 경우 두 번의 API통신을 생략하는 등 여러 이점이 있을 수 있다.
📝 더 공부할 것
- web worker
- window.requestIdleCallback()
🤔 느낀점
노션 클로닝 주간동안 TIL에 소홀해 졌더니 관성이 엄청났다...
조금 더 의지가 필요하다.
Reference
- 프로그래머스 프론트엔드 데브코스
