-json\ub370\uc774\ud130fetch\ubc29\uc2dd\uc758 \ub370\uc774\ud130 \uc804\uc1a1 \/ Fetch data transfer method<\/p>\n\n\n\n
server.js<\/p>\n\n\n\n
const ejs = require('ejs');\nconst express = require('express');\nconst http = require('http');\nconst path = require('path');\nvar bodyParser = require('body-parser');\nconst fs = require('fs');\n\nconst app = express();\nconst server = http.createServer(app);\nconst port = 3000;\n\n\/\/ ejs settings\napp.set('view engine','ejs');\napp.set('views','.\/public');\n\n\/\/ \uc815\uc801 \ub514\ub809\ud1a0\ub9ac \uc124\uc815 : \uc6f9\uc11c\ubc84 \ud30c\uc77c \uacbd\ub85c\napp.use(express.static('public'));\n\n\/\/ json\ub370\uc774\ud130 \uc0ac\uc6a9\napp.use(express.json());\n\n\/\/ \ud30c\uc77c \uc5c5\ub85c\ub4dc\uc6a9\n\/\/app.use(express.urlencoded({ extended: true }));\n\n\/\/ POST\uba54\uc18c\ub4dc\uc6a9 parse application\/x-www-form-urlencoded\napp.use(bodyParser.urlencoded({ extended: false }));\n\n\/\/ \ud3fc \ubd88\ub7ec\uc624\uae30\napp.get('\/', (req, res) => {\n res.render('form')\n});\n\n\/\/ \ud3fc \ub0b4\uc6a9 \ucc98\ub9ac \ub610\ub294 \ucd9c\ub825\napp.post('\/signupProc',(req, res) => {\n const username = req.body.username;\n console.log(`\ud3fc\ub370\uc774\ud130 : ${username}`);\n \n if(username){\n res.json({message: '\ub370\uc774\ud130\uc804\uc1a1\uc644\ub8cc'});\n }\n})\n\n\/\/ \ub9ac\uc2a4\ud2b8\uc6a9\napp.get('\/userlist', (req, res) => {\n res.send(\"\uc0ac\uc6a9\uc790list\");\n});\n\n\/\/ \uc11c\ubc84 \uc2dc\uc791\nserver.listen(port, () => {\n console.log(`\uc11c\ubc84\uac00 ${port} \ud3ec\ud2b8\uc5d0\uc11c \uc2e4\ud589 \uc911\uc785\ub2c8\ub2e4.`);\n});\n\n\n\/\/ module install\n\/\/ npm install body-parser cors ejs express fs<\/code><\/pre>\n\n\n\n\/public\/form.ejs<\/p>\n\n\n\n
<!DOCTYPE html>\n<html lang=\"ko\">\n<head>\n <meta charset=\"UTF-8\" \/>\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\/>\n <title>\ud68c\uc6d0\uac00\uc785<\/title>\n <style>\n .signup-form {\n background-color: #fff;\n padding: 30px;\n border-radius: 8px;\n box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);\n width: 400px;\n }\n .form-group {\n margin-bottom: 20px;\n }\n label {\n display: block;\n margin-bottom: 5px;\n font-weight: bold;\n }\n input[type=\"text\"] {\n width: calc(100% - 80px); \/* Adjust width to accommodate the button *\/\n padding: 10px;\n border: 1px solid #ccc;\n border-radius: 4px;\n box-sizing: border-box;\n font-size: 16px;\n }\n .input-button-wrapper {\n display: flex;\n gap: 10px; \/* Space between input and button *\/\n align-items: center;\n }\n button { \/* submit \ud0c0\uc785 \uc81c\uac70 *\/\n background-color: #007bff;\n color: white;\n padding: 10px 15px;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n font-size: 16px;\n box-sizing: border-box;\n }\n button:hover {\n background-color: #0056b3;\n }\n .error-message {\n color: red;\n font-size: 0.9em;\n margin-top: 5px;\n }\n .available-message {\n color: green;\n font-size: 0.9em;\n margin-top: 5px;\n }\n <\/style>\n<\/head>\n<body>\n <div class=\"signup-form\">\n <form id=\"signupForm\" name=\"signupForm\">\n <div class=\"form-group\">\n <label for=\"username\">\uc544\uc774\ub514:<\/label>\n <div class=\"input-button-wrapper\">\n <input type=\"text\" id=\"username\" name=\"username\" required minlength=\"3\" maxlength=\"50\" \/>\n <button type=\"button\" id=\"submitBtn\">\ud655\uc778<\/button>\n <\/div>\n <div id=\"errorMessage\" class=\"error-message\"><\/div>\n <div id=\"successMessage\" class=\"available-message\"><\/div>\n <\/div>\n <\/form>\n <\/div>\n <script>\n \/\/ id\uac12 \uac00\uc838\uc624\uae30\n const signupForm = document.getElementById('signupForm');\n const usernameInput = document.getElementById('username');\n const submitBtn = document.getElementById('submitBtn');\n const errorMessageDiv = document.getElementById('errorMessage');\n const successMessageDiv = document.getElementById('successMessage');\n\n \/\/ click\uc774\ubca4\ud2b8\n submitBtn.addEventListener('click', async (event) => {\n errorMessageDiv.textContent = '';\n successMessageDiv.textContent = '';\n try {\n const formData = new FormData(signupForm);\n const data = {};\n formData.forEach((value, key) => (data[key] = value));\n \n \/\/ fetch\ubc29\uc2dd\n const response = await fetch('\/signupProc', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application\/json',\n },\n body: JSON.stringify(data),\n });\n\n \/\/ \uc11c\ubc84\uc5d0\uc11cjson\ub370\uc774\ud130 \ubc1b\uae30\n const result = await response.json();\n\n if (response.ok) {\n successMessageDiv.textContent = result.message || '\ud68c\uc6d0\uac00\uc785\uc774 \uc644\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.';\n signupForm.reset();\n \n \/\/isUsernameAvailable = false; \/\/ Assuming you have this variable defined elsewhere for further validation\n \n \/\/ \ud398\uc774\uc9c0 \uc774\ub3d9 \uc644\ub8cc\uba54\uc138\uc9c0 \ud655\uc778\ub418\uba74 \ud14c\uc2a4\ud2b8 \n \/\/location.href='\/userlist';\n } else {\n errorMessageDiv.textContent = result.error || '\ud68c\uc6d0\uac00\uc785\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.';\n }\n\n } catch (error) {\n console.error('\ud68c\uc6d0\uac00\uc785 \uc624\ub958:', error);\n errorMessageDiv.textContent = '\uc11c\ubc84\uc640 \ud1b5\uc2e0 \uc911 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.';\n }\n });\n <\/script>\n<\/body>\n<\/html><\/code><\/pre>\n","protected":false},"excerpt":{"rendered":"-json\ub370\uc774\ud130fetch\ubc29\uc2dd\uc758 \ub370\uc774\ud130 \uc804\uc1a1 \/ Fetch data transfer method server.js \/public\/form.ejs<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9],"tags":[],"class_list":["post-1146","post","type-post","status-publish","format-standard","hentry","category-nodejs","missing-thumbnail"],"_links":{"self":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1146","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/comments?post=1146"}],"version-history":[{"count":4,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1146\/revisions"}],"predecessor-version":[{"id":1156,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1146\/revisions\/1156"}],"wp:attachment":[{"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/media?parent=1146"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/categories?post=1146"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/tags?post=1146"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}