TIL - Day 28

프로그래머스 데브코스

프로그래머스 데브코스 프론트엔드 3기

✓ TIL DAY - 28

---

🗓 오늘은...

Drag Event

간단한 drag & drop 기능을 활용한 프로젝트를 진행했고 다양한 이벤트들이 있다는 것은 알고 있었지만 사용해본 적 없는 drag 이벤트를 활용법을 배우게 되어 간략하게 정리하려고 한다.

이번 강의에서 학습한 내용은 어떠한 요소를 drag & drop하여 해당 객체로 이동하는 간단한 프로젝트로 3가지 단계를 거쳤다.

1. dragstart
   • 목표로하는 요소를 드래그를 시작하면 실행되는 이벤트
   • 해당 부분에서 e.datatransfer.setData를 이용하여 값을 저장한다. 
2. dragover
   • 드롭이 가능한 부분에 올라갔을 때 실행
   • e.preventDefault()를 통해 drag를 허용해야 한다.
   • e.datatransfer.setData = "move"로 해당 요소를 이동시킨다.
3. drop
   • 드롭이 가능한 부분에 드롭하였을 때 실행
   • e.preventDefault()를 통해 drop를 허용해야 한다.
   • getData를 이용해 데이터를 이동시키는 로직을 작성한다.

컴포넌트 방식을 사용하여 state를 변경하고 이를 낙관적 업데이트하였다.

 

서버와 네트워킹(fetch)을 줄이는 시도

노션 프로젝트를 진행하며 이 부분에 대해 많이 생각을 하였고 실행해보았지만 역시 강의를 통해 학습해보니 더 나은 방법을 배우게 되었다. 이 부분을 통해 새롭게 알게 된 web workers API, requestIdleCallback에 대해서도 조금 더 찾아보려고 한다. 이번 경우에는 따로 버튼을 만들어 그 버튼을 누르기 전까지는 fetch와 같은 서버와 네트워킹해야 하는 작업들을 queue에 넣고 버튼을 누르면 하나씩 빼면서 저장되는 기능을 만들었고 fetch 요청을 해놨던 요소가 삭제되면 이전 요청들을 queue에서 빼는 기능까지 학습하였다.

 

마지막 vanilla JS 강의

오늘을 마지막으로 로토 님의강의는 마지막이라는 이야기를 들었고 마지막 강의에서도 지금까지 공부해온 방식에 대해 조금 더 설명해주셨다. 강의를 들어가며 해당 내용을 간략하게 설명해주셨는데 그때는 이해가 가지 않았지만 지금은 해당 의견들에 동감한다. 다양한 프로젝트를 직접 코드를 작성해주시며 설명해주셔서 많은 점을 배울 수 있었고 로토님의 컨벤션도 어느 정도 흡수한 느낌이 들었다.😁 앞으로도 더 많이 공부해야겠지만 이번 강의를 통해 얻은 것들은 아래와 같다.

• vanilla JS로 할 수 있는 것들
• 라이브러리나 프레임워크 동작 원리 이해
• 유지보수가 쉽고 재사용이 용이한 독립적인 컴포넌트에 대해

새롭게 배운 것

• 웹에서 drag & drop 기능을 구현하는 방법
• web workers API, requestIdleCallback
• 204 status code (preflight)
• intl 사용법 

오늘 깨달은 점

• 서버 네트워킹(fetch)을 줄이는 방법
• preflight request

참고했던 자료

drag & drop을 활용한 다양한 예제

[JS] 📚 드래그 앤 드롭(Drag and Drop) 기능 이해 & 구현하기

Status 204

204 No Content - HTTP | MDN

Web_Workers_API

Web Workers API - Web APIs | MDN

requestIdleCallback

window.requestIdleCallback() - Web API | MDN