[Date] UTC to KST - 우당탕탕 요란스러운 여정기

 

 

 

 

 

문제의 시작

현재 우리 회사에서는 하나 이상의 노드들을 이용해서 서버를 손 쉽게 만들어주는 솔루션을 개발 중이다.

나는 모듈을 전반적으로 담당하고 있는데 현재 JavaScript의 Date들을 모듈로 하나씩 개발하고 있다.

 

그런데!

getHours() 모듈을 만들 중 이상한 점을 발견했다.

위 캡쳐처럼 호출 일시에 나온 14시라는 시간과 아래 getHours를 이용해 출력한 05시라는 시간이다.

둘 다 같이 14시가 나와야 하는것이 맞는데 어째서 getHours는 새벽 5시가 나왔을까?

 

 

UTC라고 들어봤니?

이유는 바로 newDate 모듈이 한국 표준시간이 아닌 UTC 표준으로 나왔기 때문이다.

Date를 생성해주는 모듈을 new Date()가 아닌 Date()로 생성하여 출력해보았다.

그랬더니 맨 뒤에 Coordinated Universal Time이 나왔고 협정 세계시라고 한다.

 

협정 세계시는 무엇일까?

국제적인 표준 시간의 기준으로 쓰이는 시각이다. 

한국시계는 협정 세계시보다 9시간 빠르기 때문에 getHours 모듈에서 5시로 나온 것이 맞았다.

 

new Date()를 해줄 때 기본적으로 사용자 PC에 설정된 시간대 기준으로 시간을 표시해준다고 한다.

그렇기 때문에 대부분의 개발자들은 KST로 잘 나왔을 것이다.

하지만 우리 프로그램의 경우 가상 시스템에서 돌아가기 때문에 UTC가 나왔던 것이다.

 

 

UTC to KST

UTC를 쓰면 좋겠지만 우리 회사 솔류션의 주고객층은 한국 기업 혹은 사람들이기 때문에 혼란을 초래하지 않기 위해 KST로 바꾸고자 한다.

위에서 말한것처럼 KST는 UTC보다 9시간 빠르다!

바로~ UTC에 나온 결과값에 9시간을 넣어보았다.

 

저 일련의 번호는 또 뭘까 🙃

찾아보니 유닉스 타임이었다.

생각한 값이 아니라 당황스러웠지만 그래 뭐..

 

 

setHours() 만으론 부족해

막 유닉스 타임에서 Date 형식으로 만드는 것을 찾아보던 중 문제점을 발견했다.

분명 setHours()를 이용해서 9시간을 더해줬다고 생각했는데 아니었다.

아래를 한 번 보도록 하자.

 

JavaScript 공식문서에는 친절하게 코드를 짜서 결과물을 볼 수 있는 공간이 있다.

로그를 봐도 알겠지만 위와 아래 즉, setHours를 쓰기 전과 후의 차이가 하나도 없다

 

알고보니 내가 setHours를 현재 시간에 더해준다고 착각했던 것이다. 

setHours는 시간을 더해주는 함수가 아니라 지정한 시간으로 바꿔주는 모듈이었다.

즉 위의 로그는 현재 시간이 9시인데 setHours를 이용해서 9시로 바꾸는 아주.. 멍청한 짓을 하고 있었던 것이다 하하하

 

event.setHours(event.getHours() + 9);

목적과 같이 현재 시간에 9시간을 더해주기 위해서는 위와 같이 getHours()도 함께 사용해주어야 한다.

 

 

TypeError [Error]: date.getHours is not a function

길어졌지만 목표는 UTC에서 KST로 시간이 제대로 나오는 것이다.

현재 한국 시간이 11시라면 똑같이 모듈에서도 11시가 나와야 한다.

 

setHours와 getHours를 이용해서 UTC에서 KST로 변경해주었으니 인제 getHours로 출력 했을 때 11시로 나오면 된다.

하지만 이번에는 getHours is not a function이라는 새로운 오류를 만나게 되었다 😇

 

이 오류가 나오는 이유는 getHours에 들어가는 매서드가 날짜 개체가 아니기 때문이다.

아까 일련의 번호가 나오는 유닉스 타임이 나온다고 말했다.

즉, 반환값이 유닉스 타임이기 때문에 이런 오류가 나온 것이었다.

 

해결방법은 당연히 유닉스 타임을 유효한 날짜 객체로 만들어야 한다.

 

 

Unix Time to Date

근데 유닉스 타임에서 날짜 객체로 어떻게 변경할 수 있을까.

Date 생성자를 사용해주면 된다.

 

    let kst = utc.setHours(utc.getHours() + 9);
    let result = new Date(kst);

이런 식으로 다시 Date 생성자를 사용해서 구워준다.

 

결과를 보니 date 값으로 KST로 잘 나온 것을 확인할 수 있다.

getHours 모듈을 사용하니 딱 11시만 나왔다 🫶

하지만 생성자를 두번이나 쓴다는 것이 비효율적이라고 생각할 수 있다.

 

 

 

참고

https://yozm.wishket.com/magazine/detail/1695/

왜 내가 작성한 JavaScript Date 코드가 서버에서는 다르게 보이는 거죠? | 요즘IT

 

 

https://itsjavascript.com/javascript-typeerror-date-gethours-is-not-a-function

[Solved] TypeError: date.getHours is not a function - ItsJavaScript