티스토리 뷰

728x90
반응형

회원가입 기능을 작업하다 보면 거의 필수적으로 들어가는 생년월일 부분을

라이브러리를 사용하지 않고 Input으로 관리할 때,

YYYYMMDD 혹은 YYYY-MM-DD 형식이 맞는지를 프론트에서 확인해주는 로직이 필요하다.

 

예를 들어 생년월일 파라미터에 1996-02-313 와 같이 들어갔는데 API를 호출하게 되면,

해당 회원정보에서 생년월일을 불러오는 부분에서 에러가 날 가능성이 아주 높다.

 

또 1111-22-33 과 같이 YYYY-MM-DD 형식은 지켰으나 실제 존재하지 않는 날짜의 경우도 있다.

실제적인 예로 어떤 외국인 회원분께서 22051996 과 같이 DD/MM/YYYY 의 형식으로 입력하셔서

해당 회원정보에 관련된 에러가 났던 경우가 있었다.

 

이에 정규식을 통해 자리수를 먼저 검증하고, 올바른 날짜를 입력했는 지도 함께 검증하는 로직을 작성해보자.

 

export const isValidateDateOfBirth = (dateOfBirth: string) => {
  const dateRegex = /^\d{4}\d{2}\d{2}$/; //? YYYYMMDD 형식의 정규식
  const dateRegex2 = /^\d{4}-\d{2}-\d{2}$/; //? YYYY-MM-DD 형식의 정규식
  const dateRegex3 = /^(19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])$/; //? 230613 kty YYYYMMDD 각 자리에 유효한 생년월일인지 확인
  const dateRegex4 = /^(19|20)\d{2}-(0[1-9]|1[0-2])-([0-2][1-9]|3[01])$/; //? 230613 kty YYYY-MM-DD 각 자리에 유효한 생년월일인지 확인

  if (dateRegex.test(dateOfBirth) || dateRegex2.test(dateOfBirth)) {
    if (dateRegex3.test(dateOfBirth) || dateRegex4.test(dateOfBirth)) return true;
    else return false;
  }
  return false;
};

 

위 함수는 실제로 내가 프로젝트에서 사용하고 있는 함수이다.

YYYYMMDD 혹은 YYYY-MM-DD 형식이 맞는 지 먼저 검증하고

이후에 YYYY에 1900~2099, MM에 01~12, DD에 01~31 이 들어가면 true, 이외에는 false를 리턴하게 된다.

 

이는 사용자가 잘못 입력할 수 있는 최소한의 정규식이며, 교묘하게 다른 데이터가 들어간다면

실제 존재하지 않는 날짜인데도 true를 뱉어낼 수 있으므로 결코 안전하다고 할 수 없다.

 

결론은 datePicker를 사용하자..! 

728x90
반응형
반응형
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday
링크
«   2025/01   »
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
글 보관함