날짜 및 시간

GitLab 프론트엔드 개발에서 날짜와 시간을 올바르게 포맷하고 처리하는 방법과 주의해야 할 버그 및 테스트 방법을 설명합니다.

포맷 지정 # 디자인 가이드라인인 Pajamas에서는 다음과 같이 안내합니다 : 사용자의 위치에 따라 로컬라이즈된 날짜/시간 형식을 표시하거나, ISO 8601 표준을 따르는 비로컬라이즈 형식을 사용할 수 있습니다. UI에 날짜를 포맷할 때는 localeDateFormat 싱글톤을 사용하세요. 이 싱글톤은 사용자의 로케일 설정에 따라 날짜를 로컬라이즈합니다. 로케일을 가져오는 로직은 app/assets/javascripts/locale/index.js 의 getPreferredLocales 함수에 있습니다. 날짜를 로컬라이즈 방식으로 포맷하지 않는 formatDate 및 dateFormat 날짜 유틸리티 함수는 사용하지 마세요. // good const formattedDate = localeDateFormat.asDate.format(date); // bad const formattedDate = formatDate(date); const formattedDate = dateFormat(date); 주의 사항 # 날짜를 다룰 때 예상치 못한 동작이 발생할 수 있습니다. Date-only 버그 # Date 생성자에 yyyy-mm-dd 형식의 문자열을 전달할 때 버그가 발생합니다. MDN Date 페이지 에 따르면: 타임존 오프셋이 없을 경우, date-only 형식은 UTC 시간으로, date-time 형식은 로컬 시간으로 해석됩니다 . 이는 ISO 8601과 일치하지 않았지만 웹 호환성 때문에 변경할 수 없었던 오래된 스펙 오류 때문입니다. new Date('2020-02-02') 를 실행하면 로컬 시간으로 Sun Feb 02 2020 00:00:00 와 같은 날짜가 생성될 것으로 예상할 수 있습니다. 그러나 이 date-only 버그로 인해 new Date('2020-02-02') 는 UTC로 해석됩니다. 예를 들어, 타임존이 UTC-8이라면 UTC 기준 날짜 객체( Sun Feb 02 2020 00:00:00 UTC )가 생성된 후 로컬 UTC-8 타임존( Sat Feb 01 2020 16:00:00 GMT-0800 (Pacific Standard Time) )으로 변환됩니다. UTC보다 느린 타임존에서는 파싱된 날짜가 하루 뒤처지게 되어 예상치 못한 버그가 발생할 수 있습니다. date-only 문자열을 동일한 날짜를 유지하면서 변환하는 몇 가지 방법이 있습니다: 이 버그를 피하기 위해 특별히 만들어진 newDate 함수를 사용하세요. 이 함수는 Date 생성자를 감싸는 래퍼입니다. 문자열에 시간 구성 요소를 포함하세요. (year, month, day) 생성자를 사용하세요. 이상적으로는 Date 객체를 생성할 때 newDate 함수를 사용하여 이 버그를 걱정하지 않아도 됩니다. // good // use the newDate function import { newDate } from '~/lib/utils/datetime_utility'; newDate('2020-02-02') // Sun Feb 02 2020 00:00:00