-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>