외곈 World 👽🌏

🎈 date-fns

date-fns는 날짜와 시간 데이터를 다루기 위해 자바스크립트에서 유용하게 사용할 수 있는 경량화된 라이브러리이다.

✅ 라이브러리 설치

yarn add date-fns

✅ date-fns 장점

1. 단순성: date-fns는 필요한 기능만을 가져와 사용할 수 있어서 복잡성을 줄이고 필요 없는 코드를 포함하지 않는다.
2. 모듈화: 모든 함수가 독립적이므로 특정 기능만 사용하려면 필요한 모듈만 가져오면 된다.
3. 일관된 API: 날짜와 시간 처리를 위한 다양한 함수들이 통일된 방식으로 사용된다.
4. 타임존 지원 및 확장성: date-fns는 복잡한 타임존 변환 등을 지원하며, Date 객체의 복잡성을 간소화해준다.
5. 퍼포먼스: Moment.js와 비교해 가볍고 빠르게 동작하며, 번들 크기도 더 작다.

✅ date-fns 주요 사용 예시

1. parseISO()

문자열로 된 ISO 날짜를 Date 객체로 변환하는 함수.

const weddingDate = parseISO(date);

date는 ISO 8601 포맷(예: "2024-11-12T12:30:00")인 문자열로 전달되며, 이를 Date 객체로 변환해 다양한 날짜 연산에 사용된다.

2. format()

• 날짜 객체를 특정 형식으로 변환하여 문자열로 출력.
  

  format(weddingDate, 'yy.MM.dd')

  weddingDate를 yy.MM.dd 포맷(예: "24.11.12")으로 포맷팅한다.

3. getDay()

• 주어진 Date 객체에서 요일을 숫자(0~6)로 반환한다. (0은 일요일, 6은 토요일)
  

  const dayIndex = getDay(weddingDate);

  DAYS[dayIndex]와 함께 사용하여 해당 요일을 문자열로 변환할 수 있다.
  
        <div className={cx('txt-day')}>{DAYS[dayIndex]}</div>

왜 date-fns를 사용하는가?

1. 날짜 연산의 복잡성: 기본 Date 객체로 날짜 연산을 처리하려면 복잡하고 에러가 발생하기 쉬운 코드가 되기 쉽다. date-fns는 이러한 작업을 훨씬 간결하고 읽기 쉽게 만들어준다.
2. 가독성 향상: 날짜를 포맷하거나 변환하는 코드를 직접 작성하는 것보다 format() 같은 유틸리티 함수가 코드의 가독성을 높인다.
3. 유지 보수성: 내장 Date 객체 메서드는 브라우저 간 일관성이 부족할 수 있지만, date-fns는 모든 환경에서 일관되게 동작한다.