๋ฒ๊ทธ ์ค๋ช
typescript์ ํจ๊ป nextjs v8์ ์ฌ์ฉํ์ฌ ํ๋ก์ ํธ๋ฅผ ๋น๋ํ์ง๋ง react-dnd 8.0.2์์ API๋ฅผ ๊ฐ์ ธ์ฌ ๋ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค.
์คํฌ๋ฆฐ์ท
ํด๋นํ๋ ๊ฒฝ์ฐ ๋ฌธ์ ๋ฅผ ์ค๋ช
ํ๋ ๋ฐ ๋์์ด ๋๋ ์คํฌ๋ฆฐ์ท์ ์ถ๊ฐํ์ธ์.
๋ฐ์คํฌํ(๋ค์ ์ ๋ณด๋ฅผ ์์ฑํ์ญ์์ค):
์ถ๊ฐ ์ปจํ ์คํธ
.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 ๊ฐ์ ธ์ค๊ธฐ;
ํจ์ ํ() {
๋ฐํ (
๊ธฐ๋ณธ ํ ๋ด๋ณด๋ด๊ธฐ;
```
+1, ๊ฐ์ ๋ฌธ์ ๊ฐ ์์ต๋๋ค.
์ฌ๊ธฐ์ +1 ๋์ผ
^ @darthtrevino
v8 ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ES ๋ชจ๋์ ์ฌ์ฉํฉ๋๋ค. ๋์ react-dnd-cjs
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ผ ํ๋ ๊ฒ ๊ฐ์ต๋๋ค.
๊ฐ์ฅ ์ ์ฉํ ๋๊ธ
v8 ๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ ๊ธฐ๋ณธ์ ์ผ๋ก ES ๋ชจ๋์ ์ฌ์ฉํฉ๋๋ค. ๋์
react-dnd-cjs
๋ผ์ด๋ธ๋ฌ๋ฆฌ๋ฅผ ์ฌ์ฉํด์ผ ํ๋ ๊ฒ ๊ฐ์ต๋๋ค.