React-dnd: ์ƒˆ๋กœ์šด ์ธ๊ธฐ ESModules + nextjs 8 + typescript

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

๋ฒ„๊ทธ ์„ค๋ช…
typescript์™€ ํ•จ๊ป˜ nextjs v8์„ ์‚ฌ์šฉํ•˜์—ฌ ํ”„๋กœ์ ํŠธ๋ฅผ ๋นŒ๋“œํ–ˆ์ง€๋งŒ react-dnd 8.0.2์—์„œ API๋ฅผ ๊ฐ€์ ธ์˜ฌ ๋•Œ ๋ฌธ์ œ๊ฐ€ ๋ฐœ์ƒํ–ˆ์Šต๋‹ˆ๋‹ค.

์Šคํฌ๋ฆฐ์ƒท
ํ•ด๋‹นํ•˜๋Š” ๊ฒฝ์šฐ ๋ฌธ์ œ๋ฅผ ์„ค๋ช…ํ•˜๋Š” ๋ฐ ๋„์›€์ด ๋˜๋Š” ์Šคํฌ๋ฆฐ์ƒท์„ ์ถ”๊ฐ€ํ•˜์„ธ์š”.
Screen Shot 2019-06-20 at 11 04 47 AM

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

  • ๋งฅOS ๋ชจํ•˜๋น„ 10.14.5

์ถ”๊ฐ€ ์ปจํ…์ŠคํŠธ

Screen Shot 2019-06-20 at 11 13 51 AM

.babelrc:
```{
"์‚ฌ์ „ ์„ค์ •": [
"๋‹ค์Œ/๋ฐ”๋ฒจ",
"@zeit/next-typescript/babel",
],
}

dependencies: 
```"dependencies": {
    "@weco/next-plugin-transpile-modules": "^2.2.1",
    "next": "^8.1.0",
    "next-transpile-modules": "^2.3.1",
    "react": "^16.8.6",
    "react-dnd": "^8.0.2",
    "react-dnd-html5-backend": "^8.0.2",
    "react-dom": "^16.8.6"
  },
  "devDependencies": {
    "@zeit/next-css": "^1.0.1",
    "@zeit/next-sass": "^1.0.1",
    "@zeit/next-typescript": "^1.1.1",
    "next-compose-plugins": "^2.2.0",
    "webpack-merge": "^4.2.1"
  }

์š”์†Œ:
```"react"์—์„œ React ๊ฐ€์ ธ์˜ค๊ธฐ;
"react-dnd"์—์„œ { DndProvider } ๊ฐ€์ ธ์˜ค๊ธฐ;
"react-dnd-html5-backend"์—์„œ HTML5Backend ๊ฐ€์ ธ์˜ค๊ธฐ;

ํ•จ์ˆ˜ ํ™ˆ() {
๋ฐ˜ํ’ˆ (

Next.js์— ์˜ค์‹  ๊ฒƒ์„ ํ™˜์˜ํ•ฉ๋‹ˆ๋‹ค!


);
}

๊ธฐ๋ณธ ํ™ˆ ๋‚ด๋ณด๋‚ด๊ธฐ;
```

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

v8 ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ES ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋Œ€์‹  react-dnd-cjs ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

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

+1, ๊ฐ™์€ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค.

์—ฌ๊ธฐ์— +1 ๋™์ผ

^ @darthtrevino

v8 ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ ES ๋ชจ๋“ˆ์„ ์‚ฌ์šฉํ•ฉ๋‹ˆ๋‹ค. ๋Œ€์‹  react-dnd-cjs ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•ด์•ผ ํ•˜๋Š” ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.

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