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

회원 가입 폼 - 정보 UX 선택하기

 

데이터와 기능에따라 화면을 변경하는 것으로 render 메소드와 update 메소드를 구분했다. render 메소드는 화면을 변경할 때 해당하는 컨테이너의 모든 내용을 전부 렌더링 하는 반면에 update 메소드는 해당하는 화면의 컨테이너의 기존 기능과 내용은 그대로 두고 새로운 기능이나 내용을 렌더링 한다. 

 

export default class TextField {
  private template = template;
  private container: string;
  private data: Props;  
  private updated: boolean = false;
  private validateRules: ValidateRule[] = [];

  constructor(container: string, data: Props) {
    this.container = container;
    this.data = { ...DefaultProps, ...data };

    if (this.data.require) {
      this.addValidateRule(RequireRule);
    }

    nextTick(this.attachEventHandler);
  }

  private validate = (): ValidateRule | null => {
    const target = this.data.text ? this.data.text.trim() : '';

    const invalidateRules = this.validateRules
      .filter(validateRule => validateRule.rule.test(target) !== validateRule.match);

    return (invalidateRules.length > 0) ? invalidateRules[0] : null;
  }

  private buildData = () => {
    const isInvalid: ValidateRule | null = this.validate();

    if (this.updated) {
      return {
        ...this.data, 
        updated: this.updated,
        valid: !isInvalid,
        validateMessage: !!isInvalid ? isInvalid.message : ''
      }
    } else {
      return {
        ...this.data, 
        updated: this.updated,
        valid: true,
        validateMessage: ''
      }
    }
  }

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

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

  private update = () => {
    const container = document.querySelector(`#field-${this.data.id}`) as HTMLElement;
    const docFrag = document.createElement('div');

    docFrag.innerHTML = this.template(this.buildData());
    container.innerHTML = docFrag.children[0].innerHTML;
  }

  public get name(): string {
    ...
  }

  public get value(): string {
    ...
  }

  public get isValid(): boolean {
	...            
  }

  public addValidateRule = (rule:ValidateRule) => {
    ...
  }

  public render = (append: boolean = false) => {
    ...
}

 

update 메소드를 통해서 화면을 렌더링하는 부분에서 buildData 메소드를 사용하게 된다. 이 메소드는 fields에 저장된 데이터를 가져오는 역할을 하는데 데이터의 유효성을 체크하기 위해 vaildate 메소드를 사용할 것이다. validate 메소드는 저장 되어있는 데이터를 filter 함수를 통해 순회하게된다. rule이 정규식으로 이루어져 있기때문에 데이터의 입력과 매칭이 되는지 안되는지 체크를 할것이다. boolean 값으로 체크를 하게 되면 순회하고나서 하나도 체크되는 값이 없으면 통과가 될것이고 하나라도 체크된다면 해당하는 유효성을 검증하고 메세지를 보내줄 것이다.

 

돌아와서 validate 메소드에서 체크한 값을 buildData 메소드에서 사용하기전에 buildData 메소드는 updated 값을 체크하게 된다. 그 이유는 처음 화면을 로딩했을 때 한번이라도 필드의 값의 변경이 일어났는지 아닌지의 체크를하고 한번 이상일 시에만 밸리데이션 체크값을 보낼 수 있도록 체크를 한다.

 

이렇게 실행을 하고나면 template에 buildData 메소드에서 반환하는 값을 전달한다.

 

 

 

 

https://bit.ly/37BpXiC

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

 

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

 

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