React-dnd: ๋นˆ targetId๋กœ isOver ์ถฉ๋Œ

์— ๋งŒ๋“  2019๋…„ 03์›” 07์ผ  ยท  7์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: react-dnd/react-dnd

๋ฒ„๊ทธ ์„ค๋ช…
DOM์— ๋ฌด์–ธ๊ฐ€๋ฅผ ๋†“์œผ๋ฉด DOM์—์„œ ์ œ๊ฑฐ๋˜๋Š” ์—ฐ๊ฒฐ๋œ ๋†“๊ธฐ ๋Œ€์ƒ์ด ์žˆ์Šต๋‹ˆ๋‹ค.

์ด์ œ v7.1.0 ์—…๊ทธ๋ ˆ์ด๋“œํ•œ ์ดํ›„๋กœ

Uncaught TypeError: Cannot read property '0' of undefined

collect ํ•จ์ˆ˜ ๋‚ด๋ถ€์˜ monitor.isOver() ํ˜ธ์ถœ์—์„œ.
์–ด์จŒ๋“ , ๊ทธ๊ฒƒ์€ ๋†“๊ธฐ ๋Œ€์ƒ์ด ์ œ๊ฑฐ๋œ ํ›„์—๋„ ์ˆ˜์ง‘ ํ•จ์ˆ˜๊ฐ€ ํ•œ ๋ฒˆ ๋” ํ˜ธ์ถœ๋˜๋Š” ๊ฒƒ์„ ๋ด…๋‹ˆ๋‹ค( targetId ๋Š” ์ •์˜๋˜์ง€ ์•Š์Œ).

ํฅ๋ฏธ๋กœ์šด

  • 6.0.0 ๋‹ค์‹œ ๋‹ค์šด๊ทธ๋ ˆ์ด๋“œํ•˜๋ฉด ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.
  • ๋˜ํ•œ ๋†“๊ธฐ ๋Œ€์ƒ์„ ์ œ๊ฑฐํ•œ ์ฝœ๋ฐฑ ์ฃผ์œ„์— ์งง์€ setTimeout ๋ž˜ํผ๋ฅผ ์‚ฌ์šฉํ•˜์—ฌ ๋ฌธ์ œ๋ฅผ ํ•ด๊ฒฐํ–ˆ์Šต๋‹ˆ๋‹ค.

๊ทธ ์›์ธ์ด ๋ฌด์—‡์ธ์ง€ ์•„์„ธ์š”?

์žฌํ˜„ํ•˜๊ธฐ ์œ„ํ•ด
๋™์ž‘์„ ์žฌํ˜„ํ•˜๋Š” ๋‹จ๊ณ„:

  1. ๋“œ๋กญ ๋Œ€์ƒ์„ ์—ฐ๊ฒฐํ•˜๊ณ  monitor.isOver() ์—์„œ collect monitor.isOver() ๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.
  2. ๋Œ€์ƒ์—์„œ ๋†“๊ธฐ ๋Œ€์ƒ์„ ์ œ๊ฑฐํ•˜๋Š” drop(...) ๋‚ด๋ถ€์˜ ์ž‘์—…์„ ์ „๋‹ฌํ•ฉ๋‹ˆ๋‹ค.
  3. ์˜ค๋ฅ˜ ๋ณด๊ธฐ

์˜ˆ์ƒ๋˜๋Š” ํ–‰๋™
isOver ์—๋Š” ํƒ€์ด๋ฐ ๋ฌธ์ œ๊ฐ€ ์—†์œผ๋ฉฐ ๋†“๊ธฐ ๋Œ€์ƒ์„ ์ฆ‰์‹œ ์ œ๊ฑฐํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

์Šคํฌ๋ฆฐ์ƒท
bildschirmfoto 2019-03-07 um 00 58 04

๋ฐ์Šคํฌํƒ‘(๋‹ค์Œ ์ •๋ณด๋ฅผ ์™„๋ฃŒํ•˜์‹ญ์‹œ์˜ค):

  • OS: OS X
  • ๋ธŒ๋ผ์šฐ์ € ํฌ๋กฌ
  • react-dnd / html5 ๋ฐฑ์—”๋“œ 7.1.0

๊ฐ€์žฅ ์œ ์šฉํ•œ ๋Œ“๊ธ€

์ด๊ฒƒ์€ ์˜ค๋Š˜ ๋ฆด๋ฆฌ์Šค์—์„œ cfrank์˜ PR์— ์˜ํ•ด ์ˆ˜์ •๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋ชจ๋“  7 ๋Œ“๊ธ€

๊ฐ™์€ ๋ฌธ์ œ

๋‚˜๋Š”์ด ๋ณ€ํ™” ๋˜ ๋Œ๋ฆฌ๋Š” ๋…ธ๋ ฅ https://github.com/react-dnd/react-dnd/commit/0feb250b7ee90483e31f3bc159ebf946980d53a7#diff -ac418ba19283aec1fb0b70e6570c5613 ๋ฐ ํ•ด๊ฒฐ์„ ....

๊ฐ™์€ ๋ฌธ์ œ์ž…๋‹ˆ๋‹ค.
์ˆ˜์ •์„ ๊ธฐ๋‹ค๋ฆฌ๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.
v7.0.2๋กœ ๋กค๋ฐฑ

๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ•˜๋Š” ๊ฒƒ์œผ๋กœ ํ™•์ธ๋จ - 7.0.2๋กœ ๋˜๋Œ๋ฆฌ๋ฉด ๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋จ

์ด๊ฒƒ์€ 0feb250b7ee90483e31f3bc159ebf946980d53a7์˜ ๋ณ€๊ฒฝ์œผ๋กœ ์ธํ•ด ๋Œ€์ƒ ID๊ฐ€ undefined ์žˆ์ง€๋งŒ ์•„๋ฌด๋„ isOverTarget ๋Œ€ํ•œ ํ•ด๋‹น ๋ณ€๊ฒฝ์œผ๋กœ PR์„ ํ™•์ธํ•˜์ง€ ์•Š์•˜๊ธฐ ๋•Œ๋ฌธ์— ๋ฐœ์ƒํ•ฉ๋‹ˆ๋‹ค.

ํ˜„์žฌ ํ”„๋กœํ† ํƒ€์ž…์€ ๋‹ค์Œ๊ณผ ๊ฐ™์Šต๋‹ˆ๋‹ค.

public isOverTarget(targetId: string, options = { shallow: false })

targetId / sourceId ๋ฅผ ์ด๋™ํ•˜๋Š” ํ•ด๋‹น pr์—์„œ ๋ณ€๊ฒฝ๋œ ๋‹ค๋ฅธ ๊ธฐ๋Šฅ๊ณผ ๋‹ฌ๋ฆฌ

targetId: string | undefined
sourceId: string | undefined

๋ฐ ํ™•์ธ:

if (!targetId) {
    return false;
}

์ด ๋ฌธ์ œ์— ๋Œ€ํ•œ ์ˆ˜์ •์€ ์—ฌ๊ธฐ์—์„œ targetId ๊ฐ€ undefined ๊ฒƒ์ž…๋‹ˆ๋‹ค. https://github.com/mattkrick/react-dnd/blob/aafcf7d67f8b3a2035b561e97b7874e1064447e4/packages/dnd-core/src /DragDropMonitorImpl.ts#L128

์ด๊ฒƒ์€ ์˜ค๋Š˜ ๋ฆด๋ฆฌ์Šค์—์„œ cfrank์˜ PR์— ์˜ํ•ด ์ˆ˜์ •๋˜์–ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋†€๋ž์Šต๋‹ˆ๋‹ค, ์—ฌ๋Ÿฌ๋ถ„, ๊ฐ์‚ฌํ•ฉ๋‹ˆ๋‹ค @cfrank

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰