패스트캠퍼스 챌린지 32일차

회원 가입 폼 - 밸리데이션 구조 설계

 

회원 가입 폼 웹앱에 사용되는 밸리데이션 구조를 체크하는 로직을 constant.ts 파일에 만들었다. 이제 이러한 각각의 밸리데이션 룰을 어떻게 적용할 것인지에 대해 정해야 한다.

 

하나의 필드에 하나의 밸리데이션만 들어갈 수도 있지만 여러가지의 밸리데이션을 통해 유효성을 체크해야 하는 경우가 있을것이다.

 

export default class App {
  ...
  fields: AnyObject[];

  constructor(container: string, data: AnyObject = {}) {
    ...
    
    this.fields = [];
    this.initialize();
    
    ...
  }

  private initialize = () => {
    const nameField = new TextField('#required-fields', { 
      id: 'name', label: '이름', type: 'text', placeholder: '이름을 입력해주세요', require: true,
    });

    const idField = new TextField('#required-fields', { 
      id: 'id', label: '아이디', type: 'text', placeholder: '아이디를 입력해주세요', require: true,
    });

    const emailField = new TextField('#required-fields', { 
      id: 'email', label: '이메일', type: 'email', placeholder: '이메일을 입력해주세요', require: true,
    });
    
    const passwordField = new PasswordField('#required-fields', { 
      id: 'password', label: '비밀번호', placeholder: '비밀번호를 입력해주세요', 
    });

    const addressField = new AddressField('#optional-fields', {
      id: 'address', label: '배송지 주소',
    });

    idField.addValidateRule(CantContainWhitespace);
    idField.addValidateRule(CantStartNumber);
    idField.addValidateRule(MinimumLengthLimit(3));

    emailField.addValidateRule(CantContainWhitespace);

    this.fields.push(nameField);
    this.fields.push(idField);
    this.fields.push(emailField);
    this.fields.push(passwordField);
    this.fields.push(addressField);
  }

  private validFieldMonitor = () => {
    ...
  }

  private onSubmit = (e: Event) => {
    ...
  }

  public render = () => {
    this.container.innerHTML = this.template(this.data);
    this.fields.forEach(field => {
      field.render(true);
    });

    this.container.addEventListener('submit', this.onSubmit);
  }
}

 

App 클래스에 fields 배열엔 AnyObject 타입의 배열을 받는다. 또한 App 생성자함수에선 처음에 모든 기능을 초기화하는 initialize 메소드를 실행하는데 이 때, 각 필드별로 사용될 인스턴스를 생성하고 해당하는 인스턴스에 addVaildateRule 메소드를 통해 여러가지 밸리데이션을 등록한다. initalize 메소드를 보면 idField에는 세가지의 밸리데이션이 추가되고 emailField에는 한가지의 밸리데이션이 추가된다.

 

처음 생성시 초기화 작업이 되고나서 App 인스턴스의 render 메소드를 통해 해당하는 View 클래스의 인스

턴스에 추가된 render 메소드를 호출해주면 UI 전체가 만들어지는 형태가 될 것이다.

 

 

 

 

https://bit.ly/37BpXiC

패스트캠퍼스 [직장인 실무교육]

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다.

 

#패스트캠퍼스 #패캠챌린지 #직장인인강 #직장인자기계발 #패스트캠퍼스후기 #김민태의프론트엔드아카데미:제1강JavaScript&TypeScriptEssential