LWC와 시간대의 이야기

TL;DR: LWC에서 날짜와 시간을 출력할 때 국제화 모듈을 통해 Salesforce 사용자에 맞는 시간대 및 locale로 출력하는 걸 배웁니다.

Back to the future, 1985

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