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

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

 

기본적으로 buildData 메소드를 통해 기준에따라 맞는 데이터를 만들고 template에 반영하게 되면 회원가입 화면 필드에 입력된 값에 따라 변경되는 일련의 작업이 이루어진다.

 

이런 전체적인 구조는 비슷하지만 각 필드마다 약간의 차이가 있다. 패스워드 필드 같은 경우 기본 밸리데이션을 제외한 추가적인 밸리데이션 구조를 갖는다. 

 

import { nextTick } from '../utils';
import { ValidateRule } from '../types';
import template from './password-field.template';
import { RequireRule } from '../constant';

enum StrongLevel {
  None = 0,
  Light,
  Medium,
  Havey,
}

type Props = {
  id: string;
  label: string;
  text?: string;
  require?: boolean;
  placeholder?: string;
  strong?: StrongLevel;
}

const StrongMessage: [string, string, string, string] = [
  '금지된 수준',
  '심각한 수준',
  '보통 수준',
  '강력한 암호',
];

const DefaultProps: Props = {
  id: '',
  label: 'label',
  text: '',
  require: true,
  placeholder: '',
  strong: StrongLevel.None,
};

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

  constructor(container: string, data: Props) {
    ...
  }

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

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

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

    if (this.data.text!.length > 0) {
      strongLevel++;
    }

    if (this.data.text!.length > 12) {
      strongLevel++;
    }

    if (/[!@#$%^&*()]/.test(this.data.text!)) {
      strongLevel++;
    }

    if (/\d/.test(this.data.text!)) {
      strongLevel++;
    }

    return {
      ...this.data, 
      updated: this.updated,
      valid: this.updated ? !isInvalid : true,
      strongMessage: strongLevel < 0 ? '' : StrongMessage[strongLevel],
      strongLevel0: strongLevel >= 1,
      strongLevel1: strongLevel >= 2,
      strongLevel2: strongLevel >= 3,
      strongLevel3: strongLevel >= 4,
    };
  }

  private validate = (): ValidateRule | null => {
    ...
  }

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

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

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

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

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

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

 

password-filed.ts는 다른 필드와 다르게 추가적으로 StrongLevel이라는 enum과 StrongMessage라는 튜플을 갖는다. 기본적으로 가지고 있는 밸리데이션 안에서 추가적으로 체크하는 밸리데이션이며 이 밸리데이션은 충족하지 않아도 데이터를 전송할 수 있다. 다만 입력된 데이터의 유효성의 단계를 체크한다. StrongLevel은 숫자 형태의 값이며 StrongMessage는 그 숫자에 따라 메세지가 달라진다.

 

이 작업은 password-filed.ts의 buildData 메소드에서 진행한다. 유효성 체크에서 만족하는 부분이 없으면 -1 값이며 각각의 밸리데이션을 만족하게되면 1씩 숫자가 올라가고 리턴할 때 해당하는 값을 전달한다.

 

 

 

 

https://bit.ly/37BpXiC

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

 

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

 

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