Day29
To do list Drag & Drop
(1)
- 기본적으로 완료된 일과 완료되지 않은 일 목록을 불러오는 기능
- Drag&Drop
- Drag를 시작했을 때 dataTransfer에 정의된 요소를 꺼내와서 어떤 요소가 drag됐는지를 판단해서 쓴다.
- dragstart event는 drag가 시작됐을 때 해당 요소를 가져온다.
- drag할 요소와 drop할 요소를 정의한다.
- Drag했을 때 어떤 요소가 Drag 되어지고 있는지 확인
(2)
- 드롭 지역 정의하기
- 기본적으로 브라우저는 HTML 요소에 뭔가를 드롭했을 때 해당 요소에서 어떠한 이벤트(
dragover, drop)도 일어나지 않도록 해야한다(event.preventDefault()). 특정 요소을 droppable로 만들기 위해서는 ondragover와 ondrop 이벤트에 대한 핸들러 정의해야 한다.
- drop 했을 때 실제로 목록이 update되고 update된 목록이 화면에 보여지는 기능
- 낙관적 업데이트 추가
(3)
- API호출이 많을 때는 API 호출이 일어난 순차적으로 실제 호출이 일어나게끔 큐나 아니면 제일 나중에 실행된게 먼저 일어나게끔 스택을 이용하여 처리할 수 있다.
- 큐를 이용하여 바뀐 todo 목록들을 api를 통하여 변경하는 기능을 버튼으로 처리할 수 있도록 한다.
window.requestIdleCallback() : ui가 바쁘지 않을 때 콜백 함수를 실행하는 함수- 버튼을 이용하여 작업들을 삭제하는 기능
- 옮겼는데 해당 작업을 삭제했다면 옮기는 작업을 빼고 삭제하는 작업만 큐에 남기는 기능
- API 호출을 여러번 해야될 때 호출을 최소화하면서 기능은 그대로 유지하는 최적화를 많이 생각해야 된다.
(4) 마무리
- 다른 라이브러리 없이 JavaScript만으로 웹앱 만들기 훈련
- 실제 업무에서 이런 환경을 만나기는 드물지만, Vanilla JS만으로도 할 수 있다
- 다른 라이브러리나 프레임워크가 어떻게 동작할 지 이해하는데 도움을 준다.
- 화면을 독립적으로 동작하는 컴포넌트에 대해 생각하고 만다는 것에 대한 훈련
- 화면을 선언적으로 생각하여 확장가능하고 버그를 덜 만드는 UI 프로그래밍에 대해 익혀봤다.
- 상태, 데이터 중심으로 UI를 표현하고 이를 통해 화면의 변화를 생각하고 추적하는 것