Express.js + MySQL 회원가입 기능 연동 실습 정리

Express.js + MySQL 회원가입 기능 연동 실습 정리

2025. 7. 4. 16:54ㆍJavaScript/Express.js

오늘은 HTML 입력폼에서 회원 정보를 받아 Node.js + Express로 처리하고, MySQL에 데이터를 저장하는 과정을 실습했습니다.
기존 코드에서

SQL 문 오타와 에러 처리

등을 수정하여 완성도 있는 회원가입 기능을 구현했습니다.

📌 사용 기술 스택

Node.js (Express)
MySQL 8.0
mysql2
HTML (form)

1️⃣ MySQL 테이블 생성

CREATE DATABASE nodejs;

USE nodejs;

CREATE TABLE NODEJS_MEMBER (
  id VARCHAR(20),
  pw VARCHAR(20),
  userName VARCHAR(20),
  mbti VARCHAR(10),
  song VARCHAR(100)
);

2️⃣ DB 연결 설정 (config/db.js)

const mysql = require('mysql2')
const conn = mysql.createConnection({
    host : 'localhost',
    port : 3306,
    database : 'nodejs',
    user : 'root',
    password : '1234'
})

conn.connect()
console.log('DB연결 성공')

module.exports = conn;

3️⃣ 회원가입 라우터 (routes/user.js)

const express = require('express')
const router = express.Router()

// DB연결
const conn = require('../config/db')

// 회원가입 기능 라우팅
router.post('/join', (req, res) => {
    console.log('user join', req.body)

    // 📌 비구조화 할당
    let { id, pw, userName, mbti, song } = req.body
    console.log('ID :', id)

    // SQL 쿼리 실행 (INSERT INTO 오타 수정!)
    let sql = "INSERT INTO NODEJS_MEMBER VALUES (?,?,?,?,?)"
    conn.query(sql, [id, pw, userName, mbti, song], (err, rows) => {
        if (err) {
            console.error('회원가입 실패:', err)
            // 실패 시 alert 띄우고 로그인 페이지로 이동
            res.send(`
                <script>
                    alert("회원가입 실패! 다시 시도해주세요.");
                    window.location.href = "/login";
                </script>
            `)
        } else {
            console.log('회원가입 성공:', rows)
            // 성공 시 메인 페이지로 이동
            res.redirect('/')
        }
    })
})

module.exports = router

4️⃣ 회원가입 입력 폼 (public/join.html)

<form action="/user/join" method="post">
  <input type="text" name="id" placeholder="ID" required><br>
  <input type="password" name="pw" placeholder="Password" required><br>
  <input type="text" name="userName" placeholder="이름" required><br>
  <input type="text" name="mbti" placeholder="MBTI"><br>
  <input type="text" name="song" placeholder="좋아하는 노래"><br>
  <input type="submit" value="회원가입">
</form>

5️⃣ HTML 페이지 라우터 (routes/page.js)

const express = require('express')
const router = express.Router()
const path = require('path')

const file_path = path.join(__dirname, '..', 'public')

router.get('/', (req, res) => {
    res.sendFile(file_path + '/main.html')
})
router.get('/join', (req, res) => {
    res.sendFile(file_path + '/join.html')
})
router.get('/login', (req, res) => {
    res.sendFile(file_path + '/login.html')
})
router.get('/delete', (req, res) => {
    res.sendFile(file_path + '/delete.html')
})
router.get('/update', (req, res) => {
    res.sendFile(file_path + '/update.html')
})

module.exports = router

🧠 핵심 개념 정리

개념	설명
비구조화 할당	`let {id, pw} = req.body`처럼 객체에서 필요한 값만 추출
Express Router	라우팅 모듈을 따로 나눠 관리하는 Express 구조
mysql2	MySQL과 Node.js를 연결해주는 라이브러리
req.body	HTML에서 전송된 POST 데이터가 담기는 객체
res.redirect	서버 측에서 다른 경로로 강제 이동시킬 때 사용
res.send + JS	서버가 클라이언트에 JavaScript 코드 응답을 보낼 때 사용

✅ 실습 결과

HTML 폼으로 입력된 회원정보를
Node.js 서버가 받아서 MySQL DB에 저장하고
성공 시 메인 페이지로 리다이렉트
실패 시 alert 메시지 후 로그인 페이지로 이동

🎉 이로써 Node.js와 MySQL을 연결한 실전 회원가입 기능 구현이 완성되었습니다!
다음 시간에는 로그인, 회원삭제, 수정 기능까지 이어서 CRUD를 완성해보겠습니다 💪

Heyjinu Dev