모델 분리


1. 모델 분리


서버에서 데이터를 저장 혹은 저장한 데이터를 처리하는 역할을 수행하는 것을 모델이라고 한다.

현재는 users 객체처럼 로그인 정보를 담거나 process의 로그인 정보 확인 등의 기능을 수행하는 코드가 home.ctrl, 즉 컨트롤러에 담겨있는데, 이는 바람직하지 않다. 따라서 모델을 따로 분리하고, 모델 내에서도 저장 데이터와 처리 함수를 따로 구분지을 것이다.

폴더와 파일을 다음과 같이 만들고 코드를 수정한다.

Untitled

UserStorage.js


"use Strict";

class UserStorage {
  static #users = {
    id: ["kim", "park", "choi"],
    pw: ["1234", "1q2w3e4r", "iloveyou"],
  };

  static getUsers() {
    return this.#users;
  }
}

module.exports = UserStorage;

login.js


"use strict";

const id = document.querySelector("#id"),
  pw = document.querySelector("#pw"),
  loginBtn = document.querySelector("button");

loginBtn.addEventListener("click", login);
function login() {
  const req = {
    id: id.value,
    pw: pw.value,
  };

  fetch("/login", {
    method: "POST",
    headers: {
      "Content-Type": "application/json",
    },
    body: JSON.stringify(req),
  })
    .then((res) => res.json())
    .then((res) => {
      /* if (res.success) {
        location.href = "/";
      } else {
        alert(res.msg);
      } */
    })
    .catch((err) => {
      console.error(new Error("로그인 에러"));
    });
}

home.ctrl.js


"use strict";

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

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

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

const process = {
  login: (req, res) => {
    const id = req.body.id,
      pw = req.body.pw;
    console.log(UserStorage.getUsers());
    const responce = {};
    /* if (users.id.includes(id)) {
      const idx = users.id.indexOf(id);
      if (users.pw[idx] === pw) {
        responce.success = true;
        return res.json(responce);
      }
    } */
    responce.success = false;
    responce.msg = "로그인에 실패하셨습니다.";
    return res.json(responce);
  },
};

module.exports = {
  output,
  process,
};

로그인 정보가 담긴 객체 users를 UserStorage.js로 옮긴 뒤, 해당 객체를 UserStorage class에 담았다. 이 클래스는 home.ctrl.js에서 사용할 수 있도록 모듈로 exports되었는데, 해당 클래스를 직접 변수로 사용하기 위해 users를 정적변수로 할당하였다(static).

또한, users가 모듈로 export된 다른 파일에서 직접 접근할 수 없도록 private 처리를 하였다(#).