[Node.js] 회원가입 기능 구현 (5)

저번시간에 이어서 이번에는 프론트엔드를 꾸며보고, 회원가입 기능을 구현해볼 예정이다.

우선, 로그인폼과 회원가입 프론트엔드는

https://codepen.io/

CodePen

를 이용해서 오픈소스로 했다. login.ejs에 수정을 해주었고, register.ejs를 새로만들어서 각각 css와 js를 연결해주었다.

프론트엔드 부분은 생략하겠다.

그리고 register.js를 만들어준다

 

일단 login.js에서 그대로 복사해서 login만 register로 변경해주고, 프론트엔드의(register.ejs)각각 Id와 자바스크립트의 변수를 일치시켜주겠다.

 

register.js

"use strict";

const id = document.querySelector("#id");
const name = document.querySelector("#name");
const password = document.querySelector("#password");
const confirmPassword = document.querySelector("#confirm-password");
const registerBtn = document.querySelector("#button");

registerBtn.addEventListener("click",register);
 
function register(){
    if(!id.value) return alert("아이디를 입력해주세요.");
    //if(password !== confirmPassword) return alert("비밀번호가 일치하지 않습니다."); //문제있음
    const req = {
        id : id.value,
        name : name.value,
        password : password.value,
    };

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

login.js와 조금 다른점은 나중에 post를 통해 응답(res)받은 success가 true일경우는 /login -> 즉 login화면으로 넘어가도록 하게 했다.

 

 

 

이제 라우터(index.js)로 돌아가서

router.get("/register", ctrl.output.register);
router.post("/register", ctrl.process.register);

를 추가해준다.

추가해주었으니, 이제 컨트롤러로 다시 가서 output과 process에 register를 만들어 주어야한다.

여태까지 만들었던것에 register만 추가해서 똑같은 기능을 하도록 해준다.

 

control.js

"use strict";

const User = require("../../models/User");
const UserStorage = require("../../models/UserStorage");

const output = {
    home : (req,res)=>{
        res.render("home/index");
    },
    
    login : (req,res)=>{
        res.render("home/login");
    },

    register : (req,res)=>{
        res.render("home/register");
    }
};

const process = {
   login : (req, res) => {
    const user = new User(req.body); //클라이언트 유저의 특성을 가지기 때문
    const response = user.login();
    return res.json(response);
   },

   register : (req, res) => {
    const user = new User(req.body); //클라이언트 유저의 특성을 가지기 때문
    const response = user.register();
    return res.json(response);
   },
}



//key 값만 넣어주었으니 value 는 알아서 key와 같이 생성됨.
module.exports = {
    output,
    process
}

 

 

이제 만들어주었으니 로그인과 똑같이 User.js에 register를 추가해주어야한다.  이번에도 저번시간과 같이 User.js에서 UserStorage.js에 기능을 만들고 리턴받아서 다시 또 User.js의 register 메서드가 리턴을 해서 반환한 값을 컨트롤러에서 서버에서 응답(res)받는 기능을 만들어 줄 예정이다.

 

User.js에서는 UserStorage에 save라는 메서드를 만들어줘서 success=true만 반환받으면 된다. 그 오브젝트를 다시 컨트롤러에다가 return 하기만 하면 된다.

 

User.js에는 User클래스안의 login 밑에 일단 이렇게 추가해주겠다.

register(){
        const client = this.body;
        const response = UserStorage.save(client);
        return response;
    }

 

이제 UserStorage에서 save만 만들면 된다. 코드가 이해안가면 저번(4)포스팅의 UserStorage전체코드를 보면 이해가간다.

getUserInfo밑에다가 추가해주겠다.

static save(userInfo){
        const users = this.#users;
        users.id.push(userInfo.id);
        users.name.push(userInfo.name);
        users.password.push(userInfo.password);
        console.log(users);
        return { success: true };
    }

 

값을 반환하기 전에 서버에도 제대로 데이터베이스에 회원가입한 아이디 비밀번호가 추가되었나 테스트해보기위해 콘솔창을 찍어보았다.

 

위에서부터 id,name,password,confirm-password

 

잘 추가된 모습

userInfo 매개변수가 결국은 body.req를 뜻하기 때문에 즉, post를 통해 요청한 값 (== 프론트엔드에 입력한 값)을 push를통해 추가만 해주어보고 아까말했듯이, success:true를 return해서 제대로 반환이 되면 register.js의 

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

이부분에 의해 /login으로 url이 이동하게 된다. => 로그인 페이지로 넘어간다. 

 

이미 만들어져있는 login에다가 register만 추가해서 살짝 바꾼거기때문에 이번에는 별로 어렵지 않았다. 

이제 success:true가 잘넘어가졌는지 확인해보겠다.(register에서 login으로 바뀌면 성공)

 

마지막 흰색화면은 root로 돌아간모습.

지금은 서버를 구동시키면 데이터베이스가 추가는 되지만, 서버를 종료하면 다시 초기화가 된다. 다음은 이제 데이터베이스를 연결하기전에 파일로 일단 데이터베이스를 관리해서 서버를 종료해도 유지하도록 하겠다.