nodejs6 – fetch데이터 전송방식 / Fetch data transfer method

-json데이터fetch방식의 데이터 전송 / Fetch data transfer method

server.js

const ejs = require('ejs');
const express = require('express');
const http = require('http');
const path = require('path');
var bodyParser = require('body-parser');
const fs = require('fs');

const app = express();
const server = http.createServer(app);
const port = 3000;

// ejs settings
app.set('view engine','ejs');
app.set('views','./public');

// 정적 디렉토리 설정 : 웹서버 파일 경로
app.use(express.static('public'));

// json데이터 사용
app.use(express.json());

// 파일 업로드용
//app.use(express.urlencoded({ extended: true }));

// POST메소드용 parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }));

// 폼 불러오기
app.get('/', (req, res) => {
    res.render('form')
});

// 폼 내용 처리 또는 출력
app.post('/signupProc',(req, res) => {
    const username = req.body.username;
    console.log(`폼데이터 : ${username}`);
    
    if(username){
        res.json({message: '데이터전송완료'});
    }
})

// 리스트용
app.get('/userlist', (req, res) => {
    res.send("사용자list");
});

// 서버 시작
server.listen(port, () => {
    console.log(`서버가 ${port} 포트에서 실행 중입니다.`);
});


// module install
// npm install body-parser cors ejs express fs

/public/form.ejs

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>회원가입</title>
    <style>
        .signup-form {
            background-color: #fff;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            width: 400px;
        }
        .form-group {
            margin-bottom: 20px;
        }
        label {
            display: block;
            margin-bottom: 5px;
            font-weight: bold;
        }
        input[type="text"] {
            width: calc(100% - 80px); /* Adjust width to accommodate the button */
            padding: 10px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
            font-size: 16px;
        }
        .input-button-wrapper {
            display: flex;
            gap: 10px; /* Space between input and button */
            align-items: center;
        }
        button { /* submit 타입 제거 */
            background-color: #007bff;
            color: white;
            padding: 10px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            font-size: 16px;
            box-sizing: border-box;
        }
        button:hover {
            background-color: #0056b3;
        }
        .error-message {
            color: red;
            font-size: 0.9em;
            margin-top: 5px;
        }
        .available-message {
            color: green;
            font-size: 0.9em;
            margin-top: 5px;
        }
    </style>
</head>
<body>
    <div class="signup-form">
        <form id="signupForm" name="signupForm">
            <div class="form-group">
                <label for="username">아이디:</label>
                <div class="input-button-wrapper">
                    <input type="text" id="username" name="username" required minlength="3" maxlength="50" />
                    <button type="button" id="submitBtn">확인</button>
                </div>
                <div id="errorMessage" class="error-message"></div>
                <div id="successMessage" class="available-message"></div>
            </div>
        </form>
    </div>
    <script>
        // id값 가져오기
        const signupForm = document.getElementById('signupForm');
        const usernameInput = document.getElementById('username');
        const submitBtn = document.getElementById('submitBtn');
        const errorMessageDiv = document.getElementById('errorMessage');
        const successMessageDiv = document.getElementById('successMessage');

        // click이벤트
        submitBtn.addEventListener('click', async (event) => {
            errorMessageDiv.textContent = '';
            successMessageDiv.textContent = '';
            try {
                const formData = new FormData(signupForm);
                const data = {};
                formData.forEach((value, key) => (data[key] = value));
                
                // fetch방식
                const response = await fetch('/signupProc', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                    },
                    body: JSON.stringify(data),
                });

                // 서버에서json데이터 받기
                const result = await response.json();

                if (response.ok) {
                    successMessageDiv.textContent = result.message || '회원가입이 완료되었습니다.';
                    signupForm.reset();
                    
                    //isUsernameAvailable = false; // Assuming you have this variable defined elsewhere for further validation
                    
                    // 페이지 이동 완료메세지 확인되면 테스트 
                    //location.href='/userlist';
                } else {
                    errorMessageDiv.textContent = result.error || '회원가입에 실패했습니다.';
                }

            } catch (error) {
                console.error('회원가입 오류:', error);
                errorMessageDiv.textContent = '서버와 통신 중 오류가 발생했습니다.';
            }
        });
    </script>
</body>
</html>

Leave a Reply Cancel reply