문제 정의

사용자로부터 "2024-05-27"과 같은 형식의 날짜 문자열을 입력받아야 하는 상황이 발생했습니다. 일반적으로 <input>의 type="date"를 사용하면 브라우저에서 자동으로 유효성을 검사해주지만, 특정 상황에서는 문자열로 날짜를 직접 입력받아야 할 필요가 있었습니다. 이때, 잘못된 날짜(2월 30일 등)가 입력되지 않도록 유효성 검사를 구현해야 했습니다.

해결 과정

처음에는 JavaScript의 Date 객체를 활용하여 문자열 형식의 날짜 유효성을 직접 검사하는 방법을 구현했습니다. 이를 위해 입력된 날짜 문자열을 연, 월, 일로 분리한 후 Date 객체로 변환하고, 변환된 날짜가 실제로 유효한지 비교하는 로직을 작성했습니다.

1. 수동 유효성 검사 구현

const isValidDate = (dateString: string): boolean => {
    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;
};

// 사용 예시
console.log(isValidDate("2024-02-29")); // 윤년이므로 true
console.log(isValidDate("2024-02-30")); // 존재하지 않는 날짜이므로 false

2. date-fns 라이브러리 활용

수동으로 유효성 검사를 구현하는 과정에서 코드의 복잡성과 유지보수의 어려움을 느꼈습니다. 이를 해결하기 위해 날짜 처리에 특화된 date-fns 라이브러리를 도입하여 유효성 검사를 간소화할 수 있음을 알게 되었습니다.

date-fns를 이용한 유효성 검사 구현

import { parse, isValid } from 'date-fns';

const isValidDateWithDateFns = (dateString: string): boolean => {
    const parsedDate = parse(dateString, 'yyyy-MM-dd', new Date());
    return isValid(parsedDate);
};

// 사용 예시
console.log(isValidDateWithDateFns("2024-02-29")); // 윤년이므로 true
console.log(isValidDateWithDateFns("2024-02-30")); // 존재하지 않는 날짜이므로 false

결과

date-fns 라이브러리를 도입한 후 다음과 같은 개선 효과를 얻었습니다:

• 코드 간결성 향상: 단 몇 줄의 코드로 날짜 유효성 검사를 구현할 수 있어 코드가 훨씬 간결해졌습니다.
• 신뢰성: 검증 로직을 직접 구현하지 않고 검증을 전문으로 하는 라이브러리를 사용함으로써, 보다 신뢰할 수 있는 유효성 검사를 수행할 수 있게 되었습니다.
• 유지보수: 날짜 관련 로직을 라이브러리에 의존함으로써, 향후 날짜 형식이나 규칙이 변경되더라도 라이브러리 업데이트만으로 손쉽게 대응할 수 있었습니다.
• 개발 속도 향상: 복잡한 날짜 유효성 검사 로직을 직접 구현하지 않아도 되어 개발 속도가 빨라졌습니다.

배운 점 (인사이트)

• 라이브러리 활용의 중요성: 직접 복잡한 유효성 검사 로직을 구현하는 것보다 검증된 라이브러리를 활용하는 것이 코드의 간결성, 신뢰성, 유지보수 측면에서 훨씬 유리하다는 점을 깨달았습니다.
• 학습과 실전의 균형: 수동으로 유효성 검사를 구현해보는 과정은 날짜 처리의 내부 동작을 이해하는 데 도움이 되었지만, 실전에서는 검증된 라이브러리를 사용하는 것이 더 효율적이라는 점을 경험했습니다.
• 유효성 검사 전략의 선택: 프로젝트의 요구사항과 상황에 따라 적절한 유효성 검사 전략을 선택하는 것이 중요함을 깨달았습니다. 때로는 직접 구현하여 깊이 있는 이해를 추구하는 것도 유용하지만, 실전에서는 검증된 도구를 사용하는 것이 더 현명할 것 같습니다.