로그인 / 회원가입 구현해보기 (4) User data 모델링, 서버 응답 데이터처리, 로그인 화면 꾸미기

두번째 학습인데도, 사실 너무 어렵다... 이번엔 User data (회원정보 id, psword, name, 등)를

 

만들어주고, 이를 모델링하여 User.js 와 UserStorage.js 에 담아준다.

 

문자 그대로 UserStorage는 

 

"use strict";

class UserStorage {

  static #users = {

    id: ["baaams", "bodymind", "starjieun"],

    psword: ["1234", "123456", "12345678"],

    name: ["박희범", "박우상", "이지은"],

  };

  static getUsers(...fields) {

    const users = this.#users;

    const newUsers = fields.reduce((newUsers, field) => {

      if (users.hasOwnProperty(field)) {

        newUsers[field] = users[field];

      }

      return newUsers;

    }, {});

    return newUsers;

  }

  static getUserInfo(id) {

    const users = this.#users;

    const idx = users.id.indexOf(id);

    const usersKeys = Object.keys(users);

    const userInfo = usersKeys.reduce((newUser, info) => {

      newUser[info] = users[info][idx];

      return newUser;

    }, {});

    return userInfo;

  }

}

module.exports = UserStorage;

위 와 같이 DB의 기능을 하고, 이 정보들을 getUsers를 통해, id와 패스워드만 가져오거나,

 

id만 가져오거나 할 수 있고, 유저 객체는 향후 DB로 교체될 예정이다.

 

User.js는 로그인 기능을 구현한다.

 

class User {

  constructor(body) {

    this.body = body;

  }

  login() {

    const body = this.body;

    const { id, psword } = UserStorage.getUserInfo(body.id);

    if (id) {

      if (id === this.body.id && psword === this.body.psword) {

        return { success: true };

      }

      return { success: false, msg: "비밀번호가 틀렸습니다." };

    }

    return { success: false, msg: "존재하지 회원 입니다." };

  }

}

 

 

위와 같이, 로그인 함수를 통해, DB에 존재하는 아이디 조차 아닐 때,

 

 

존재하지 않는 회원임을 알리고, 로그인 성공여부(=success)를 false로 돌려준다.

 

 

존재하는 아이디지만 비밀번호가 틀린경우, 여전히 성공여부는 false, 그리고 비밀번호가

 

 

틀렸다는 메세지를 전달해준다. id 와 비밀번호가 모두 맞을 경우 success를 true로 만들어주고,

 

 

이 success를 검사하여 루트 페이지로 이동(향후 로그인 후 페이지)로 이동 할 수 있게 해준다.

 

 

로그인 html은 우선 코드펜에서 인기오픈소스를 가져왔고, 향후 내가 제작해놓은

 

 

html, css 코드로 리팩토링 해줄 예정이다. 

 

로그인 실패(success => false)

로그인 성공시 루트로 이동(success = true)