자바스크립트 utc 시간을 현재 로컬 타임으로 변환하기

Last Modified : 2023-12-02 / Created : 2023-08-08

2,166
View Count

주소 복사하기

자바스크립트에서 UTC 시간을 현재 방문자가 위치한 로컬 시간으로 변환하는 방법에 대하여 간략하게 알아보려고 합니다.

자바스크립트 utc 시간을 현재 로컬 타임으로 변환 방법

많은 이유로 utc 시간의 로컬 타임 변환이 필요합니다. 가장 대표적으로 다국어를 운영하는 웹사이트인 경우에도 필요할 수 있습니다. 이 경우 서버에 저장될 때 로컬 타임이 아닌 UTC로 변경해 저장하게됩니다. 그래서 서버의 값을 가져온 후 이를 로컬 타임으로 변경해 사용해야하겠죠. 로컬 타임의 변환과정은 다음과 같이 수행하게 됩니다.

1. 서버에서 가져온 시간이 UTC 시간이다.
2. 웹에서 출력할 시간은 UTC가 아닌 방문자의 로컬 타임이다.
3. 변환 후 출력한다.

이제 로컬 타임 변환 방법을 알아볼 예정입니다. 로컬 타임 변환을 위해서는 대부분 라이브러리를 많이 사용하는데요 여기서는 자주 사용되는 라이브러리 중 하나인 dayjs를 사용한 방법에 대하여 알아봅니다.

dayjs를 사용하여 utc시간에서 로컬 타임 시간 얻는 방법

먼저 만약 API를 통해 서버에서 가져온 시간이 아래와 같다고 합니다.

let utcTime = '2023-07-31T12:00:00Z';

이제 위 시간을 dayjs를 사용하여 변환하는 작업이 필요합니다. 이를 위해서 dayjs는 utc 시간을 적용할 수 있는 확장 플러그인 dayjs-plugin-utc이 존재합니다. 이를 extend() 메소드를 사용하여 아래와 같이 사용합니다.

const dayjs = require('dayjs');
const utc = require('dayjs-plugin-utc');

// UTC 플러그인 적용하기
dayjs.extend(utc);

이제 utc를 사용하여 원하는 로컬의 시간으로 변환하는 것이 가능하게 되었습니다. 위의 변수 utcTime을 적용하고 local 시간을 가져올 수 있는 local() 메소드를 적용합니다.

// dayjs에 현재의 UTC 시간을 설정
let utcDate = dayjs.utc(utcTime);

// 설정된 UTC 시간에서 로컬 시간을 반환하기
let localTime = utcDate.local();

// 변환되었는지 확인하기
console.log(localTime);

이제 출력된 콘솔창을 확인해보면 변환된 로컬 타임을 얻을 수 있습니다. 일반적으로 그대로 사용하지 않고 원하는 포맷에 맞추어 사용하므로 실제로는 아래와 같이 사용하게 될 것 입니다. 아래는 년-월-일 시:분:초의 포맷으로 출력하는 방법입니다.

let localTime = utcDate.local().format('YYYY-MM-DD HH:mm:ss');

이처럼 다양한 포맷으로 출력할 수 있게되었습니다.

여기까지 dayjs()를 사용한 로컬 타임 얻는 방법에 대하여 간략하게 알아보았습니다.

아래의 글도 찾고 계시지 않나요?

[자바스크립트] URLSearchParams를 사용하여 쿼리스트링 사용시 falsy 값 제거하는 방법

[momentjs] 오늘 날짜와 특정 날짜가 얼마나 차이나는 지 일, 시, 분 단위로 알아내기