티스토리 뷰
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
반응형
'개발 세상 > JS&TS' 카테고리의 다른 글
[Typescript] some() 함수를 사용해서 Object의 특정 value값을 검색해보자! (0) | 2023.12.29 |
---|---|
[TypeScript] 회원가입 시 ID에 영문&숫자&일부 특수문자만 허용 가능하게 하는 정규식을 적용시켜보자! (0) | 2023.12.05 |
[Typescript] 좌표(위도/경도)를 이용해 두 지점 사이의 거리를 계산해보자! (0) | 2023.07.25 |
[JavaScript] Text Strings must be rendered within a <Text> component 관련 이슈 해결 (0) | 2022.03.03 |
[JavaScript 문법]ES6 템플릿 리터럴에 대해 알아보자 (0) | 2022.01.18 |
반응형
250x250
공지사항
최근에 올라온 글
최근에 달린 댓글
- Total
- Today
- Yesterday
링크
TAG
- 영종도데이트
- build
- ios
- gradle
- Android
- vsC
- typeScript
- JavaScript
- FlatList
- 스파르타코딩클럽
- CSS
- useEffect
- Firebase
- vscode
- 코린이
- React Native
- Mac
- Ai
- IMAGE
- app
- useState
- 앱개발
- Xcode
- React Hooks
- ChatGPT
- TS
- REACT
- It
- rn
- ReactNative
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
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 |
글 보관함