JavaScript 날짜 포맷팅 마스터링: 네이티브 메서드에서 현대 라이브러리까지
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
웹 개발자(중급~고급)
- 날짜 포맷팅과 시간대 처리에 대한 이해가 필요한 개발자
- 다양한 브라우저와 지역별 언어 지원이 필요한 애플리케이션 개발자
- 날짜 처리 라이브러리 선택 및 사용법을 알고 싶은 개발자
핵심 요약
Intl.DateTimeFormat는 지역별 날짜/시간 포맷을 자동 처리하며, 시간대 명시가 가능date-fns라이브러리는 불변 API와 모듈성으로 작은 번들 크기 유지moment.js는 대규모이며 변경 가능한 객체를 사용하는 유지보수 중 라이브러리Luxon은IntlAPI 기반으로 시간대와 지역화 지원이 강화
섹션별 세부 요약
1. 날짜 포맷팅의 주요 과제
- 국가별 날짜 포맷 차이: "MM/DD/YYYY" vs "DD/MM/YYYY", 12시간/24시간 표기
- 시간대 처리: UTC와 지역 시간, Daylight Saving Time(절전 시간)의 영향
- 브라우저 호환성: 오래된 브라우저의
Date메서드 구현 차이 - 수동 문자열 조작:
getMonth()등으로 날짜 조합 시 오류 가능성
2. JavaScript 내장 API 사용
toString(): 사용자 친화적 문자열 생성(예: "Sun Jun 01 2025 14:30:45 GMT+0200")toUTCString(): UTC 기준 표준 형식 반환(예: "Sun, 01 Jun 2025 12:30:45 GMT")toISOString(): ISO 8601 형식 반환(예: "2025-06-01T12:30:45.123Z")toLocaleDateString()/toLocaleTimeString(): 지역별 날짜/시간 표시(예: "6/1/2025" 또는 "01/06/2025")
3. `Intl.DateTimeFormat` 사용
- 옵션 객체로 날짜 구성 요소 제어(예:
year: 'numeric',month: 'long') - 로케일 명시를 통해 일관된 결과 보장(예:
"en-US","ar-EG") - 시간대 명시 가능(예:
timeZone: 'Europe/London')
4. 커스텀 포맷팅 함수 구현
padZero()함수로 두 자릿수 패딩 처리getMonth()는 0기준이므로 +1 필요- 시간대 지원 없음 (로컬 환경 기반)
5. 날짜 처리 라이브러리 비교
date-fns:
- 불변 함수 사용(예: format(now, 'yyyy-MM-dd HH:mm:ss'))
- 모듈성으로 번들 크기 최소화
- 다국어 지원 (예: locale: enUS, locale: arSA)
moment.js:
- 대규모(67KB 미니파일)
- 변경 가능 객체 사용(예: .add(), .subtract())
- 유지보수 중 상태
Luxon:
- Intl API 기반으로 정확한 지역화
- 불변 및 체이닝 기능(예: DateTime.local().setLocale('ar'))
- 시간대 내장 지원 (예: DateTime.fromISO(..., { zone: 'America/New_York' }))
6. 상대 날짜 표현 구현
timeAgo()함수로 "5분 전", "2일 후" 표현date-fns.formatDistanceToNow()라이브러리 사용 예:
formatDistanceToNow(new Date('2025-05-31T12:00:00'), { addSuffix: true })
7. 날짜 파싱 및 ISO 형식 변환
parseDDMMYYYY()함수로 "31/05/2025" →2025-05-31T00:00:00.000Z변환date-fns.parse()로 날짜 문자열 파싱(예:parse('31/05/2025', 'dd/MM/yyyy', new Date()))
8. 최선의 실천 방법
- 서버/데이터베이스에서 UTC 저장 (예: ISO 8601)
- 시간대 명시 (예:
Date.UTC(...),Luxon.DateTime.fromISO(..., { zone: 'UTC' })) - DST(Daylight Saving Time) 처리: 수동 날짜 조작 대신 라이브러리 사용 (예:
date-fns.addDays())
결론
- 날짜 처리는
IntlAPI와date-fns/Luxon같은 라이브러리로 일관성과 정확성 유지 - UTC 저장과 시간대 명시가 필수이며, DST 처리는 라이브러리에 위임
- 모듈성과 불변 API를 활용해 성능과 유지보수성 향상