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

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

 

views 폴더의 text-field.ts 구조

 

text-field는 아마 회원 가입 폼에서 가장 많이 사용하게되는 항목일 것이다. text-field.ts 파일의 구조를 알아보겠다.

 

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

type Props = {
  id: string;
  label: string;
  type: 'text' | 'email' | 'number';
  placeholder?: string;
  text?: string;
  require: boolean;
}

const DefaultProps: Props = {
  id: '',
  text: '',
  label: 'label',
  type: 'text',
  placeholder: '',
  require: false,
};

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 => {
    ...
  }

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

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

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

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

  public get name(): string {
    return this.data.id;
  }

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

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

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

  public render = (append: boolean = false) => {
    const container = document.querySelector(this.container) as HTMLElement;

    if (append) {
      const divFragment = document.createElement('div');
      divFragment.innerHTML = this.template(this.buildData());

      container.appendChild(divFragment.children[0]);
    } else {
      container.innerHTML = this.template(this.buildData());
    }
  }
}

 

text-filed.ts에도 많은 메소드들이 있지만 먼저 웹앱의 화면이 변화되는 구조를 먼저 보면, 여기도 app.ts 파일과 마찬가지로 render 함수를 통해서 변경된다.

 

차례대로 살펴보면 data에 사용될 props 타입을 정의했고, DefaultProps 변수에 아무런 데이터가 입력되지 않았을 시에 기본값으로 설정될 프로퍼티들을 정의했다.

 

TextField 클래스를 보면 app.ts와 마찬가지로 template을 사용하고 container를 통해 컨테이너가 될 엘리먼트의 아이디나 클래스 값을 정의한다. Props 타입으로 정의했던 데이터를 정의한 data필드와 update 유무체크하는 updated 변수, 유효성을 체크하는 validateRules 필드를 정의한다.

 

또한 TextField 클래스의 render 메소드에는 append라는 boolean 타입의 파라미터를 받아오는데 app.ts 와는 다르게 회원 가입 폼의 각 필드들은 innerHTML만을 사용하게되면 하나의 필드를 입력하고 다른 필드를 입력했을 시에 다른 필드를 덮어쓰게 된다. append 파라미터는 boolean 타입으로 해당하는 필드가 있을 시에 새로운 div를 생성하여 하단에 추가하는 형태로 기능을 만들것인지 아니면 기존의 필드를 새로 덮어쓰기 하여 생성할 것인지 체크하는 기능을 하게 될것이다.

 

 

 

 

https://bit.ly/37BpXiC

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

 

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

 

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