TL;DR: LWC에서 날짜와 시간을 출력할 때 국제화 모듈을 통해 Salesforce 사용자에 맞는 시간대 및 locale로 출력하는 걸 배웁니다.
Hello world~
오늘은 모든 개발자에게 고통을 주는 time zone 이야기를 하겠습니다!
커스텀 UI 개발할 때 중요한 것은 사용자가 정보를 쉽게 알아볼 수 있어야 합니다. 이런 출력 데이터 중에 datetime 타입이 흔합니다 (Salesforce 데이터를 출력하든, 외부 API에서 가져오든). Datetime을 사용자가 쉽게 알아보기 위해 해당 locale 및 time zone에 맞게 출력해야 합니다.
- Locale은 datetime이 출력되는 형식을 의미합니다. locale이 지역에 맞게 설정되지만 시간대와 다릅니다. 예시:
- 2023.12.31 — Korean locale.
- 12/31/2023 — American locale.
- 2024년 2월 1일 오후 4시 20분
- 1 Feb 2024, 4:20 PM
- Time zone은 말 그대로 시간대입니다.
- 서울은 GMT+9
- 시드니는 GMT+11
Locale
lightning-formatted-date-time은 날짜와 시간을 출력하는 데 화면을 보고 있는 Salesforce 사용자 locale을 참조합니다. 그래서 locale에 대해 크게 신경 쓰지 않아도 됩니다.
예를 들어 한국 locale을 가진 사용자가 아래 컴포넌트를 본다면,
// demo.js
myDate = "2024-02-01";
// OR
myDate = new Date(2024, 2, 1);
<!-- demo.html -->
<lightning-formatted-date-time
value={myDate}
year="numeric"
month="long"
day="numeric">
</lightning-formatted-date-time>
다음과 같은 결과가 보일 겁니다:
2024년 2월 1일
Time Zone
lightning-formatted-date-time은 locale을 그렇게 알아서 처리해 주지만, 시간대를 사용자의 기기에서 참조합니다. 만약 접속 기기와 Salesforce User의 시간대가 같으면 당연히 문제없이 잘 출력됩니다.
// demo.js
// 2024년 2월 1일 오후 4:20 (GMT+9)
// 여기서 time string이 GMT+0 기준이므로 16:20 - 09:00 = 07:20
myDate = "2024-02-01T07:20:00.000Z";
// OR
myDate = new Date(Date.UTC(2024, 2, 1, 7, 20));
<!-- demo.html -->
<lightning-formatted-date-time
value={myDate}
year="numeric"
month="long"
day="numeric"
hour="numeric"
minute="numeric">
</lightning-formatted-date-time>
결과:
2024년 2월 1일 오후 4:20
이제 사용자 기기와 Salesforce 시간대가 서로 다른 경우를 살펴봅시다. Salesforce 사용자가 한국에서 호주로 출장 갔다고 가정하겠습니다. 호주의 시간대는 GMT+11, 즉 한국보다 2시간 앞서갑니다. 사용자가 기기를 호주 시간대로 바꾸지만 Salesforce를 아직도 한국 시간대로 사용하고 있다면, 위 컴포넌트의 출력값이 달라집니다:
2024년 2월 1일 오후 6:20
똑같은 데이터이고 소스도 안 바뀌었지만, 사용자 기기의 시간대를 따라가기 때문에 아까와 다르게 출력되었습니다.
데이터 일관성을 보장하기 위해 datetime을 출력할 때 항상 Salesforce 사용자의 시간대를 참조하는 것이 좋습니다. LWC에서 국제화 모듈을 import 해서 Salesforce 사용자의 시간대를 가져올 수 있습니다:
// demo.js
import TIMEZONE from "@salesforce/i18n/timeZone";
export default class Demo extends LightningElement {
timeZone = TIMEZONE;
// 2024년 2월 1일 오후 4:20 (GMT+9)
// 여기서 time string이 GMT+0 기준이므로 16:20 - 09:00 = 07:20
myDate = "2024-02-01T07:20:00.000Z";
// OR
myDate = new Date(Date.UTC(2024, 2, 1, 7, 20));
}
<!-- demo.html -->
<lightning-formatted-date-time
value={myDate}
time-zone={timeZone}
year="numeric"
month="long"
day="numeric"
hour="numeric"
minute="numeric">
</lightning-formatted-date-time>
결과가 다시 Salesforce 사용자가 자기한테 설정한 한국 시간대에 맞게 나옵니다:
2024년 2월 1일 오후 4:20
끝! 다음 “시간”에 봐요~~
Post by Akrom