JavaScript에서 시간 다루기

JavaScript에서 Date 객체를 직접 다루었던 내용을 정리하고자 한다.

 

1. JavaScript에서 Date 객체란?

JavaScript에서 시간과 날짜를 다룰 때 가장 기본이 되는 것이 바로 Date 객체이다.

Date 객체는 UTC기준으로 시간을 관리하지만, PC 혹은 브라우저에 설정된 로컬 시간대에 맞춰 시간을 보여준다.

UTC : 협정 세계시로, 모든 시간대의 기준이 되는 시간. 
로컬 시간 : 사용자의 시간대(타임존)에 맞게 변환된 시간.

 

2. UTC와 로컬 시간의 차이

JavaScript에서 시간을 다룰 때 UTC와 로컬 시간의 차이를 이해해야 한다.

각 지역별로 UTC를 기준으로 시간 오프셋을 가지고 있으며, 이를 통해 로컬 시간을 계산한다.

예시로 한국은 UTC+9시간 오프셋을 가진다.

const utcNow = new Date().toUTCString(); // UTC 기준 시간
const localNow = new Date().toString(); // 로컬 시간 (한국 시간 기준)

console.log(`UTC 시간: ${utcNow}`);
// UTC 시간: Thu, 05 Sep 2024 12:41:54 GMT

console.log(`로컬 시간: ${localNow}`);
// 로컬 시간: Thu Sep 05 2024 21:41:54 GMT+0900 (한국 표준시)

 

3. 타임스탬프와 getTime() 메서드

Date 객체에서 getTime() 메서드를 사용하면 타임스탬프(유닉스 시간)을 얻을 수 있다.

이 타임스탬프는 1970년 1월 1일 00:00:00 UTC부터 현재 시간까지 경과한 시간을 밀리초 단위로 반환한다.

타임스탬프는 모든 시간대에서 동일한 값을 반환하여 시간 계산이나 비교 작업에서 유용하게 쓰일 수 있다.

const timestamp = new Date().getTime(); // 현재 시간의 타임스탬프 (밀리초 단위)
console.log(`타임스탬프: ${timestamp}`);
// 타임스탬프: 1725540481134

 

4. 시간 오프셋과 타임존

각 타임존은 UTC를 기준으로 한 시간 오프셋을 가진다.

대한민국은 UTC+9, 뉴욕은 일광 절약 시간 적용 시 UTC-4, 미적용 시 UTC-5이다.

이 오프셋 값을 통해 UTC 기준 시간을 로컬 시간으로 변환할 수 있다.

 

const utcDate = new Date(Date.UTC(2024, 8, 7, 7, 0, 0)); // UTC 시간 설정
console.log(utcDate.toLocaleString('ko-KR', { timeZone: 'Asia/Seoul' })); // 한국 시간으로 변환
// 2024. 9. 7. 오후 4:00:00

 

5. 로컬 시간에서 다른 타임존의 시간으로 변환

로컬 시간을 기준으로 변환하거나, 다른 타임존으로 변환해야 할 때가 있다.

이를 위해 타임스탬프와 시간 계산하는 방법을 사용해야 한다.

타임존 오프셋값을 가져오는 방법은 getTimezoneOffset()메서드를 사용하면 된다.

const now = new Date();
const offset = now.getTimezoneOffset(); // 분 단위로 로컬 시간과 UTC의 차이를 반환
console.log(`UTC와 로컬 시간의 차이 (분 단위): ${offset}`);
// UTC와 로컬 시간의 차이 (분 단위): -540

대한민국의 경우 -540으로 반환되는 것을 알 수 있다.

음수로 반환 된 이유는 로컬 시간이 UTC보다 빠르기 때문이다.

반대로 양수로 반환된다면 이는 로컬 시간이 UTC보다 느리다는 것을 의미한다.

 

대한민국의 타임존(로컬 시간)에서 현재 시간을 미국 동부 일광 절약 시간과 미국 동부 표준시 각각 변환된 시간을 받고자 한다면 어떻게 해야 할까?

미국 동부 일광 절약시간과 미국 동부 표준시의 타임존 오프셋값을 이미 알고 있다면 아래와 같이 코드를 작성해볼 수 있다.

// 로컬 시간 생성
const koreaDate = new Date();

// 현재 로컬 시간의 타임스탬프(ms)
const koreaTimestamp = koreaDate.getTime();
const koreaTimezoneOffset = -(koreaDate.getTimezoneOffset());

const edtTimezoneOffset = -240; // 미국 동부 일광 절약 시간
const estTimezoneOffset = -300; // 미국 동부 표준시

// 오프셋을 밀리초로 변환
const koreaOffsetMilliseconds = koreaTimezoneOffset * 60 * 1000;
const edtOffsetMilliseconds = edtTimezoneOffset * 60 * 1000;
const estOffsetMilliseconds = estTimezoneOffset * 60 * 1000;

// 로컬 시간의 타임스탬프를 UTC로 변환
const utcTimestamp = koreaTimestamp - koreaOffsetMilliseconds;

// UTC 타임스탬프에서 EDT와 EST로 각각 변환
const edtTime = new Date(utcTimestamp + edtOffsetMilliseconds); // EDT로 변환
const estTime = new Date(utcTimestamp + estOffsetMilliseconds); // EST로 변환

console.log(`대한민국 시간 (KST): ${koreaDate}`);
// 대한민국 시간 (KST): Thu Sep 05 2024 22:11:34 GMT+0900 (한국 표준시)

console.log(`UTC 시간: ${new Date(utcTimestamp).toUTCString()}`);
// UTC 시간: Thu, 05 Sep 2024 04:11:34 GMT

console.log(`미국 동부 일광 절약 시간 (EDT): ${edtTime}`);
// 미국 동부 일광 절약 시간 (EDT): Thu Sep 05 2024 09:11:34 GMT+0900 (한국 표준시)

console.log(`미국 동부 표준시 (EST): ${estTime}`);
// 미국 동부 표준시 (EST): Thu Sep 05 2024 08:11:34 GMT+0900 (한국 표준시)

출력해보면 한국 표준시로 보여지지만 날짜와 시간은 변환하고자 하는 자역의 시간과 같다는 것을 확인알 수 있다.

 

만약, 한국 표준시가 보여지는 것이 거슬린다면

UTC 타임스탬프에서 EDT와 EST로 각각 변환
const edtTime = new Date(utcTimestamp + edtOffsetMilliseconds); // EDT로 변환
const estTime = new Date(utcTimestamp + estOffsetMilliseconds); // EST로 변환


console.log(`대한민국 시간 (KST): ${koreaDate}`);
// 대한민국 시간 (KST): Thu Sep 05 2024 22:14:50 GMT+0900 (한국 표준시)

console.log(`UTC 시간: ${new Date(utcTimestamp).toUTCString()}`);
// UTC 시간: Thu, 05 Sep 2024 04:14:50 GMT

console.log(`미국 동부 일광 절약 시간 (EDT): ${edtTime.toLocaleString('en-US', { timeZone: 'America/New_York' })}`);
// 미국 동부 일광 절약 시간 (EDT): 9/4/2024, 8:14:50 PM

console.log(`미국 동부 표준시 (EST): ${estTime.toLocaleString('en-US', { timeZone: 'America/New_York' })}`);
// 미국 동부 표준시 (EST): 9/4/2024, 7:14:50 PM

이처럼 미국 동부 시간대로 명시적으로 표시하는 방법도 있다.

 

끝!