{"id":41062,"date":"2024-11-06T02:46:27","date_gmt":"2024-11-06T02:46:27","guid":{"rendered":"https:\/\/atmokpo.com\/w\/?p=41062"},"modified":"2024-11-26T06:37:41","modified_gmt":"2024-11-26T06:37:41","slug":"30-%ec%9d%b4%eb%af%b8%ec%a7%80-%ec%97%85%eb%a1%9c%eb%93%9c-%eb%b0%8f-%eb%af%b8%eb%94%94%ec%96%b4-%ea%b4%80%eb%a6%ac-next-js%ec%97%90%ec%84%9c-%ec%9d%b4%eb%af%b8%ec%a7%80-%ec%b5%9c%ec%a0%81%ed%99%94","status":"publish","type":"post","link":"https:\/\/atmokpo.com\/w\/41062\/","title":{"rendered":"30.\uc774\ubbf8\uc9c0 \uc5c5\ub85c\ub4dc \ubc0f \ubbf8\ub514\uc5b4 \uad00\ub9ac, Next.js\uc5d0\uc11c \uc774\ubbf8\uc9c0 \ucd5c\uc801\ud654 \ucc98\ub9ac \ubc0f \ubbf8\ub514\uc5b4 \uad00\ub9ac"},"content":{"rendered":"

<\/p>\n

\ubaa8\ub358 \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc774\ubbf8\uc9c0 \uad00\ub9ac \ubc0f \ucd5c\uc801\ud654\ub294 \uc131\ub2a5\uacfc \uc0ac\uc6a9\uc790 \uacbd\ud5d8\uc5d0 \uc911\uc694\ud55c \uc694\uc18c\uc785\ub2c8\ub2e4. \ud2b9\ud788 Next.js\ub294 \uc774\ubbf8\uc9c0 \ucd5c\uc801\ud654\ub97c \uc9c0\uc6d0\ud558\ub294 \uac15\ub825\ud55c \uae30\ub2a5\uc744 \uac00\uc9c0\uace0 \uc788\uc5b4, \uc6f9 \uc0ac\uc774\ud2b8\uc758 \ub85c\ub529 \uc18d\ub3c4\ub97c \uac1c\uc120\ud558\uace0 \uc0ac\uc6a9\uc790 \uce5c\ud654\uc801\uc778 \uacbd\ud5d8\uc744 \uc81c\uacf5\ud569\ub2c8\ub2e4. \uc774 \uae00\uc5d0\uc11c\ub294 Next.js\uc5d0\uc11c \uc774\ubbf8\uc9c0 \uc5c5\ub85c\ub4dc \ubc0f \ubbf8\ub514\uc5b4 \uad00\ub9ac \ubc29\ubc95, \uc774\ubbf8\uc9c0 \ucd5c\uc801\ud654 \ucc98\ub9ac\uc5d0 \ub300\ud574 \uc790\uc138\ud788 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.<\/p>\n

1. \uc774\ubbf8\uc9c0 \uc5c5\ub85c\ub4dc \ubc0f \ubbf8\ub514\uc5b4 \uad00\ub9ac<\/h2>\n

\uc774\ubbf8\uc9c0 \uc5c5\ub85c\ub4dc\ub294 \uc0ac\uc6a9\uc790\uac00 \ud30c\uc77c\uc744 \uc120\ud0dd\ud558\uace0, \uc11c\ubc84\ub85c \uc804\uc1a1\ud558\uc5ec \ub370\uc774\ud130\ub97c \uc800\uc7a5\ud558\ub294 \uacfc\uc815\uc744 \ud3ec\ud568\ud569\ub2c8\ub2e4. \uc774 \uc808\uc5d0\uc11c\ub294 Next.js \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c \uc774\ubbf8\uc9c0\ub97c \uc5c5\ub85c\ub4dc\ud558\uace0 \uad00\ub9ac\ud558\ub294 \ubc29\ubc95\uc744 \uc0b4\ud3b4\ubd05\ub2c8\ub2e4.<\/p>\n

1.1. \uc774\ubbf8\uc9c0 \uc5c5\ub85c\ub4dc\ub97c \uc704\ud55c API \uac1c\ubc1c<\/h3>\n

Next.js\uc5d0\uc11c\ub294 API \ub77c\uc6b0\ud2b8\ub97c \uc0dd\uc131\ud558\uc5ec \ubc31\uc5d4\ub4dc \uae30\ub2a5\uc744 \uc190\uc27d\uac8c \uad6c\ud604\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. \uc774\ubbf8\uc9c0 \uc5c5\ub85c\ub4dc\ub97c \uc704\ud574 multer\uc640 \uac19\uc740 \ubbf8\ub4e4\uc6e8\uc5b4\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4. multer\ub294 Node.js\uc5d0\uc11c \ud30c\uc77c \uc5c5\ub85c\ub4dc\ub97c \ub2e4\ub8e8\uae30 \uc704\ud55c \ubbf8\ub4e4\uc6e8\uc5b4\uc785\ub2c8\ub2e4.<\/p>\n

npm install multer<\/code><\/pre>\n
\uc774\uc81c API \ub77c\uc6b0\ud2b8\ub97c \uc0dd\uc131\ud558\uace0 \uc774\ubbf8\uc9c0\ub97c \uc5c5\ub85c\ub4dc\ud560 \uc218 \uc788\ub294 \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub97c \ub9cc\ub4e4\uaca0\uc2b5\ub2c8\ub2e4. pages\/api\/upload.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
import nextConnect from 'next-connect';\nimport multer from 'multer';\n\nconst upload = multer({\n    storage: multer.memoryStorage(), \/\/ \uba54\ubaa8\ub9ac \uc2a4\ud1a0\ub9ac\uc9c0 \uc0ac\uc6a9\n});\n\nconst handler = nextConnect();\n\nhandler.use(upload.single('image')) \/\/ 'image' \ud544\ub4dc\ub85c \ub2e8\uc77c \ud30c\uc77c \uc5c5\ub85c\ub4dc\n    .post((req, res) => {\n        \/\/ \ud30c\uc77c \uc5c5\ub85c\ub4dc \ucc98\ub9ac \ub85c\uc9c1\n        const file = req.file;\n        if (!file) {\n            return res.status(400).json({ error: '\uc774\ubbf8\uc9c0\ub97c \uc5c5\ub85c\ub4dc \ud574\uc8fc\uc138\uc694.' });\n        }\n        \/\/ \ud30c\uc77c \ucc98\ub9ac \ub85c\uc9c1\n        res.status(200).json({ message: '\uc774\ubbf8\uc9c0 \uc5c5\ub85c\ub4dc \uc131\uacf5', file });\n    });\n\nexport default handler;<\/code><\/pre>\n
\uc704\uc758 \ucf54\ub4dc\uc5d0\uc11c multer.memoryStorage()<\/code>\ub97c \uc0ac\uc6a9\ud558\uc5ec \uba54\ubaa8\ub9ac\uc5d0\uc11c \uc9c1\uc811 \ud30c\uc77c\uc744 \ubc1b\uc2b5\ub2c8\ub2e4. \uc774\ub97c \ud1b5\ud574 \ubc1b\uc740 \ud30c\uc77c\uc744 \uc989\uc2dc \ucc98\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.<\/p>\n
1.2. \ud074\ub77c\uc774\uc5b8\ud2b8 \uce21 \uc774\ubbf8\uc9c0 \uc5c5\ub85c\ub4dc<\/h3>\n
\uc774\uc81c \ud074\ub77c\uc774\uc5b8\ud2b8 \uce21\uc5d0\uc11c \uc774\ubbf8\uc9c0\ub97c \uc5c5\ub85c\ub4dc\ud558\ub294 \ucef4\ud3ec\ub10c\ud2b8\ub97c \ub9cc\ub4ed\ub2c8\ub2e4. components\/ImageUpload.js<\/code> \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uace0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.<\/p>\n
import { useState } from 'react';\n\nconst ImageUpload = () => {\n    const [image, setImage] = useState(null);\n\n    const handleChange = (e) => {\n        setImage(e.target.files[0]);\n    };\n\n    const handleSubmit = async (e) => {\n        e.preventDefault();\n        const formData = new FormData();\n        formData.append('image', image);\n\n        const res = await fetch('\/api\/upload', {\n            method: 'POST',\n            body: formData,\n        });\n        const data = await res.json();\n        console.log(data);\n    };\n\n    return (\n        
\n            \n