1-3. 회원가입 모델 컴포넌트

키워드

상속, 재사용성

MVC 패턴에서 Model의 역할은 필요한 정보를 저장하고 서버와 통신합니다. 또한 Model은 View에 대해서 직접적으로 알고 있으면 안됩니다.

먼저 로그인 모델 컴포넌트와 회원가입 모델 컴포넌트의 부모가 될 SignModel 컴포넌트 입니다

scripts/user/signModel.js

function SignModel() {
  this.email = null;
  this.pwd = null;
}

SignModel.prototype.bindSetEmailAlert = function (callback) {
  this.setEmailAlert = callback;
};

SignModel.prototype.bindSetBtn = function (callback) {
  this.setBtn = callback;
};

SignModel.prototype.bindSetModal = function (callback) {
  this.setModal = callback;
};

SignModel.prototype.bindShowModal = function (callback) {
  this.showModal = callback;
};

SignModel.prototype.setValue = function (index, value) {
  this.inputFieldForm[index].value = value;
};

SignModel.prototype.checkValidForm = function () {
  if (this.emailFlag === true && this.pwdFlag === true) {
    this.setBtn(true);
  } else {
    this.setBtn(false);
  }
};

SignModel.prototype.setEmail = function (emailInput) {
  this.setValue(0, emailInput);

  if (this.validateEmail(emailInput)) {
    this.setEmailAlert(false);
    this.emailFlag = true;
  } else {
    this.setEmailAlert(true);
    this.emailFlag = false;
  }

  this.checkValidForm();
};

SignModel.prototype.setPwd = function (pwdInput) {
  this.setValue(1, pwdInput);

  this.pwdFlag = true;

  this.checkValidForm();
};

SignModel.prototype.validateEmail = function (email) {
  const re = /^(([^<>()[\]\\.,;:\s@\"]+(\.[^<>()[\]\\.,;:\s@\"]+)*)|(\".+\"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
  return re.test(email);
};

함수 앞에 bind prefix를 가지고 있는 함수는 controller에 의해서 뷰 컴포넌트의 함수를 callback으로 저장하는 용도입니다.

먼저 SignUp Rest API를 지원하는 request 모듈과 util 모듈을 다이나믹 로딩 합니다.

let myRequest = null;
let cognitoFlag = null;
let myExceptions = null;
let myUtils = null;

/* Checking window object if it has my request module */
if (window.hasOwnProperty('myRequest') === false) {
  import('../request.js').then((module) => {
    myRequest = module.MyRequest;
    cognitoFlag = module.cognitoFlag;
    myExceptions = module.myExceptions;
  });
}

if (window.hasOwnProperty('myUtils') === false) {
  import('../utils.js').then((module) => {
    myUtils = module.Utils;
  })
}

myRequest 모듈과 util 모듈은 closure로 구현 되어있어 항상 메모리에 남아있기 때문에 해당 모듈이 이미 전역 객체에 존재한다면 로딩하지 않아서 퍼포먼스를 향상 시킨다.

function UserInputFieldForm(type, nameKor, nameEng, inputId, infoStr) {
  this.type = type;
  this.nameKor = nameKor;
  this.nameEng = nameEng;
  this.inputId = inputId;
  this.infoStr = infoStr;
  this.value = null;
}

function SignUpModel() {
  SignModel.call(this);
  this.emailFlag = false;
  this.pwdFlag = false;
  /* Use array because of order */
  this.inputFieldForm = [
    new UserInputFieldForm(
      'email',
      '이메일',
      'email',
      'input-email',
      '잘못된 형식입니다'
    ),
    new UserInputFieldForm('password', '비밀번호', 'pwd', 'input-pwd', ''),
    new UserInputFieldForm(
      'password',
      '비밀번호 확인',
      'pwd2',
      'input-pwd2',
      '비밀번호가 일치하지 않습니다'
    ),
  ];
}

SignUpModel.prototype = Object.create(SignModel.prototype);

SignUpModel.prototype.bindSetPwdAlert = function (callback) {
  this.setPwdAlert = callback;
};

SignUpModel.prototype.bindHideModal = function (callback) {
  this.hideModal = callback;
};

SignUpModel.prototype.checkValidForm = function () {
  if (this.emailFlag === true && this.pwdFlag === true) {
    this.setBtn(true);
  } else {
    this.setBtn(false);
  }
};

SignUpModel.prototype.setPwd2 = function (pwd2Input) {
  this.setValue(2, pwd2Input);

  if (this.inputFieldForm[1].value === this.inputFieldForm[2].value) {
    this.setPwdAlert(false);
    this.pwdFlag = true;
  } else {
    this.setPwdAlert(true);
    this.pwdFlag = false;
  }

  this.checkValidForm();
};

SignUpModel.prototype.signUp = function () {
  this.email = this.inputFieldForm[0].value;
  this.pwd = this.inputFieldForm[1].value;

  return myRequest
    .signUp(this.email, this.pwd)
    .then(() => {
      const user = myUtils.getUser();
      let ret = {};
      user.email = this.email;
      myUtils.setUser(user);
      ret.redirectionURL = 'validation.html';
      return ret;
    })
    .catch((err) => {
      console.error(err);
      this.setModal(err.name, err.message);
      this.showModal();
      return;
    });
};

로그인 모델 컴포넌트에서 활용하기 위해서 UserInputFieldForm 생성자 함수를 만들었습니다.

SignUpModel 컴포넌트는 SignModel 컴포넌트를 상속 받습니다.

SignUpModel에서만 필요한 함수를 작성했습니다.

TODO & Questions

• MVC 패턴을 위해서 View 컴포넌트의 정보를 간접적으로 알아야하기 때문에 가독성이 매우 떨어지고 코드 추적이 어렵다.. 이걸 어떻게 할 수 있을까?