TIL 22-04-27

blacktoastΒ·2022λ…„ 4μ›” 27일
0

λ°λΈŒμ½”μŠ€-TIL

λͺ©λ‘ 보기
6/8

πŸ‘πŸ» μ–΄μ œλ³΄λ‹€ μ„±μž₯ν•œκ²ƒ (FeedBack)

drag이벀트λ₯Ό μ•Œκ²Œλœκ²ƒ
λ„€νŠΈμ›Œν¬ 톡신,μ›Ήμ›Œμ»€ λ“± 톡신할 λ•Œ μ΅œμ ν™”λ₯Ό κ³ λ―Όν•΄ 본것

🎈였늘 배운점 (Fact)

λ„€νŠΈμ›Œν¬ 톡신

requestIdleCallback
λΈŒλΌμš°μ €κ°€ idle μƒνƒœ 일 λ•Œ ν˜ΈμΆœν•  ν•¨μˆ˜λ₯Ό λŒ€κΈ°μ—΄μ— 넣을 수 μžˆλŠ” λ§€μ„œλ“œ
즉 uiλ‚˜ μ€‘μš”ν•œ μ• λ‹ˆλ©”μ΄μ…˜ μž‘μ—…μ΄ λλ‚œ 이후 진행 ν•  ν•¨μˆ˜λ“€μ„ 보톡 λ„£λŠ”λ‹€
낙관적 uiλ₯Ό 그리고 이후 λ„€νŠΈμ›Œν¬ 톡신을 ν•œλ‹€λ©΄ λ‚˜μ˜μ§€ μ•Šμ„ λ©”μ„œλ“œμ΄λ‹€

단 can i useμ—μ„œ 보면 지원이 μ•ˆλ˜λŠ” λΈŒλΌμš°μ €κ°€ μ‚¬νŒŒλ¦¬κ°€ μžˆλŠ”λ° 폴리필이 μžˆμ–΄μ„œ λ‚˜μ˜μ§€ μ•Šμ€λ“― ν•˜λ‹€

idle μƒνƒœλž€ ν•΄λ‹Ή μžμ›μ΄ μ–΄λ– ν•œ ν”„λ‘œκ·Έλž¨μ— μ˜ν•΄μ„œ μ‚¬μš©λ˜μ§€ μ•Šμ„ λ•Œλ₯Ό λœ»ν•œλ‹€

늘 μ„œλ²„λž‘ 톡신할지 μ•„λ‹ˆλ©΄ 일정 μ‹œμ μ— μ„œλ²„μ™€ 동기화 할지 방법은 μ—¬λŸ¬ 가지닀
λ„€νŠΈμ›Œν¬ 톡신은 μ›Ήμ›Œμ»€μ— 돌릴 μˆ˜λ„ μžˆλ‹€.

drag and drop

Mdn λ¬Έμ„œ drag and drop

κ°•μ˜ λ‚΄μš©μ€ 트렐둜 처럼 μœ„μΉ˜λ₯Ό λ°”κΎΈλŠ”κ²ƒ λ³΄λ‹€λŠ”
μ›ν•˜λŠ” μœ„μΉ˜λ‘œ ν•΄λ‹Ή νƒœκ·Έλ₯Ό λ³΄λ‚΄λŠ” κΈ°λŠ₯을 κ΅¬ν˜„ν–ˆμ§€λ§Œ ν™œμš©μ„±μ΄ 무ꢁ무진 ν•˜λ‹€

λ§Žμ€ μ˜΅μ…˜λ“€μ΄ μžˆμ§€λ§Œ

크게
drag λ“œλž˜κ·Έλ₯Ό ν•˜κ³ μžˆμœΌλ©΄ λ°œμƒν•˜λŠ” 이벀트
dragover 이것도 λΉ„μŠ·ν•˜μ§€λ§Œ λ“œλ‘­λŒ€μƒμœ„λ₯Ό μ§€λ‚˜ κ°ˆλ•Œ λ°œμƒν•˜λŠ” 이벀트
dragstart dragλ₯Ό μ‹œμž‘ν• λ•Œ λ°œμƒν•˜λŠ” 이벀트
drop droppableν•œ ꡬ역에 dropν–ˆμ„λ•Œ λ°œμƒν•˜λŠ” μ΄λ²€νŠΈμ΄λ‹€

dropstart ν–ˆμ„ λ•Œμ˜ μ›ν•˜λŠ” 값듀을
event.dataTransfer 객체의 각쒅 λ§€μ„œλ“œλ“€λ‘œ λ³΄λ‚Όμˆ˜λ„ μžˆλ‹€
setDataλ“±.

그리고 event.clientX κ°™μ€κ±Έλ‘œ λ“œλž˜κ·Έ μ΄λ²€νŠΈκ°€ λ°œμƒν•œ μ’Œν‘œκ°’μ„ 얻은후
document.elementFromPoint λ₯Ό ν†΅ν•΄μ„œ ν•΄λ‹Ή ν¬μΈνŠΈκ°€ μžˆλŠ” element값도 κ°€μ Έμ˜¬μˆ˜ μžˆμ–΄μ„œ
λ‹€μ–‘ν•œ 곳에 ν™œμš© ν•  수 μžˆκ² λ‹€

πŸ€” 생각이 λ“œλŠ”κ²ƒ (Feeling)

etc

webApi λ¬Έμ„œ, 곡식 λ¬Έμ„œλ₯Ό 잘 읽고 μ •λ¦¬ν•˜λŠ” λŠ₯λ ₯은 정말 큰 λŠ₯λ ₯μΈλ“―ν•˜λ‹€
κ³΅μ‹λ¬Έμ„œλ₯Ό 늘 λ¨Όμ € 읽자,

πŸ“‚μ„œμΉ­ν•œ 자료

https://developer.mozilla.org/ko/docs/Web/API/Window/requestIdleCallback
https://developer.mozilla.org/ko/docs/Web/API/HTML_Drag_and_Drop_API

0개의 λŒ“κΈ€