5. 회원가입 페이지

회원가입한 데이터를 몽고DB에 저장

 

-백엔드-

 

controllers - <loginController-2.js>

const asynchHandler = require("express-async-handler");
const User = require("../models/userModel");
const bcrypt = require("bcrypt");

//Post Register User, /register
const registerUser = asynchHandler(async (req, res) => {
  const { username, password, password2 } = req.body;
  const existingUser = await User.findOne({ username });

  if (existingUser) { //아이디 중복 확인
    return res.status(400).json({ message: "이미 사용 중인 아이디입니다." });
  }

  if (password === password2) { //비밀번호, 비밀번호 확인이 일치하지 않을 경우
    const hashedPassword = await bcrypt.hash(password, 10); //비밀번호 10회 해시
    const user = await User.create({ username, password: hashedPassword }); //데이터베이스 생성
    res.status(201).json({ message: "회원가입 성공" });
  }
});

module.exports = { registerUser };

 

routes - <loginRoutes-2.js>

const express = require("express");
const router = express.Router();
const { registerUser } = require("../controllers/loginController-2");

router.route("/register").post(registerUser); //POST 지정

module.exports = router;

 

app-2.js

const express = require("express");
const dbConnect = require("./config/dbConnect");
const cors = require("cors");
const app = express();

dbConnect();
app.use(cors());

app.get("/", (req, res) => {
  res.status(200).send("Hello Node");
});

app.use(express.json());
app.use(express.urlencoded({ extended: true }));

app.use("/", require("./routes/loginRoutes-2")); //loginRoutes-2 라우터 지정
app.use("/contact", require("./routes/contactRoutes-2"));

app.listen(8080, () => {
  console.log("8080 포트에서 서버 실행 중");
});

---

-프론트엔드-

 

index.js

App.js

component

  -header.js

page

  -main.js

  -add.ejs

  -update.js

  -register.js

css

  -style.css

 

App.js

import React from "react";
import Main from "./page/main";
import { BrowserRouter, Route, Routes } from "react-router-dom";
import Add from "./page/add";
import Update from "./page/update";
import Register from "./page/register";

function App() {
  return (
    <div>
      <BrowserRouter>
        <Routes>
          <Route index element={<Main />} />
          <Route path="/register" element={<Register />} /> 
          <Route path="/add" element={<Add />} />
          <Route path="/:id" element={<Update />} />
        </Routes>
      </BrowserRouter>
    </div>
  );
}

export default App;

 

page - <register.js> : 회원가입 페이지

import React, { useState } from "react";
import axios from "axios";
import RegistrHeader from "../component/registerHeader";
import { useNavigate } from "react-router-dom";

function Register() {
  const navigate = useNavigate();

  const [username, setUsername] = useState(""); //사용자 이름
  const [password, setPassword] = useState(""); //비밀번호
  const [password2, setPassword2] = useState(""); //비밀번호 확인

  const changeUsername = (e) => {
    setUsername(e.target.value);
  };
  const changePassword = (e) => {
    setPassword(e.target.value);
  };
  const changePassword2 = (e) => {
    setPassword2(e.target.value);
  };

  const registerForm = async (e) => {
    e.preventDefault();
    
    const registerData = {
      username: username,
      password: password,
      password2: password2,
    };
    
    if (username === "" || password === "" || password2 === "") {
      alert("ID, 비밀번호 입력을 해주세요.");
    } else {
      try {
        const response = await axios.post(
          "http://localhost:8080/register",
          registerData
        );
        alert(response.data.message);
        navigate("/")
      } catch (err) {
        alert(err.response.data.message);
        setUsername("");
        setPassword("");
        setPassword2("");
      }
    }
  };

  return (
    <div>
      <RegistrHeader />
      <div className="site-main">
        <h3>회원가입</h3>
        <form onSubmit={registerForm} className="register">
          <div>
            <label>아이디</label>
            <input
              type="text"
              value={username || ""}
              onChange={changeUsername}
            />
          </div>
          <div>
            <label>비밀번호</label>
            <input
              type="password"
              value={password || ""}
              onChange={changePassword}
            />
          </div>
          <div>
            <label>비밀번호 확인</label>
            <input
              type="password"
              value={password2 || ""}
              onChange={changePassword2}
            />
          </div>
          <button type="submit" className="register-btn">
            등록
          </button>
        </form>
      </div>
    </div>
  );
}

export default Register;