[Javascript] 현재 시간을 항상 한국 날짜/시간으로 표시하기 (UTC to KST)

 

Javascript에서 현재 시간을 표시하기 위해서 'new Date()'를 사용하였습니다.

[Javascript] 현재 날짜, 시간 구하기

 

'new Date()'를 사용해서 가져온 현재 날짜와 시간은

기본적으로 사용자의 PC에 설정 된 표준 시간대를 기준으로 표시됩니다.

아마 이 글을 보는 대부분의 사람들은 표준시간대가 한국 표준시(UTC+09:00)로 설정되어 있을 것입니다.

그래서, 'new Date()'를 사용해서 현재 시간을 가져오면

현재 한국 시간을 기준으로 날짜와 시간이 표현됩니다.

그리고, 만약 사용자 PC의 표준시간대가

한국 표준시가 아닌 미국이나 캐나다에서 사용하는 동부 표준시나 중부 표준시로 설정이 되어 있다면,

해당 표준시간대에 해당하는 날짜와 시간이 보여질 것입니다.

 

 

현재 시간 확인하기

먼저 사용자 PC의 표준 시간대를 변경해 보면서, 현재 시간을 확인해 보도록 하겠습니다.

 

사용자 PC의 표준시간대를 변경한 후, 새로 고침해서 변경된 시간을 확인해 보세요.

현재 PC의 표준시간대 확인은 아래 포스팅을 확인하세요.

Windows 10 표준 시간대 설정하기

const curr = new Date();

document.writeln(curr);

 

사용자 PC의 표준 시간대를 변경하면,

new Date()는 표준 시간대에 맞는 시간을 보여주는 것을 확인 할 수 있습니다.

 

 

PC의 표준시간대 설정 관계 없이 한국 시간 표시하기 

// 1. 현재 시간(Locale)
const curr = new Date();
document.writeln("현재시간(Locale) : " + curr + '<br>');

// 2. UTC 시간 계산
const utc = 
      curr.getTime() + 
      (curr.getTimezoneOffset() * 60 * 1000);

// 3. UTC to KST (UTC + 9시간)
const KR_TIME_DIFF = 9 * 60 * 60 * 1000;
const kr_curr = 
      new Date(utc + (KR_TIME_DIFF));

document.writeln("한국시간 : " + kr_curr);

1. 현재 시간 (locale 시간) 가져오기

const curr = new Date();

먼저 현재 시간을 가져옵니다.

이렇게 시간을 가져오면 사용자 PC에 설정된 시간대 기준으로 시간을 표시해 줍니다.

(사용자 PC의 시간대가 이미 KST(한국시간)로 되어 있으면,

위 코드의 계산식이 무의미해 보일 수도 있으므로, 

유의미한 결과를 보고 싶다면 사용자 PC의 시간대를 변경한 후,

이 페이지를 새로 고침해서 확인해 보세요.)

Windows 10 표준 시간대 설정하기

 

2. UTC 시간 계산

const utc = curr.getTime() + (curr.getTimezoneOffset() * 60 * 1000);

getTimezoneOffset() 이라는 함수를 이용하여 UTC 시간을 계산합니다.

 

 getTimezoneOffset() 함수 

dateObj.getTimezoneOffset()

getTimezoneOffset() 함수는 현재 사용자 PC 설정 시간대로부터 UTC 시간까지의 차이를 '분'단위로 리턴합니다.

const offset = new Date().getTimezoneOffset();
document.writeln(offset);

사용자 PC의 시간대 설정이 한국이라면 '-540'을 리턴할 것입니다.

한국 시간은 UTC 시간보다 9시간 빠르기 때문에,

UTC 시간은 한국시간으로부터 -9시간(-540분)이기 때문입니다.

만약 사용자 PC의 시간대가 중국으로 되어 있다면 '-480'을 리턴할 것입니다.

(중국 시간은 UTC 시간보다 8시간 빠릅니다.)

 

 UTC 시간 계산 

const utc = curr.getTime() + (curr.getTimezoneOffset() * 60 * 1000);

getTime() 함수는 '1970년 1월1 일 00:00:00 UTC'로부터 주어진 시간 사이의 경과시간(밀리초)를 리턴합니다.

getTime() 함수 자세히 보기

따라서, UTC 시간을 계산하기 위해

getTime()의 결과 값에

getTimezoneOffset() 함수에서 나온 분단위의 시간을 밀리초 단위로 변환하여 더해주었습니다.

 

이제 'utc'는 현재 시간을 utc 시간으로 변환한 밀리초 값입니다.

 

 

3. UTC to KST (UTC + 9시간)

const KR_TIME_DIFF = 9 * 60 * 60 * 1000;

한국 시간(KST)은 UTC시간보다 9시간 더 빠릅니다.

9시간을 밀리초 단위로 변환하였습니다.

 

const kr_curr = new Date(utc + KR_TIME_DIFF));

UTC 시간을 한국 시간으로 변환하기 위해 utc 밀리초 값에 9시간(밀리초 단위로 변환한 값)을 더해주었습니다.

그리고, 'new Date()'를 사용하여, 밀리초값을 date로 변환하였습니다.

 

이렇게 하면, 

사용자 환경의 시간대가 어떻게 설정이 되어 있든 

사용자에게 한국 시간을 보여줄 수 있습니다.

KR_TIME_DIFF 값을 변경해준다면 한국 뿐 아니라 다른 나라의 시간도 보여줄 수 있습니다.

 

---

 

Javascript에서 날짜와 시간을 다루는 방법을 더 알고 싶다면

아래의 다른 포스팅들을 참조하세요.

 

[HTML] 날짜, 시간, 년도 입력받기

[HTML] 날짜, 시간 입력 항목 기본값으로 세팅하기

[HTML] 날짜 입력 항목에 현재 시간을 기본값으로 세팅하기

[Javascript] 현재 날짜, 시간 구하기

[Javascript] Date 객체로 원하는 날짜, 시간 표현하기

[Javascript] 날짜 계산하기 (년/월/일 더하기, 빼기)

[Javascript] 월의 마지막 날짜 계산하기

[Javascript] 날짜 계산 (Date) 마지막 날짜(말일)/윤달/윤년 처리하기

[Javascript] 시간 계산하기 (시/분/초/ 더하기, 빼기)

[Javascript] 문자열 날짜(Date) 변환하기

[Javascript] 경과 시간 계산하기 (시간, 분, 초)

[Javascript] 두 날짜 사이 일수 계산하기 (경과 일수)

[Javascript] 함수 실행 시간 측정하기

[Javascript] 세는 나이, 만나이 계산하기

 

---

 

사용자 환경과 관계없이 

특정한 시간대의 시간을 사용자에게 보여주는 방법을 알아보았습니다.

PC 환경의 시간대를 변경해가면서 확인해보세요~