\n \uc624\ub298\ub0a0\uc758 \uc6f9 \uac1c\ubc1c\uc5d0\uc11c\ub294 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc640 \ubc31\uc5d4\ub4dc \uac1c\ubc1c\uc744 \ud1b5\ud569\ud558\uc5ec \ud480\uc2a4\ud0dd \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4dc\ub294 \uac83\uc774 \ub9e4\uc6b0 \uc911\uc694\ud569\ub2c8\ub2e4.
\n \ub9ac\uc561\ud2b8(React)\ub294 \uc0ac\uc6a9\uc790 \uc778\ud130\ud398\uc774\uc2a4\ub97c \uad6c\ucd95\ud558\ub294 \ub370 \uc788\uc5b4 \uac00\uc7a5 \uc778\uae30 \uc788\ub294 \ub77c\uc774\ube0c\ub7ec\ub9ac \uc911 \ud558\ub098\ub85c,
\n Node.js\uc640 Express.js\uc640 \uac19\uc740 \ubc31\uc5d4\ub4dc \uae30\uc220\uacfc \ud568\uaed8 \uc0ac\uc6a9\ud558\uc5ec \uac15\ub825\ud55c \uc6f9 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4e4 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n \uc774 \uae00\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8\ub97c \uc0ac\uc6a9\ud558\uc5ec \ud480\uc2a4\ud0dd \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uad6c\ucd95\ud558\ub294 \ubc29\ubc95\uacfc \ud504\ub860\ud2b8\uc5d4\ub4dc\uc640 \ubc31\uc5d4\ub4dc \uac04\uc758 \ub370\uc774\ud130 \ud1b5\uc2e0\uc744 \uc124\uc815\ud558\ub294 \ubc29\ubc95\uc5d0 \ub300\ud574 \uc548\ub0b4\ud569\ub2c8\ub2e4.\n <\/p>\n
\uac1c\uc694<\/h2>\n
\n \ud480\uc2a4\ud0dd \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774\ub780 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc640 \ubc31\uc5d4\ub4dc\ub97c \ubaa8\ub450 \ud3ec\ud568\ud558\ub294 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc758\ubbf8\ud569\ub2c8\ub2e4.
\n \ud504\ub860\ud2b8\uc5d4\ub4dc\ub294 \uc0ac\uc6a9\uc790\uac00 \uc0c1\ud638\uc791\uc6a9\ud558\ub294 \ubd80\ubd84\uc774\uace0, \ubc31\uc5d4\ub4dc\ub294 \ub370\uc774\ud130\ub97c \ucc98\ub9ac\ud558\uace0 \uc800\uc7a5\ud558\ub294 \uc11c\ubc84 \uce21 \ubd80\ubd84\uc785\ub2c8\ub2e4.
\n \uc774 \ub450 \ubd80\ubd84 \uac04\uc758 \uc6d0\ud65c\ud55c \ud1b5\uc2e0\uc774 \ud480\uc2a4\ud0dd \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc758 \ud575\uc2ec\uc785\ub2c8\ub2e4.
\n \ubcf8 \uac15\uc88c\uc5d0\uc11c\ub294 \ub9ac\uc561\ud2b8 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc640 Node.js\/Express \ubc31\uc5d4\ub4dc\ub97c \uc5f0\ub3d9\ud558\ub294 \ubc29\ubc95\uc744 \ud559\uc2b5\ud558\uac8c \ub429\ub2c8\ub2e4.\n <\/p>\n
\uc0ac\uc804 \uc900\ube44 \uc0ac\ud56d<\/h2>\n
\n \uac15\uc88c\uc5d0 \uc55e\uc11c \ud544\uc694\ud55c \ud658\uacbd\uc744 \uc124\uc815\ud574\uc57c \ud569\ub2c8\ub2e4. \ub2e4\uc74c\uacfc \uac19\uc740 \ub3c4\uad6c\uac00 \ud544\uc694\ud569\ub2c8\ub2e4:\n <\/p>\n
- \n
- Node.js: JavaScript \ub7f0\ud0c0\uc784(\ubc84\uc804 14 \uc774\uc0c1 \uad8c\uc7a5)<\/li>\n
- npm \ub610\ub294 yarn: \ud328\ud0a4\uc9c0 \ub9e4\ub2c8\uc800<\/li>\n
- \ub9ac\uc561\ud2b8 \uc571 \uc0dd\uc131\uae30(create-react-app)<\/li>\n
- Postman: API \ud14c\uc2a4\ud2b8\ub97c \uc704\ud55c \ud234(\uc120\ud0dd \uc0ac\ud56d)<\/li>\n<\/ul>\n
1. \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \uc124\uc815\ud558\uae30<\/h2>\n
\n \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \uc0dd\uc131\ud558\uae30 \uc704\ud574 create-react-app\uc744 \uc0ac\uc6a9\ud569\ub2c8\ub2e4.
\n \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud558\uc5ec \uc0c8 \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc744 \ub9cc\ub4ed\ub2c8\ub2e4:\n <\/p>\nnpx create-react-app my-fullstack-app<\/code><\/pre>\n\n \uc560\ud50c\ub9ac\ucf00\uc774\uc158 \ub514\ub809\ud1a0\ub9ac\ub85c \uc774\ub3d9\ud569\ub2c8\ub2e4:\n <\/p>\n
cd my-fullstack-app<\/code><\/pre>\n\n \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uc0dd\uc131\ub418\uba74, \uae30\ubcf8 \ub9ac\uc561\ud2b8 \uad6c\uc870\uac00 \uc0dd\uc131\ub429\ub2c8\ub2e4.
\n \uc774\uc81c \uac1c\ubc1c \uc11c\ubc84\ub97c \uc2dc\uc791\ud558\uc5ec \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uc81c\ub300\ub85c \uc791\ub3d9\ud558\ub294\uc9c0 \ud655\uc778\ud569\ub2c8\ub2e4:\n <\/p>\nnpm start<\/code><\/pre>\n2. \ubc31\uc5d4\ub4dc \uc124\uc815\ud558\uae30<\/h2>\n
\n \ub9ac\uc561\ud2b8 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc640 \ud1b5\uc2e0\ud560 Node.js \ubc31\uc5d4\ub4dc\ub97c \ub9cc\ub4ed\ub2c8\ub2e4.
\n \uc0c8 \ud3f4\ub354\ub97c \uc0dd\uc131\ud558\uace0 \uadf8 \uc548\uc5d0 \ubc31\uc5d4\ub4dc \ucf54\ub4dc\ub97c \uc791\uc131\ud569\ub2c8\ub2e4. \uc544\ub798 \uba85\ub839\uc5b4\ub85c \ubc31\uc5d4\ub4dc\ub97c \ub9cc\ub4e4\uae30 \uc704\ud574 \uc0c8\ub85c\uc6b4 \ub514\ub809\ud1a0\ub9ac\ub97c \uc0dd\uc131\ud569\ub2c8\ub2e4:\n <\/p>\nmkdir backend && cd backend<\/code><\/pre>\n\n \uc774\uc81c Node.js \ud504\ub85c\uc81d\ud2b8\ub97c \ucd08\uae30\ud654\ud569\ub2c8\ub2e4:\n <\/p>\n
npm init -y<\/code><\/pre>\n\n Express.js\ub97c \uc124\uce58\ud569\ub2c8\ub2e4:\n <\/p>\n
npm install express<\/code><\/pre>\n3. Express \uc11c\ubc84 \uc124\uc815<\/h2>\n
\n Express \uc11c\ubc84\ub97c \uc124\uc815\ud558\uace0 \uae30\ubcf8 API \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.
\n express\ub97c \uc0ac\uc6a9\ud558\uc5ec `server.js` \ud30c\uc77c\uc744 \uc0dd\uc131\ud558\uc2ed\uc2dc\uc624:\n <\/p>\ntouch server.js<\/code><\/pre>\n\n `server.js` \ud30c\uc77c\uc5d0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4:\n <\/p>\n
\nconst express = require('express');\nconst app = express();\nconst PORT = process.env.PORT || 5000;\n\napp.use(express.json());\n\napp.get('\/api\/data', (req, res) => {\n res.json({ message: 'Hello from backend!' });\n});\n\napp.listen(PORT, () => {\n console.log(`Server is running on http:\/\/localhost:${PORT}`);\n});\n <\/code><\/pre>\n\n \uc11c\ubc84\ub97c \uc2dc\uc791\ud558\uae30 \uc704\ud574 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc785\ub825\ud569\ub2c8\ub2e4:\n <\/p>\n
node server.js<\/code><\/pre>\n4. \ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c \ubc31\uc5d4\ub4dc API \ud638\ucd9c\ud558\uae30<\/h2>\n
\n \ub9ac\uc561\ud2b8 \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc5d0\uc11c axios\ub97c \uc774\uc6a9\ud558\uc5ec API\ub97c \ud638\ucd9c\ud569\ub2c8\ub2e4.
\n axios\ub97c \uc124\uce58\ud558\uae30 \uc704\ud574 \ub2e4\uc74c \uba85\ub839\uc5b4\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4:\n <\/p>\nnpm install axios<\/code><\/pre>\n\n \uc774\uc81c \uc774 \ub77c\uc774\ube0c\ub7ec\ub9ac\ub97c \uc0ac\uc6a9\ud558\uc5ec \ubc31\uc5d4\ub4dc\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uac00\uc838\uc635\ub2c8\ub2e4.
\n `src\/App.js`\ub97c \uc5f4\uace0 \uc544\ub798\uc640 \uac19\uc774 \ucf54\ub4dc\ub97c \uc218\uc815\ud569\ub2c8\ub2e4:\n <\/p>\n\nimport React, { useEffect, useState } from 'react';\nimport axios from 'axios';\n\nfunction App() {\n const [data, setData] = useState({});\n\n useEffect(() => {\n const fetchData = async () => {\n const result = await axios('\/api\/data');\n setData(result.data);\n };\n fetchData();\n }, []);\n\n return (\n\n{data.message}<\/h1>\n <\/div>\n );\n}\n\nexport default App;\n <\/code><\/pre>\n
\n \uc774\uc81c \uc11c\ubc84\ub97c \ub2e4\uc2dc \uc2dc\uc791\ud55c \ud6c4, \ub9ac\uc561\ud2b8 \uc571\uc5d0\uc11c API \uc694\uccad\uc744 \ud655\uc778\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n \uac1c\ubc1c \uc11c\ubc84\ub97c \ub2e4\uc2dc \uc2dc\uc791\ud558\ub824\uba74 \ub9ac\uc561\ud2b8 \uc571\uc5d0\uc11c `npm start`\ub97c \uc2e4\ud589\ud558\uc138\uc694.\n <\/p>\n5. CORS \uc124\uc815\ud558\uae30<\/h2>\n
\n \ub9cc\uc57d \ub9ac\uc561\ud2b8 \uc571\uacfc \ubc31\uc5d4\ub4dc \uc11c\ubc84\uac00 \uc11c\ub85c \ub2e4\ub978 \ud3ec\ud2b8\uc5d0\uc11c \uc2e4\ud589\ub418\uace0 \uc788\uc744 \uacbd\uc6b0, CORS \uc815\ucc45 \ubb38\uc81c\ub85c \uc778\ud574 \uc694\uccad\uc774 \ucc28\ub2e8\ub420 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n \uc774\ub97c \ud574\uacb0\ud558\uae30 \uc704\ud574 `cors` \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud574\uc57c \ud569\ub2c8\ub2e4:\n <\/p>\nnpm install cors<\/code><\/pre>\n\n \uadf8 \ud6c4, `server.js`\uc5d0 \uc704 \uc544\ub798 \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec CORS\ub97c \ud65c\uc131\ud654\ud569\ub2c8\ub2e4:\n <\/p>\n
\nconst cors = require('cors');\napp.use(cors());\n <\/code><\/pre>\n6. \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc640\uc758 \uc5f0\uacb0<\/h2>\n
\n \uc560\ud50c\ub9ac\ucf00\uc774\uc158\uc774 \uc2e4\uc81c \ub370\uc774\ud130\uc640 \uc0c1\ud638\uc791\uc6a9\ud560 \uc218 \uc788\ub3c4\ub85d \ub370\uc774\ud130\ubca0\uc774\uc2a4\ub97c \uc124\uc815\ud569\ub2c8\ub2e4.
\n MongoDB \ub610\ub294 MySQL\uacfc \uac19\uc740 \ub370\uc774\ud130\ubca0\uc774\uc2a4\ub97c \uc0ac\uc6a9\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n \uc774\ubc88 \uc608\uc81c\uc5d0\uc11c\ub294 MongoDB\ub97c \uc0ac\uc6a9\ud55c\ub2e4\uace0 \uac00\uc815\ud558\uace0, \ub370\uc774\ud130\ubca0\uc774\uc2a4\uc640 \uc5f0\uacb0\ud558\ub294 \ubc29\ubc95\uc744 \uc124\uba85\ud558\uaca0\uc2b5\ub2c8\ub2e4.\n <\/p>\n\n \uba3c\uc800 MongoDB Atlas\uc5d0 \uac00\uc785\ud558\uc5ec \ud074\ub7ec\uc2a4\ud130\ub97c \uc0dd\uc131\ud55c \ud6c4,
\n `mongoose` \ud328\ud0a4\uc9c0\ub97c \uc124\uce58\ud569\ub2c8\ub2e4:\n <\/p>\nnpm install mongoose<\/code><\/pre>\n\n \uc774\ud6c4, `server.js`\uc5d0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud558\uc5ec MongoDB\uc5d0 \uc5f0\uacb0\ud569\ub2c8\ub2e4:\n <\/p>\n
\nconst mongoose = require('mongoose');\nconst dbURI = 'YOUR_MONGODB_CONNECTION_STRING';\n\nmongoose.connect(dbURI, { useNewUrlParser: true, useUnifiedTopology: true })\n .then(() => console.log('MongoDB connected'))\n .catch(err => console.error(err));\n <\/code><\/pre>\n7. \ub370\uc774\ud130 \ubaa8\ub378 \uc0dd\uc131\ud558\uae30<\/h2>\n
\n MongoDB\uc758 \ub370\uc774\ud130 \uad6c\uc870\ub97c \uc815\uc758\ud558\uae30 \uc704\ud574 \ubaa8\ub378\uc744 \uc0dd\uc131\ud569\ub2c8\ub2e4.
\n `models` \ud3f4\ub354\ub97c \ub9cc\ub4e4\uace0 `User.js`\ub77c\ub294 \ud30c\uc77c\uc744 \uc0dd\uc131\ud55c \ud6c4, \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4:\n <\/p>\n\nconst mongoose = require('mongoose');\n\nconst UserSchema = new mongoose.Schema({\n name: String,\n email: String\n});\n\nmodule.exports = mongoose.model('User', UserSchema);\n <\/code><\/pre>\n8. \ub370\uc774\ud130 CRUD \uc791\uc5c5 \uad6c\ud604\ud558\uae30<\/h2>\n
\n \uc774\uc81c CRUD(\uc0dd\uc131, \uc77d\uae30, \uc5c5\ub370\uc774\ud2b8, \uc0ad\uc81c) \uc791\uc5c5\uc744 \uc218\ud589\ud558\ub294 API \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4.
\n `server.js`\uc5d0 \ub2e4\uc74c \ucf54\ub4dc\ub97c \ucd94\uac00\ud569\ub2c8\ub2e4:\n <\/p>\n\napp.post('\/api\/users', async (req, res) => {\n const user = new User(req.body);\n await user.save();\n res.status(201).send(user);\n});\n\napp.get('\/api\/users', async (req, res) => {\n const users = await User.find();\n res.send(users);\n});\n <\/code><\/pre>\n\n \uc774\ub7ec\ud55c \uc5d4\ub4dc\ud3ec\uc778\ud2b8\ub97c \ud1b5\ud574 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c \ub370\uc774\ud130\ub97c \uad00\ub9ac\ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
\n \uc774\uc81c \ub9ac\uc561\ud2b8 \ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c \uc0ac\uc6a9\uc790 \ub4f1\ub85d\uacfc \ubaa9\ub85d\uc744 \ud45c\uc2dc\ud558\uae30 \uc704\ud55c UI\ub97c \uad6c\ud604\ud574\uc57c \ud569\ub2c8\ub2e4.\n <\/p>\n9. \ud504\ub860\ud2b8\uc5d4\ub4dc\uc5d0\uc11c \uc0ac\uc6a9\uc790 \ub4f1\ub85d \uae30\ub2a5 \uad6c\ud604\ud558\uae30<\/h2>\n
\n \uc0ac\uc6a9\uc790 \ub4f1\ub85d \ud3fc\uc744 \uad6c\ud604\ud558\uae30 \uc704\ud574 `src\/App.js`\ub97c \uc218\uc815\ud569\ub2c8\ub2e4:\n <\/p>\n
\nimport React, { useEffect, useState } from 'react';\nimport axios from 'axios';\n\nfunction App() {\n const [users, setUsers] = useState([]);\n const [name, setName] = useState('');\n const [email, setEmail] = useState('');\n\n useEffect(() => {\n const fetchUsers = async () => {\n const result = await axios('\/api\/users');\n setUsers(result.data);\n };\n fetchUsers();\n }, []);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n await axios.post('\/api\/users', { name, email });\n setName(''); \n setEmail('');\n const result = await axios('\/api\/users');\n setUsers(result.data);\n };\n\n return (\n\nUser Registration<\/h1>\n