모델 만들기
모델은 데이터를 가지고 있는 그 자체가 모델이 될 수 있고, 데이터를 조작, 제어해줄 수 있는 부분도 모델이 될 수 있다. src폴더에 models라는 폴더를 추가하여 UserStorage.js파일을 생성했다. 이 파일은 유저들의 로그인 정보를 담아두는 데 사용하도록 할 것이다.
// UserStorage.js
"use strict";
class UserStorage{
static #users = {
// #: 다른 외부파일에서 내부 데이터에 접근하는게 불가하도록 하는 은닉화
id: ["minjae","rkdalswo1021", "mj991021"],
password: ["1234","12345","123456"],
name: ["민재", "강민재", "강민재2"]
};
//은닉화된 데이터를 받아올 수 있도록 하는 메소드
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;
}
}
module.exports = UserStorage;//in home.ctrl.js
const users = UseStorage.getUsers("id","password");...fields는 가변 개수의 인수를 받아서 배열에 저장하는 역할을 해준다. reduce함수를 이용해서 객체를 초깃값으로 설정해주고, users에 field의 키 값이 존재할 경우, newUsers 객체에 key와 value를 지정해준다.
User 모델 만들기
현재 home.ctrl.js 파일에 유저의 데이터를 가지고 와서 유저를 검증하고 있는 로직을 구현하고 있다. 이 부분을 분리하면서 조금 더 좋은 코드로 바꿀 수 있다고 한다. 우선 models 폴더에 User.js파일을 추가한다.
지금 만들어져 있는 모델은 id,password,name에 대해서 각각의 정보만을 표현할 수 있는 상태이다. 이 부분을 이제 id에 따라 password,name까지 한꺼번에 표현하도록 구현할 예정이다.
// in UserStorage.js
static getUsersInfo(id){
const users = this.#users;
const idx = users.id.indexOf(id);
const usersKeys = Object.keys(users); // [id, password, name]
const userInfo = usersKeys.reduce((newUser, info) => {
newUser[info] = users[info][idx];
return newUser;
},{});
return userInfo;
}유저의 id와 키 값과 id의 인덱스 값을 받아와서, reduce를 통해id에 맞는 password와 name를 객체로 받아준다.id 값이 UserStorage.js파일에 없는 데이터에 없다면, 등록되지 않는 id로 판단해준다.
//User.js
"use strict";
const UserStorage = require("./UserStorage");
class User {
constructor(body){
this.body = body;
}
login() {
const body = this.body;
const { id, password } = UserStorage.getUsersInfo(body.id);
if (id) {
if (id === body.id && password === body.password){
return {success: true};
}
return {success: false, message: "비밀번호가 틀렸습니다."};
}
return {success: false, message: "등록되지 않은 아이디입니다."};
}
}
module.exports = User;위와 같은 코드를 통해서 User 클래스를 객체로 지정해주게 되면 home.ctrl.js에서 구현하는 로그인 기능 코드를 간결하게 변경시켜줄 수 있다.
// in home.ctrl.js
const process = {
login: function (request, response){
const user = new User(request.body);
const res = user.login();
return response.json(res);
},
}로그인 화면 꾸미기
프론트 UI를 꾸미는 과정을 진행해볼려고 한다. codepen의 오픈소스를 사용해보도록 하겠다.
codepen사이트에서 마음에 드는 로그인 화면을 가져와 복!붙!했다. 그리고 개발 환경에 맞게 코드를 일부 수정해주었더니, 영롱한 로그인 화면을 만날 수가 있었다.개발이 이렇게 쉬운건가?
로그인 기능이 잘 구현되는지 확인하기 위해 아이디와 비밀번호를 입력했는데, 웬걸..로그인 기능은 구현되지 않고 localhost:3000/login?라고 주소창과 함께 새 창이 열렸다..다 와서 이것이 무엇인가..꾸물꾸물 왜 그런 것인가 찾아보았다.
영어 공부도 덩달아하는군 스윽 훑어보니, fetch를 활용할 때,<form>태그에서 문제가 생긴 것 같았다. 무슨 문제인거니 해서 영상 강의 댓글을 찾아보니, 나와 같은 문제를 겪고 있는 유저를 확인할 수 있었다.
명쾌한 답변이 되었다. 그래서 <form>태그에 내장되어 있는 <button> 태그를 <p>태그로 바꿔준 후, 태그에 id = "button"로 id값을 지정해주어서 문제를 해결할 수 있었다.
느낀 점
모델을 만드는 과정이 이해가 잘 안되서 계속해서 강의를 돌려보고, 또 돌려보고를 반복했다. 모르는 메소드들도 많았던 터라 구글링을 함께하면서 계속해서 학습을 진행했던 것 같다. 그리고 오늘 처음으로 오픈소스를 활용해보는 경험을 하였다. 개발 분야에서 공유하는 문화가 잘 되어있다는 것을 느끼며 함께 성장하는 발판이 잘 만들어져 있는 것 같았다. 나도 누군가에게 오픈소스를 공유해줄 수 있을 정도로 성장했으면 좋겠다. 로그인 기능 구현은 이것으로 마무리지었고, 회원가입 기능 구현도 기대가 된다.
참고
Node.js | 백엔드 맛보기
stackoverflow | What is the meaning of "...args" (three dots) in a function definition?
JavaScript- 배열 reduce() 사용법 및 예제
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes/constructor
Create Amazing Password Forms
