유효성 검사를 함수 체이닝으로 구현해보기

✅ 유효성 검사 함수 체이닝으로 구현해보기

프로젝트 진행 중 유효성 검사를 구현할 기회가 있었는데
처음에는 switch 문으로 타입에 따라 문자열을 리턴하는 형식으로 생각했었다.

// regEx.ts

export const regExr = {
truevalidate: (type: string) => {
    switch (type) {
      case validationType.BIRTHDAY:
        return '생년월일 형식이 맞지 않음';
      case validationType.PHONE:
        return '폰 번호 형식이 맞지 않음';
    }
  }  
}

하지만 코드리뷰에서

validation 타입이 많아질 때 괜찮을지 고려해보시면 좋을 것 같네요.
또는 validation을 2가지 또는 그 이상 조합하는 경우도 고민해보시면 좋을 것 같아요.

라는 리뷰를 받게 되었고 함수 체이닝으로 멋있게 구현해 보면 좋을 것 같다는 피드백을 받았다.

~~참고한 사이트들이 많았는데 다 기억은 나지 않지만~~

이 두 개가 가장 많이 도움이 되었다.

적용한 코드 👩🏻‍💻

// regEx.ts

export const regExr = {
  BIRTHDAY: /^(19[0-9][0-9]|20\d{2})-(0[0-9]|1[0-2])-(0[1-9]|[1-2][0-9]|3[0-1])$/,
  PHONE: /^01([0|1|6|7|8|9]?)-?([0-9]{4})-?([0-9]{4})$/,
};

// 내부 상태를 파악하고 있는 외부함수
export const regExrUtil = () => {
  let isValid = false;
  // 모든 에러를 다 보고싶은 경우가 있을 수 있으므로 사용하는 쪽에서 처리하도록 배열에 모든 에러 메시지를 담음
  let errorMessage: string[] = [];

  // 항상 자신을 반환하는 API를 노출하는 오브젝트
  const api = {
    validateBirthday(birthdate: string) {
      isValid = regExr.BIRTHDAY.test(birthdate);
      if (birthdate && !isValid) {
        errorMessage.push('생년월일 형식이 맞지 않음');
      }
      
      return api;
    },
    validatePhone(phone: string) {
      isValid = regExr.PHONE.test(phone);
      if (phone && !isValid) {
        errorMessage.push('폰 번호 형식이 맞지 않음');
      }
      return api;
    },
    getMessage() {
      return errorMessage;
    },
  };
  return api;
};

사용 예시 👩🏻‍💻

// example.ts

const errorMessage = regExrUtil()
      .validateBirthday(newValues.birthDate || '')
      .validatePhone(newValues.phone || '')
      .getMessage();

    if (errorMessage.length) {
      errorMessage.forEach((m) => {
        message.error(m);
      });

유효성 검사를 함수 체이닝으로 구현해보기

hyerinOh