먼저, 협정 세계시(UTC)를 기준으로 계산할 것인지, 로컬 시간대로 계산 할 것인지에 따라 차이가 존재한다.
UTC는 서버다 데이터 베이스에서 사용하는 표준시간대로, 로컬 시간대와 상관없이 UTC기준의 날짜와 시간을 제공한다.
toISOString() 메서드를 통해 가져오거나 다음과 같은 UTC 메서드를 통해 가져올 수 있다.
toISOString() 메서드가 ISO 8601 표준형식( 예: 2024-12-27T04:19:13.272Z )으로 UTC 시간을 반환하도록 설계되어있기 때문에 UTC 시간 기준으로 형식을 변환하는 것이라면 간단하게 다음과 같이 코드를 작성할 수 있다.
const date = new Date();
date.toISOString().slice(0, 10); // "2024-12-27"
** ISO 8601 표준형식( 예: 2024-12-27T04:19:13.272Z ) 에서 마지막 Z는 "Zulu time"을 의히마여, UTC 시간을 나타낸다. **
toISOString() 메서드를 통하지 않고 단순히 Date 객체를 문자열로 변환한 뒤 slice(0, 10)을 하면 어떻게 될까?
로컬 환경과 브라우저에 따라 Date 객체가 문자열로 변환된 형식이 달라질 수 있다. 이 경우, slice와 같이 단순한 변환은 원하는 값을 추출하지 못할 가능성이 존재한다. toISOString() 메서드를 통해 일괄된 형식으로 출력하여 사용하거나, 이후 소개 될 방식을 선택하는 것을 추천한다.
로컬 시간 기준
JavaScript의 Date 객체는 기본적으로 로컬 시간대를 반영하여 날짜와 시간을 처리하도록 설계되어 있다.
이는 JavaScript가 초기 브라우저 환경에서 사용자와의 상호작용을 위해 설계되었고, 사용자는 주로 자신의 로컬 시간대에서 동작하는 어플리케이션을 원하기 때문이다.
로컬 시간은 사용자 시스템의 시간대 설정을 기반으로 계산되기 때문에, 따라서 JavaScript의 Date 객체도 사용자의 시간대 설정을 바탕으로 계산된다.
로컬 시간대를 기준으로 날짜를 가져오기 위해서는 getFullYear, getMonth, getDate를 사용하거나 toLocaleDateString과 같은 메서드를 사용해야한다.
getFullYear, getMonth, getDate 메서드를 사용하여 날짜를 세팅한다는 것은 수동으로 포맷팅 하는 방식을 선택한 것이다.
날짜를 직접 포맷팅하는 하는 것이기 때문에, 구형 브라우저에서도 지원 가능하고, 빠르다는 장점이 있다.
// 방법(1)
function toLocalDate(date) {
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, "0");
const day = String(date.getDate()).padStart(2, "0");
return `${year}-${month}-${day}`;
}
// 방법(2)
let retValue = `${v.getFullYear().toString().padStart(4, '0')}-${(v.getMonth() + 1).toString().padStart(2, '0')}-${v.getDate().toString().padStart(2, '0')}`;
console.log(toLocalDate(new Date())); // "2024-12-27"
** padStart() 메서드를 통해 주어진 문자열 길이에 도달할 때까지 앞에서부터 0을 채워준다.
두번째로는 Date 객체에 존재하는 toLocaleDateString() 메서드를 사용하는 방법이 존재한다.
toLocaleDateString() 란?
toLocaleDateString()메서드는 JavaScript의 국제화(Intl) API를 기반으로, 현지 표준 시간대 날짜 부분을 언어에 맞춰 표현한 문자열을 반환한다. 현대의 대부분의 브라우저와 JavaScript 런타임 환경은 주로 로케일을 잘 지원한다. 하지만 특정 상황에서는 로케일 지원이 제한 될 수 있다.
위와 같은 상황을 방지하기 위해 지원되는지 확인해야 하는데, 다음과 같은 js 코드를 통해 확인하거나 Node.js에서 bash로 node -p "process.versions.icu"를 확인하여 빌드시 ICU 라이브러리가 완전 포함되었는지 확인해야한다.
로케일(locales) 에는 원하는 지역을 입력하면 되는데, 예를들어 한국은 "ko-KR", US는 "en-US", British는 "en-GB"를 입력하여 사용한다.
const date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));
// 아래 형식은 현지 시간대가 US의 America/Los_Angeles 라고 가정합니다
// US English는 월-일-년 순서를 사용합니다.
console.log(date.toLocaleDateString("en-US"));
// "12/20/2012"
// British English는 일-월-년 순서를 사용합니다.
console.log(date.toLocaleDateString("en-GB"));
// "20/12/2012"
// 한국은 연-월-일 순서를 사용합니다.
console.log(date.toLocaleDateString("ko-KR"));
// "2012. 12. 20."
// 페르시안의 이벤트. 태양력 Hijri 로 변환하기 매우 어렵습니다
console.log(date.toLocaleDateString("fa-IR"));
// "۱۳۹۱/۹/۳۰"
// 다수가 아랍어를 말하는 국가에서 아랍어는 실제 아랍 숫자를 사용합니다
console.log(date.toLocaleDateString("ar-EG"));
// "٢٠/١٢/٢٠١٢"
// 일본인을 위해 어플리케이션은 2012년은 헤이세이 24년이라는 일본 달력을 사용하길 원할 수 있습니다
console.log(date.toLocaleDateString("ja-JP-u-ca-japanese"));
// "24/12/20"
// 발리어와 같이 요청하는 언어를 지원하지 않지만 인도네이사어로 대체 언어를 지정할 경우
console.log(date.toLocaleDateString(["ban", "id"]));
// "20/12/2012"
options에는 출력 형식을 조정하는 객체가 들어가는데, { year: "numeric", month: "2-digit", day: "2-digit" }와 같은 객체가 입력되면 브라우저의 기본 설정과 무관하게 형식을 강제할 수 있다. 위의 객체가 options에 입력되면 년도는 4자리, 월과 일은 2자리로 표현된다.
하지만, toLocaleDateString() 메서드는 내장된 국제화 데이터 (Internationalization API) 를 기반으로 작동하므로 , 호출할 때마다 방대한 현지화 문자열 데이터 베이스에서 검색을 수행하는기 때문에 비효율 적일 수 있다. 대부분의 현대 브라우저에서는 이미 로케일 데이터를 캐싱하거나 최적화된 방식으로 처리하므로 일반적인 어플리케이션에서 성능 이슈는 거의 발생하지 않지만, 만약 성능이 정말 중요하다면 toLocaleDateString의 결과를 캐싱하거나 직접 포맷팅을 사용하는 것이 효율적이다.
