{"id":1146,"date":"2025-04-15T06:52:35","date_gmt":"2025-04-15T06:52:35","guid":{"rendered":"https:\/\/www.freelifemakers.org\/wordpress\/?p=1146"},"modified":"2026-07-13T11:50:31","modified_gmt":"2026-07-13T02:50:31","slug":"nodejs6","status":"publish","type":"post","link":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/2025\/04\/15\/nodejs6\/","title":{"rendered":"nodejs6 – fetch\ub370\uc774\ud130 \uc804\uc1a1\ubc29\uc2dd \/ Fetch data transfer method"},"content":{"rendered":"\n

\ud83d\udc49\ud83c\udffb json\ub370\uc774\ud130fetch\ubc29\uc2dd\uc758 \ub370\uc774\ud130 \uc804\uc1a1
Data transmission using the jsonDatafetch method<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb fetch\ub370\uc774\ud130 \uc804\uc1a1\ubc29\uc2dd\uc740 \uc6f9\ud398\uc774\uc9c0\uc758\uc0c8\ub85c \uace0\uce68\uc5c6\uc774 \uc11c\ubc84 \ubc31\uadf8\ub77c\uc6b4\ub4dc\uc640 \ub370\uc774\ud130\ub97c \uc8fc\uace0 \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
The fetch data transfer method allows for the exchange of data with the server in the background without refreshing the web page.<\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb \uc774 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c \uc124\uba85\ud558\ub294 \uc18c\uc2a4\ucf54\ub4dc\ub294 \uae43\ud5c8\ube0c\uc5d0\uc11c \ub2e4\uc6b4\ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
The source code described in this post can be downloaded from GitHub.<\/p>\n\n\n\n

https:\/\/github.com\/gideonslife01\/flm-js-nodejs<\/a><\/p>\n\n\n\n

\ud83d\udc49\ud83c\udffb node_modules\ub514\ub809\ud1a0\ub9ac\ub97c \uc0ad\uc81c\ud558\uace0 \uc5c5\ub85c\ub4dc \ud588\uae30 \ub54c\ubb38\uc5d0 \uc2e4\ud589\ud560 \uacbd\uc6b0 \ub514\ub809\ud1a0\ub9ac \ub0b4\uc5d0\uc11c npm install \uba85\ub839\uc744 \ud55c\ubc88 \uc2e4\ud589\ud574\uc57c\ud569\ub2c8\ub2e4.
Since the node_modules<\/code> directory was deleted before uploading, you need to run the npm install<\/code> command within the directory to execute the application.<\/p>\n\n\n\n

\n\n\n\n

\ud83d\udc49\ud83c\udffb \ubaa8\ub4c8\uc124\uce58 \/ Install Modules<\/p>\n\n\n\n

npm install body-parser cors ejs express fs<\/code><\/pre>\n\n\n\n
\n\n\n\n
\ud83d\udc49\ud83c\udffb \ud30c\uc77c \/ files<\/p>\n\n\n\n
— node_modules \ub514\ub809\ud1a0\ub9ac\uc640 package.json,package-local.json\ud30c\uc77c\uc740 npm install\uba85\ub839 \uc2e4\ud589\uc2dc \uc790\ub3d9\uc0dd\uc131\ub429\ub2c8\ub2e4.
The node_modules<\/code> directory and the package.json<\/code> and package-local.json<\/code> files are automatically generated when the npm install<\/code> command is executed.<\/p>\n\n\n\n
#project directory\n\nnode_modules\t\tpackage.json\t\tserver.js\npackage-lock.json\tpublic<\/code><\/pre>\n\n\n\n
# public directory\n\nform.ejs<\/code><\/pre>\n\n\n\n
\n\n\n\n
\ud83d\udc49\ud83c\udffb \uc804\uccb4 \ucf54\ub4dc \/ full code<\/p>\n\n\n\n
\u2714\ufe0f 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\n\/\/ Static directory configuration: Web server file path\napp.use(express.static('public'));\n\n\/\/ json\ub370\uc774\ud130 \uc0ac\uc6a9\n\/\/ Use JSON data\napp.use(express.json());\n\n\/\/ \ud30c\uc77c \uc5c5\ub85c\ub4dc\uc6a9\n\/\/ For file upload\n\/\/app.use(express.urlencoded({ extended: true }));\n\n\/\/ POST\uba54\uc18c\ub4dc\uc6a9 parse application\/x-www-form-urlencoded\n\/\/ parse application\/x-www-form-urlencoded for POST method\napp.use(bodyParser.urlencoded({ extended: false }));\n\n\/\/ \ud3fc \ubd88\ub7ec\uc624\uae30\n\/\/ Load form\napp.get('\/', (req, res) => {\n    res.render('form')\n});\n\n\/\/ \ud3fc \ub0b4\uc6a9 \ucc98\ub9ac \ub610\ub294 \ucd9c\ub825\n\/\/ Process or output form content\napp.post('\/signupProc',(req, res) => {\n    const username = req.body.username;\n    console.log(`\ud3fc\ub370\uc774\ud130\/Form Data : ${username}`);\n    \n    if(username){\n        res.json({message: '\ub370\uc774\ud130\uc804\uc1a1\uc644\ub8cc\\nData transmission completed.'});\n    }\n})\n\n\n\/\/ \uc11c\ubc84 \uc2dc\uc791\n\/\/ Start server\nserver.listen(port, () => {\n    console.log(`\uc11c\ubc84\uac00 ${port} \ud3ec\ud2b8\uc5d0\uc11c \uc2e4\ud589 \uc911\uc785\ub2c8\ub2e4.\\nServer is running on port ${port}.`);\n});\n\n\n\/\/ module install\n\/\/ npm install body-parser cors ejs express fs\n<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \/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>FETCH FORM<\/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 \/ Remove the submit type. *\/\n            background-color: #ff8787;\n            color: white;\n            padding: 15px 15px;\n            border: none;\n            border-radius: 4px;\n            cursor: pointer;\n            font-size: 13px;\n            box-sizing: border-box;\n            white-space: nowrap; \/* \uc904\ubc14\uafc8\uae08\uc9c0 \/ No line breaks*\/\n        }\n        button:hover {\n            background-color: #ff6b6b;\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\/ID:<\/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 submit<\/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        \/\/ Get the ID value\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        \/\/ click event\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                \/\/ fetch method\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                \/\/ Receive JSON data from the server\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.\\nSignup completed successfully.';\n                    signupForm.reset();\n\n                    \/\/ \ucd94\uac00 \uac80\uc99d\uc744 \uc704\ud574 \uc774 \ubcc0\uc218\uac00 \ub2e4\ub978 \uacf3\uc5d0 \uc815\uc758\ub418\uc5b4 \uc788\ub2e4\uace0 \uac00\uc815\ud569\ub2c8\ub2e4.\n                    \/\/ Assuming you have this variable defined elsewhere for further validation\n                    \/\/isUsernameAvailable = false; \n                    \n                    \/\/ \ud398\uc774\uc9c0 \uc774\ub3d9 \uc644\ub8cc\uba54\uc138\uc9c0 \ud655\uc778\ub418\uba74 \ud14c\uc2a4\ud2b8 \n                    \/\/location.href='\/userlist';\n\n                } else {\n                    errorMessageDiv.textContent = result.error || '\ud68c\uc6d0\uac00\uc785\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.\\nSignup failed.';\n                }\n\n            } catch (error) {\n                console.error('\ud68c\uc6d0\uac00\uc785 \uc624\ub958\/Signup Error:', error);\n                errorMessageDiv.textContent = '\uc11c\ubc84\uc640 \ud1b5\uc2e0 \uc911 \uc624\ub958\uac00 \ubc1c\uc0dd\ud588\uc2b5\ub2c8\ub2e4.\\nError occurred while communicating with the server.';\n            }\n        });\n    <\/script>\n<\/body>\n<\/html>\n<\/code><\/pre>\n\n\n\n
\n\n\n\n
\ud83d\udc49\ud83c\udffb \uc2e4\ud589 \/ Run<\/p>\n\n\n\n
\u2714\ufe0f \ud130\ubbf8\ub110\uc5d0\uc11c \ub2e4\uc74c\uacfc \uac19\uc774 \uc11c\ubc84\ub97c \uc2e4\ud589\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
node server.js<\/code><\/pre>\n\n\n\n
\u2714\ufe0f \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c http:\/\/localhost:3000\uc73c\ub85c \uc811\uc18d\ud569\ub2c8\ub2e4.<\/p>\n\n\n\n
\"\"
Browser<\/figcaption><\/figure>\n\n\n\n
\u2714\ufe0f \ud14d\uc2a4\ud2b8 \ud544\ub4dc\uc5d0 \uac04\ub2e8\ud788 ‘test’\ub77c\uace0 \uc785\ub825\ud558\uace0 ‘\ud655\uc778\/submit’ \ubc84\ud2bc\uc744 \ub204\ub974\uba74 \uacb0\uacfc\ub97c \ud655\uc778 \ud560 \uc218 \uc788\uc2b5\ub2c8\ub2e4.
You can view the results by simply entering ‘test’ into the text field and clicking the ‘OK\/Submit’ button.<\/p>\n\n\n\n
\"\"
Terminal<\/figcaption><\/figure>\n\n\n\n
\u2714\ufe0f ‘\ud655\uc778\/submit’ \ubc84\ud2bc\uc744 \ub204\ub974\uba74 \ub3d9\uc2dc\uc5d0 \uc11c\ubc84\uc5d0\uc11c \ubcf4\ub0b4\ub294 \uba54\uc138\uc9c0\ub97c \ube0c\ub77c\uc6b0\uc800\uc5d0 \ucd9c\ub825\ud569\ub2c8\ub2e4.
When you click the ‘Confirm\/Submit’ button, the message sent from the server is simultaneously displayed in the browser.<\/p>\n\n\n\n
\"\"
Screenshot<\/figcaption><\/figure>\n\n\n\n
\n\n\n\n
\ud83d\udc49\ud83c\udffb \ucf54\ub4dc \uc124\uba85 \/ Code Explanation<\/p>\n\n\n\n
\u2714\ufe0f \uc5ec\uae30\uc11c \uc911\uc694\ud55c \uc810\uc740 fetch\ub97c \uc0ac\uc6a9\ud574\uc11c \uc5b4\ub5bb\uac8c \ud130\ubbf8\ub110(\uc11c\ubc84 \ubc31\uadf8\ub77c\uc6b4\ub4dc)\uacfc \uc5f0\ub3d9\ub418\ub294\uac74\uc9c0\uac00 \uac00\uc7a5 \uc911\uc694\ud569\ub2c8\ub2e4.
The crucial point here is understanding how fetch<\/code> is used to interface with the terminal (server background).<\/p>\n\n\n\n
\u2714\ufe0f server.js<\/p>\n\n\n\n
— \ube0c\ub77c\uc6b0\uc800\uc5d0\uc11c http:\/\/localhost:3000\uc744 \uc2e4\ud589\uc2dc public\ub514\ub809\ud1a0\ub9ac \ub0b4\uc758 form.ejs\ud30c\uc77c\uc744 \ubd88\ub7ec \uc635\ub2c8\ub2e4.
When you run http:\/\/localhost:3000 in your browser, the form.ejs file located in the public directory is loaded.<\/p>\n\n\n\n
app.get('\/', (req, res) => {\n    res.render('form')\n});<\/code><\/pre>\n\n\n\n
— \ubc84\ud2bc\uc744 \ub204\ub97c \uacbd\uc6b0 form.ejs\uc758 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8\uc5d0\uc11c fetch\ub97c \uc0ac\uc6a9\ud574\uc11c \ubc31\uadf8\ub77c\uc6b4\ub4dc\ub85c \ub370\uc774\ud130\uac00 \uc804\uc1a1\ub429\ub2c8\ub2e4.
When the button is clicked, data is sent to the background using fetch<\/code> within the JavaScript in form.ejs<\/code>.<\/p>\n\n\n\n
app.post('\/signupProc<\/strong>',(req, res) => {\n    const username = req.body.username;\n    console.log(`\ud3fc\ub370\uc774\ud130\/Form Data : ${username}`);\n    \n    if(username){\n        res.json({message: '\ub370\uc774\ud130\uc804\uc1a1\uc644\ub8cc\\nData transmission completed.'});\n    }\n})<\/code><\/pre>\n\n\n\n
1) fetch\ub97c \uc0ac\uc6a9\ud558\ub294 form.ejs\uc758 \uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubd80\ubd84\uc740 \uc544\ub798\uc640 \uac19\uc2b5\ub2c8\ub2e4.
The JavaScript section of form.ejs<\/code> that uses fetch<\/code> is as follows.<\/p>\n\n\n\n
const response = await fetch('\/signupProc<\/strong>', {\n      method: 'POST',\n      headers: {\n      'Content-Type': 'application\/json',\n      },\n      body: JSON.stringify(data),\n});<\/code><\/pre>\n\n\n\n
2)\ubc31\uadf8\ub77c\uc6b4\ub4dc\ub85c \uc804\uc1a1\ub41c \ub370\uc774\ud130\uac00 \uc788\uc73c\uba74 \ud130\ubbf8\ub110\uc5d0 console.log\uc640 res.json\uc73c\ub85c \ucd9c\ub825\ud569\ub2c8\ub2e4.
If data is sent in the background, it is output to the terminal using console.log<\/code> and res.json<\/code>.<\/p>\n\n\n\n
— server.js\uc5d0\uc11c res.json\uc73c\ub85c \ucd9c\ub825\ub418\uba74 json\ub370\uc774\ud130\ub97c \uac00\uc838\uc640\uc11c form.ejs\uc758 <div>\ud0dc\uadf8\uc5d0 \ucd9c\ub825\ud569\ub2c8\ub2e4.
When the output from server.js<\/code> is sent via res.json<\/code>, the JSON data is retrieved and displayed within the <div><\/code> tag in form.ejs<\/code>.<\/p>\n\n\n\n
1)html \ubd80\ubd84(\ud654\uba74\uc5d0 \ud45c\uc2dc\ub420 \uc601\uc5ed)
HTML section (the area displayed on the screen)<\/p>\n\n\n\n
<div id=\"errorMessage<\/strong>\" class=\"error-message\"><\/div>\n<div id=\"successMessage<\/strong>\" class=\"available-message\"><\/div><\/code><\/pre>\n\n\n\n
2)\uc790\ubc14\uc2a4\ud06c\ub9bd\ud2b8 \ubd80\ubd84(\ud654\uba74 \uba54\uc138\uc9c0 \ud45c\uc2dc\ub418\ub3c4\ub85d \ub3d9\uc791 \uc9c0\uc2dc)
JavaScript section (instructions to display messages on the screen)<\/p>\n\n\n\n
const errorMessageDiv<\/strong> = document.getElementById('errorMessage<\/strong>');\nconst successMessageDiv<\/strong> = document.getElementById('successMessage<\/strong>');\n\n... \uc911\ub7b5 \/ omitted ...\n\n\/\/ \uc11c\ubc84\uc5d0\uc11cjson\ub370\uc774\ud130 \ubc1b\uae30\n\/\/ Receive JSON data from the server\nconst result = await response.json();<\/strong>\n\nif (response.ok) {\n   successMessageDiv<\/strong>.textContent = result.<\/strong>message || '\ud68c\uc6d0\uac00\uc785\uc774 \uc644\ub8cc\ub418\uc5c8\uc2b5\ub2c8\ub2e4.\\nSignup completed successfully.';\n   signupForm.reset();\n\n    \/\/ \ucd94\uac00 \uac80\uc99d\uc744 \uc704\ud574 \uc774 \ubcc0\uc218\uac00 \ub2e4\ub978 \uacf3\uc5d0 \uc815\uc758\ub418\uc5b4 \uc788\ub2e4\uace0 \uac00\uc815\ud569\ub2c8\ub2e4.\n    \/\/ Assuming you have this variable defined elsewhere for further validation\n    \/\/isUsernameAvailable = false; \n                    \n    \/\/ \ud398\uc774\uc9c0 \uc774\ub3d9 \uc644\ub8cc\uba54\uc138\uc9c0 \ud655\uc778\ub418\uba74 \ud14c\uc2a4\ud2b8 \n    \/\/location.href='\/userlist';\n\n} else {\n    errorMessageDiv<\/strong>.textContent = result<\/strong>.error || '\ud68c\uc6d0\uac00\uc785\uc5d0 \uc2e4\ud328\ud588\uc2b5\ub2c8\ub2e4.\\nSignup failed.';\n}<\/code><\/pre>\n\n\n\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
\ud83d\udc49\ud83c\udffb json\ub370\uc774\ud130fetch\ubc29\uc2dd\uc758 \ub370\uc774\ud130 \uc804\uc1a1 Data transmission using the jsonDatafetch method \ud83d\udc49\ud83c\udffb fetch\ub370\uc774\ud130 \uc804\uc1a1\ubc29\uc2dd\uc740 \uc6f9\ud398\uc774\uc9c0\uc758\uc0c8\ub85c \uace0\uce68\uc5c6\uc774 \uc11c\ubc84 \ubc31\uadf8\ub77c\uc6b4\ub4dc\uc640 \ub370\uc774\ud130\ub97c \uc8fc\uace0 \ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.The fetch data transfer method allows for the exchange of data with the server in the background without refreshing the web page. \ud83d\udc49\ud83c\udffb \uc774 \ud3ec\uc2a4\ud2b8\uc5d0\uc11c \uc124\uba85\ud558\ub294 \uc18c\uc2a4\ucf54\ub4dc\ub294 \uae43\ud5c8\ube0c\uc5d0\uc11c \ub2e4\uc6b4\ubc1b\uc744 \uc218 \uc788\uc2b5\ub2c8\ub2e4.The source code described […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[9,1],"tags":[],"class_list":["post-1146","post","type-post","status-publish","format-standard","hentry","category-nodejs","category-uncategorized","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":62,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1146\/revisions"}],"predecessor-version":[{"id":6399,"href":"https:\/\/www.freelifemakers.org\/wordpress\/index.php\/wp-json\/wp\/v2\/posts\/1146\/revisions\/6399"}],"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}]}}