[내일배움캠프] 6기 6수코딩 팀 과제 유튜브 영상 추천 사이트 제작

html과 js의 연결은 ejs로 했다.

<button class="registBtn" onclick ="location.href='signup'">회원가입</button>

회원가입의 버튼에 onclick 속성으로 "location.href='signup'" 회원가입 페이지로 이동한다.

 

ejs 회원가입 페이지와 signup.js와 연결한다.

    <script src="/js/home/signup.js" defer></script>
    <title>회원가입</title>

        <form class="signup-form">
            <p><input id="email" type="text" placeholder="Email"></p>
            <p><input id="password" type="password" placeholder="Password"></p>
            <p><input id="confirm" type="password" placeholder="Password 확인"></p>
            <p><input id="nickname" type="text" placeholder="Nickname"></p>
            <p><input id="description" type="text" placeholder="한줄 소개"></p>
            <button id="signupBtn" type="button">회원 등록</button>
        </form>

req로 데이터를 받기 위해서 input 속성과 id를 부여한다.

 

signup.ejs에서 보낸 데이터를 signup.js에서 받고 클릭 속성에 함수를 부여한다.

const email = document.querySelector("#email"),
    password = document.querySelector("#password"),
    confirmPs = document.querySelector("#confirm"),
    nickname = document.querySelector("#nickname"),
    description = document.querySelector("#description"),
    signupBtn = document.querySelector("#signupBtn");

signupBtn.addEventListener("click", signup);

function signup() {
    const req = {
        email: email.value,
        password: password.value,
        confirm: confirmPs.value,
        nickname: nickname.value,
        description: description.value,
    };

    fetch("/api/signup", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(req),
    })
        .then((res) => res.json())
        .then((res) => {
            if (res.message) {
                alert(res.message);
                location.href = "/login";
            } else {
                alert(res.errorMessage);
            }
        })
        .catch((err) => {
            console.error("회원가입 중 에러 발생");
        })
}

signup 함수에 req 데이터와 api signup에 post로 요청을 보낸다.

function signup() {
    const req = {
        email: email.value,
        password: password.value,
        confirm: confirmPs.value,
        nickname: nickname.value,
        description: description.value,
    };

    fetch("/api/signup", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(req),
    })
        .then((res) => res.json())
        .then((res) => {
            if (res.message) {
                alert(res.message);
                location.href = "/login";
            } else {
                alert(res.errorMessage);
            }
        })
        .catch((err) => {
            console.error("회원가입 중 에러 발생");
        })
}

정상적으로 코드가 실행이 된다면 alert으로 res.message를 보내고 location.href = "/login" 로그인 사이트로 이동시킨다.

만약 error가 난다면 res.errorMessage를 alert으로 보낸다.

 

routes의 users.js에서 req데이터를 받는다.

const express = require("express");
const jwt = require("jsonwebtoken");
const { Users } = require("../../models");
const authMiddleware = require("../../middlewares/auth-middleware");
const router = express.Router();
const bcrypt = require("bcryptjs");

const { Users } = require("../../models");
const authMiddleware = require("../../middlewares/auth-middleware");

const bcrypt = require("bcryptjs");

Users테이블과 authMiddleware 미들웨어에 연결하고 bcrypt로 데이터베이스에 패스워드를 변환시켜서 저장한다.

 

router.post("/signup", async (req, res) => {
    const { email, password, confirm, nickname, description } = req.body;

    const emailReg = /^[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*@[0-9a-zA-Z]([-_.]?[0-9a-zA-Z])*.[a-zA-Z]{2,3}$/i;
    //이메일 형식검사
    const passwordReg = /^.{4,}$/; //password 형식 검사

/signupp api 주소로 post를 요청한다. req데이터를 받고, 이메일과 비밀번호의 설정값을 추가한다.

 

 try {
        if (!emailReg.test(email)) {
            return res.status(412).json({ errorMessage: "이메일 형식이 일치하지 않습니다." });
        }
        if (password !== confirm) {
            return res.status(412).json({ errorMessage: "패스워드가 일치하지 않습니다." });
        }
        if (!passwordReg.test(password)) {
            return res.status(412).json({ errorMessage: "비밀번호 형식이 일치하지 않습니다." });
        }
        if (!nickname) {
            return res.status(412).json({ errorMessage: "닉네임 형식이 일치하지 않습니다." });
        }
        const isExistUser = await Users.findOne({ where: { email } });
        if (isExistUser) {
            return res.status(412).json({ errorMessage: "중복된 이메일입니다." });
        }

        //암호화
        const hashPassword = await bcrypt.hash(req.body.password, 5);
        const user = await Users.create({ email, password: hashPassword, nickname, description });
        return res.status(201).json({ message: "회원 가입에 성공하였습니다." });

    } catch (err) {
        return res.status(400).json({ errorMessage: "요청한 데이터 형식이 올바르지 않습니다." });
    }
});

try catch문으로  따로 err를 캐치한다.

try문엔 회원가입의 조건을 설정한다. bcrypt로 암호를 변환 시킨채로 create로 저장한다.

 

로그인도 회원가입과 비슷한 형태를 띈다.

로그인 ejs파일에서 email,password를 input값으로 받고 버튼에 login 함수를 부여한다.

 

function login() {
    const req = {
        email: email.value,
        password: password.value,
    };

    fetch("/api/login", {
        method: "POST",
        headers: {
            "Content-Type": "application/json",
        },
        body: JSON.stringify(req),
    })
        .then((res) => res.json())
        .then((res) => {
            if (res.token) {
                location.href = "/";
            } else {
                alert(res.errorMessage);
            }
        })
        .catch((err) => {
            console.error("로그인 중 에러 발생");
        })
}

 

login api 주소에 post를 요청한다. 정상적으로 코드가 작동했다면 location.href = "/"; 메인페이지로 이동하거나 res.errorMessage를 보낸다.

제대로 작동하지 않는다면 catch로 진행된다.