1. 아래 사이트를 통한 로그인 페이지 및 회원가입 페이지 구현

 

화면 오픈소스 사이트, codepen

1. https://codepen.io 접속 2. Search Codepen... 에 각종 테마 검색 3. 원하는 테마 선택 후 코드 확인 및 아래의 Comments 확인 4. Comments 클릭 후 가장 아래에 License 확인하기 Copyright (c) 2022 by Aigars Silkalns (https:

data-science-study.tistory.com

 

 -로그인 페이지

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>로그인</title>
        <style>
            ul {list-style:none;}
        </style>
        <script src="/js/home/login.js" defer></script>
        <link rel="stylesheet" href="/css/home/login.css">
    </head>
    <body>
        <div class="login-page">
            <div class="form">
              <form class="login-form">
                <input id="id" type="text" placeholder="아이디"/>
                <input id="pw" type="password" placeholder="비밀번호"/>
                <p id="button">login</p>
                <p class="message">Not registered? <a href="/register">Create an account</a></p>
              </form>
            </div>
          </div>
    </body>
</html>

<!-- Copyright (c) 2022 by Aigars Silkalns (https://codepen.io/colorlib/pen/rxddKy) -->

 

 -회원가입 페이지

<!DOCTYPE html>
<html lang="ko">
    <head>
        <meta charset="UTF-8">
        <title>회원가입</title>
        <style>
            ul {list-style:none;}
        </style>
        <script src="/js/home/register.js" defer></script>
        <link rel="stylesheet" href="/css/home/login.css">
    </head>
    <body>
        <div class="login-page">
            <div class="form">
              <form class="login-form">
                <input id="id" type="text" placeholder="아이디"/>
                <input id="name" type="text" placeholder="이름"/>
                <input id="pw" type="password" placeholder="비밀번호"/>
                <input id="confirm-pw" type="password" placeholder="비밀번호확인"/>
                <p id="button">SIGN UP</p>
                <p class="message">Already registered? <a href="/login">login</a></p>
              </form>
            </div>
          </div>
    </body>
</html>

<!-- Copyright (c) 2022 by Aigars Silkalns (https://codepen.io/colorlib/pen/rxddKy) -->

 

 

2. 회원가입 요청 에 대한 동작을 위해 register.js 파일 생성(login.js 파일과 동일하게 public > js > home 폴더에서 관리)

"use strict";

const id = document.querySelector("#id"),
      name = document.querySelector("#name"),
      pw = document.querySelector("#pw"),
      confirmPw = document.querySelector("#cofirm-pw"),
      registerBtn = document.querySelector("#registerBtn");

registerBtn.addEventListener("click", register);

function register() {
    const req = {
        id: id.value,
        name: name.value,
        pw: pw.value,
        confirmPw: confirmPw.value,
    };

    fetch("/register", {   // register 경로에서
        method: "POST",    // http 메소드 중 POST라는 메소드로 데이터 전달
        headers: {         // 전달하는 데이터가 json 형식이라는 것을 명시
            "Content-Type": "application/json",
        },
        body: JSON.stringify(req) // JSON 객체는 문자열로 감싸져서 출력됨
                                  // 그냥 req는 {id: "id", pw: "pw"}형태, JSON.stringify(req)는 {"id": "id", "pw": "pw"} 형태
    })
        .then((res) => res.json())
        .then((res) => {
            if (res.success) {          // res.success가 true이면
                location.href = "/login"     // "/login" 경로로 이동
            } else{
                alert(res.msg);         // res.success가 false이면 res에 있는 msg를 경고창으로 띄움
            }
        })
        .catch((err) => {   // 회원가입 중 에러 발생 시 console에 에러 표시
            console.error(new Error("회원가입 중 에러 발생")); // 
        });
}

 -기본적으로 login.js의 코드를 복사하여 사용

 

3. User.js와 UserStorage.js파일에도 회원가입 관련 기능 구현

// UserStorage.js

// class UserStorage{}안에 static save 변수 추가
static save(userInfo) {             // User.js에서 client(=this.body)를 인자로 받아옴
  const users = this.#users;        // UserStorage 클래스 내의 #users 객체를 받아와
  users.id.push(userInfo.id);       // 객체 안의 각 리스트에 id, name, pw을 push하여 저장
  users.name.push(userInfo.name);
  users.pw.push(userInfo.pw);
  return { success: true };         // 전부 제대로 저장이 되었다면 success: true 반환
}
// User.js

// class User{} 안에 register() 추가
register() {
  const client = this.body;
  const response = UserStorage.save(client); //constructor에서 넘겨준 body를 그대로 저장하고 UserStorage의 save함수로 넘겨줘 입력한 정보를 저장
  return response; // UserStorage의 save 함수를 실행하여 반환된 success: true값을 똑같이 반환해줌
                   // 반환한 값에 따라 success: true이면 register.js에서 '/login'경로로 이동하라는 명령을 실행
}

 

 

4. Controller인 home.ctrl.js파일에도 User.js파일에서 register함수 처리에 대한 컨트롤을 위해 process에 register 추가

// home.ctrl.js

// 원래 login()만 있던 process 객체에 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);
    },
};

 

 

5. index.js에도 /register경로에서의 데이터를 post로 받기 위해 코드 추가

router.get('/register', ctrl.output.register);    // '/register'경로로 들어가면 출력되는 화면 연결
router.post('/register', ctrl.process.register);  // 'register'경로에서 입력되는 데이터 post로 받기
저작자표시

'back-end > Javascript' 카테고리의 다른 글

[Node.js] 파일DB로 회원가입 구현  (0) 2022.12.12
[Node.js] 파일DB로 로그인 구현  (0) 2022.12.12
[Node.js] 로그인 모델 구현  (0) 2022.12.01
[Node.js] 서버에서 받은 데이터에 따라 프런트 동작 처리하기  (0) 2022.11.30
[Node.js] fetch를 이용해 프런트의 정보를 서버로 보내기  (0) 2022.11.30

+ Recent posts

티스토리툴바