Node.js | 로그인&회원가입 04

회원가입 화면 만들기

로그인 기능을 구현했을 때와 같이 라우팅을 설정해준다.

// in index.js

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

// in home.ctrl.js

const output = {
    hello: function (request,response){
        response.render("home/index");
    },

    login: function (request,response){
        response.render("home/login");
    },

    register: function (request, response){ // 추가된 코드
        response.render("home/register");
    }
};

login.ejs파일의 양식을 가져와서 회원가입 형식으로 수정해준다. 로그인 폼에 이름과 비밀번호 확인 폼 정도를 추가해주었다.

회원가입 요청

login.js의 형식을 받아와 구현하고자 하는 부분만 수정해주었다. 회원 가입에 성공했을 때는 로그인 화면으로 넘어와 로그인을 할 수 있도록 구현해주었다. 그리고 회원가입 시, 아이디는 무조건적으로 입력해주어야 하도록 해주었고, 비밀번호와 비밀번호 확인 값이 다를 경우 알람을 띄우도록 구현하였다.

// register.js
"use strict";

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

registerButton.addEventListener("click", register);

function register() {
  	
  	if(!id.value) return alert("아이디를 입력해주세요");
    if (confirmPassword.value !== password.value){
        return alert("비밀번호가 일치하지 않습니다.")
    }
    
    const request = {
        id : id.value,
        name: name.value,
        password : password.value,
    };
    
    fetch('/register',{
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify(request),
      }).then((response) => response.json())
      .then((response) => {
          if (response.success){
              location.href = "/login";
          } else {
              alert(response.message);
          }
        })
        .catch((error) =>{
            console.error(new Error("회원가입 중 에러 발생"));
        });
}

회원가입 라우팅&기능구현

회원가입은 로그인 정보를 받아서 접속 시에 정상적으로 로그인하도록 해주는 기능이다. 따라서 UserStorage에 로그인 데이터를 저장해주도록 구현해주면 된다.

//in User.js
class User{
  constructor(body){
    this.body = body;
  }
  
  //...생략
  
  // 추가된 코드
  
    register() {
        const client = this.body;
        UserStorage.save(client); 
    }
}

module.exports = User;

// in UserStorage.js

class UserStorage{
    static #users = {
        id: ["minjae","rkdalswo1021", "mj991021"],
        password: ["1234","12345","123456"],
        name: ["민재", "강민재", "강민재2"]
    };
	
	//..생략

	//추가된 코드

    static save(userInfo){
        const users = this.#users;
        users.id.push(userInfo.id);
        users.password.push(userInfo.password);
        users.name.push(userInfo.name);
    }
}

module.exports = UserStorage;

다음과 같이 save 메소드를 통해서 유저의 정보를 users에 저장할 수 있다. 그러나 위 코드는 문제점이 존재한다. 우리가 회원가입 시에는 탈퇴하기 전까지 users에 계속해서 데이터를 담고 있어야 한다. 하지만 위 코드는 서버를 재가동시키게 되면 받은 데이터가 유실 되는 문제를 야기시킨다.

따라서 위 문제를 해결하기 위해서 데이터를 파일 안에 저장하도록 해야한다. 다음 포스팅에서 이어서 진행해보도록 하겠다. 일단 지금까지 한 부분들은 github에 올려놓으려고 한다.

https://github.com/m1njae/login-lecture

참고

[Node.js] 백엔드 맛보기