[240527 TIL] 날짜 유효성 검사

오늘은 "2024-05-27" 형식의 날짜를 가리키는 문자열을 다루는 법을 정리해보겠습니다.
유효성 검사로 2월30일 같은 없는 날짜 등을 걸러내는 방법입니다.

 

물론 애초에 input의 type 을 date 등으로 처리하면 되겠지만, 이렇게 문자열로 입력받아야 하는 상황에서 어떻게 처리하면 좋을지를 생각해봤습니다.

 

먼저 입력된 문자열을 Date 객체로 변환하고, 변환된 Date 객체의 값을 원래 입력값과 비교하여 유효한 날짜인지 검사합니다.

날짜 유효성 검사 코드

const [year, month, day] = dateString.split('-').map(Number);
const date = new Date(year, month - 1, day);

if (
    date.getFullYear() !== year ||
    date.getMonth() !== month - 1 ||
    date.getDate() !== day
) {
    return false;
}

return true;

단계별 설명

1_입력된 문자열을 분리하여 숫자로 변환:

const [year, month, day] = dateString.split('-').map(Number);

• dateString.split('-')은 문자열을 -을 기준으로 분리하여 문자열 배열을 만듭니다. 예를 들어, 입력된 날짜가 "2024-05-21"이라면 ["2024", "05", "21"] 배열을 얻습니다.
• map(Number)를 사용하여 이 배열의 각 요소를 숫자로 변환합니다. 결과적으로 [2024, 5, 21]이 됩니다.
• 배열 비구조화 할당을 사용하여 year, month, day 변수에 각각 2024, 5, 21 값을 할당합니다.

2_Date 객체 생성:

const date = new Date(year, month - 1, day);

• Date 객체를 생성할 때, 월(month)은 0부터 시작하는 인덱스로 처리됩니다. 따라서 month - 1로 입력하여 올바른 월을 지정합니다. 예를 들어, 5월은 Date 객체에서 4로 입력해야 합니다.
• new Date(2024, 4, 21)는 2024년 5월 21일을 나타내는 Date 객체를 생성합니다.

3_날짜 유효성 검사:

if ( date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day ) { return false; }

• date.getFullYear()은 Date 객체의 연도를 반환합니다. 입력된 year와 비교하여 동일한지 확인합니다.
• date.getMonth()은 Date 객체의 월을 반환합니다. 이 값은 0부터 시작하므로, 입력된 month - 1와 비교하여 동일한지 확인합니다.
• date.getDate()은 Date 객체의 일을 반환합니다. 입력된 day와 비교하여 동일한지 확인합니다.
• 만약 연도, 월, 일이 각각 일치하지 않으면 유효하지 않은 날짜로 간주하고 false를 반환합니다.

4_유효한 날짜:

return true;

 

• 위 조건들이 모두 통과되면 입력된 날짜가 유효한 것으로 간주하고 true를 반환합니다.

왜 이렇게 하는가?

이 방법을 사용하는 이유는 문자열을 숫자로 변환한 후 Date 객체로 다시 조합하여 실제 날짜로 유효한지 확인하기 위해서입니다.

 

예를 들어, "2024-02-30"과 같은 날짜는 형식상 맞을 수 있지만, 실제로 존재하지 않는 날짜입니다.

 

new Date(2024, 1, 30)로 생성하면 2024년 2월 30일이 존재하지 않기 때문에 Date 객체는

자동으로 2024년 3월 1일로 변경됩니다. 이로 인해 date.getDate()는 30이 아닌 1이 되어 유효하지 않은 날짜로 판별됩니다.

 

이 방법을 통해 입력된 날짜가 실제로 존재하는 날짜인지 확인할 수 있습니다.