시간을 다루는 프로그래밍 기술(with date-fns)

date-fns 라이브러리는 JavaScript에서 날짜와 시간을 다루는데 매우 유용한 도구입니다. 시간을 다루는 라이브러리는 day.js, moment.js, luxon 등이 있지만 date-fns는 더 작은 크기와 모듈화, 그리고 불변성을 지원하는 현대적인 대안으로 인기가 있는 라이브러리입니다. 이 글에서는 date-fns를 활용하여 시간 데이터를 다루는 프로그래밍 스킬을 주제별로 나누어 소개합니다.

사용 기술

javascript
date-fns

Skills

1. 현재 날짜와 시간 가져오기

가장 기본적이면서 필수적인 스킬입니다. new Date()로 현재 날짜와 시간을 얻을 수 있습니다.

const now = new Date()

2. 특정 날짜와 시간 설정하기

setHours, setMinutes 등의 함수를 사용해 특정 날짜와 시간을 설정합니다.

const specificTime = setHours(setMinutes(new Date(), 30), 17) // 오후 5시 30분으로 설정

3. 날짜 포맷팅하기

format 함수를 사용해 날짜를 다양한 형식으로 표현할 수 있습니다.

const formattedDate = format(new Date(), 'yyyy-MM-dd') // '2023-01-01' 형식

4. 특정 기간 더하기 및 빼기

addDays, subMonths 같은 함수로 특정 기간을 더하거나 뺄 수 있습니다.

const oneWeekLater = addDays(new Date(), 7)
const oneMonthAgo = subMonths(new Date(), 1)

5. 특정 요일까지 남은 일수 계산하기

다음 특정 요일까지 남은 일수를 계산합니다.

const today = new Date()
const nextMonday = nextDay(today, 1)
const daysUntilMonday = differenceInDays(nextMonday, today)

6. 두 날짜 사이의 차이 계산하기

differenceInDays 함수를 사용해 두 날짜 사이의 차이를 계산합니다.

const start = new Date(2023, 0, 1) // 2023년 1월 1일
const end = new Date(2023, 11, 31) // 2023년 12월 31일
const diffDays = differenceInDays(end, start)

7. 동일한 날짜인지 비교하기

isSameDay 함수로 두 날짜가 동일한 날짜인지 확인합니다.

const isSame = isSameDay(new Date(2023, 0, 1), new Date('2023-01-01T05:00:00.000Z'))

8. 윤년 확인하기

isLeapYear 함수로 특정 연도가 윤년인지 확인합니다.

const isLeap = isLeapYear(new Date(2023, 0, 1))

9. 날짜 유효성 검사하기

잘못된 날짜 형식을 걸러내는 데 필요합니다.

const isValidDate = isValid(new Date('2023-02-30')) // false 반환

10. 로컬과 UTC 사이 변환하기

utcToZonedTime, zonedTimeToUtc 함수로 변환할 수 있습니다.

import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz'

const nowUTC = utcToZonedTime(new Date(), 'UTC')
const nowLocal = zonedTimeToUtc(nowUTC, 'Local')

11. 특정 포맷에 맞는 날짜 파싱하기

사용자가 입력한 날짜 문자열을 Date 객체로 변환합니다.

import { utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz'

const nowUTC = utcToZonedTime(new Date(), 'UTC')
const nowLocal = zonedTimeToUtc(nowUTC, 'Local')

12. 날짜를 상대적 형식으로 표시하기

'3일 전', '2시간 후'와 같은 형식으로 표시합니다.

const relativeDate = formatDistanceToNow(subDays(new Date(), 3)) // '3일 전'

13. 특정 날짜가 과거인지 미래인지 확인하기

isPast, isFuture 함수를 사용해 날짜가 과거인지 미래인지 확인합니다.

const isPastDate = isPast(new Date('2023-01-01'))

14. 특정 기간 동안의 날짜 배열 생성하기

이 기능은 date-fns와 JavaScript의 for문을 사용하여 구현할 수 있습니다. 예를 들어, 한 달 동안의 모든 날짜를 배열로 만드는 예시입니다. 이 코드는 주어진 달의 시작일부터 종료일까지 모든 날짜를 순회하며 배열에 추가합니다.

import { addDays, startOfMonth, endOfMonth } from 'date-fns'

const getDatesOfMonth = (date) => {
  const start = startOfMonth(date)
  const end = endOfMonth(date)

  let dates = []
  for (let day = start; day <= end; day = addDays(day, 1)) {
    dates.push(day)
  }

  return dates
}

const dates = getDatesOfMonth(new Date(2023, 0)) // 2023년 1월의 날짜들

15. 년도의 첫째 날과 마지막 날 구하기

연간 리포트나 계획을 세울 때 유용합니다.

const startOfYear = startOfYear(new Date())
const endOfYear = endOfYear(new Date())

16. 날짜 간격을 간단한 문자열로 표현하기

예를 들어, '2개월 5일'과 같이 간격을 문자열로 표현합니다.

const intervalString = formatDuration(
  intervalToDuration({ start: new Date(2023, 0, 1), end: new Date(2023, 1, 1) })
)

17. 시간대를 고려한 날짜 계산하기

다양한 국가의 사용자를 대상으로 할 때 중요합니다. 시간대를 고려한 날짜 계산을 위해서는 date-fns-tz와 같은 추가적인 라이브러리가 필요합니다. 이 라이브러리를 사용하여 특정 시간대의 날짜와 시간을 계산할 수 있습니다.

import { format, utcToZonedTime, zonedTimeToUtc } from 'date-fns-tz'

const date = new Date('2023-01-01T12:00:00Z')
const timeZone = 'America/New_York'

// UTC에서 뉴욕 시간대로 변환
const nyDate = utcToZonedTime(date, timeZone)

// 날짜 포맷팅
const formattedDate = format(nyDate, 'yyyy-MM-dd HH:mm:ssXXX', { timeZone })

18. 특정 날짜의 시작과 끝 시간 구하기

특정 날짜의 첫 시간과 마지막 시간을 구합니다.

const startOfDate = startOfDay(new Date())
const endOfDate = endOfDay(new Date())

19. 국제화된 날짜 포맷팅

date-fns는 다양한 언어를 지원하지만, 특정 언어의 지원을 위해서는 해당 언어의 로케일 데이터가 필요합니다. 예를 들어, 한국어는 ko, 스페인어(Spanish)는 es 를 사용합니다.

import { format } from 'date-fns'
import { ko, es } from 'date-fns/locale'

const date = new Date(2023, 0, 1)
const formattedDateKo = format(date, 'PPP', { locale: ko }) // 한국어 포맷팅
const formattedDateEs = format(date, 'PPP', { locale: es }) // 스페인어 포맷팅

20. 날짜 데이터의 유효성 검증

잘못된 날짜 데이터를 필터링하고 오류를 처리합니다.

const isValidDate = isValid(parseISO('2023-01-01'))

21. 특정 기간 내 특정 요일의 모든 날짜 구하기

특정 기간 내에서 특정 요일(예: 모든 월요일)에 해당하는 모든 날짜를 구하는 작업입니다. 이를 위해서는 시작 날짜부터 종료 날짜까지 순회하며 해당 요일을 찾아야 합니다.

import { eachWeekOfInterval, endOfYear, startOfYear, format } from 'date-fns'

const getSpecificDayOfWeekInYear = (date, dayOfWeek) => {
  const start = startOfYear(date)
  const end = endOfYear(date)

  const allWeeks = eachWeekOfInterval({ start, end })
  return allWeeks.map((week) => addDays(week, dayOfWeek))
}

const allMondays = getSpecificDayOfWeekInYear(new Date(2023, 0), 1) // 2023년의 모든 월요일

22.현재 날짜로부터 N일 후의 날짜 계산하기

현재 날짜로부터 N일 후의 날짜를 계산합니다.

import { addDays } from 'date-fns'

const getDateAfterNDays = (n) => {
  return addDays(new Date(), n)
}

const dateAfter10Days = getDateAfterNDays(10) // 오늘로부터 10일 후의 날짜

23. 특정 날짜가 포함된 분기 구하기

주어진 날짜가 포함된 연도의 분기(1분기, 2분기, 3분기, 4분기)를 계산하는 방법입니다.

import { getQuarter } from 'date-fns'

const quarter = getQuarter(new Date(2023, 5)) // 2023년 6월이 포함된 분기

이러한 스킬들은 웹 개발, 특히 프런트엔드 및 백엔드 개발에 있어서 다양한 시나리오에서 매우 유용하게 쓰일 수 있습니다. 각 스킬은 개발자가 자주 마주치는 문제를 해결하고, 사용자에게 더 나은 경험을 제공하는 데 도움이 됩니다. date-fns 라이브러리를 통해 여러분의 JavaScript 개발 능력을 한 단계 끌어올려 보세요!

목차