[JavaScript] 유저의 Local Time 과 UTC Time 구하기

서버 - 클라이언트 환경에서의 타임존

유저의 채팅 환경을 구현하는 개발을 진행하던 중, 유저가 메시지를 입력한 시간을 저장하고 유저의 타임존에 맞는 시간 정보를 보여주어야 했습니다. 클라이언트 환경에서 유저가 메시지를 입력한 시간을 서버의 DB에 저장하고 유저가 채팅방에 다시 들어왔을 때 메시지들을 저장된 시간에 맞게 보여주어야 했습니다. 이때 유의해야 할 점은 유저가 서로 다른 타임존을 가지고 있다는 것입니다. 그렇기 때문에 서버는 다양한 타임존의 클라이언트 환경을 지원하기 위해서 타임존에 영향을 받지 않는 절대값을 가지고 있어야 합니다.

 

 

 

UTC (Universal Time Coordinated)

소프트웨어에서 사용하는 세계 표준 시간으로 GMT 또는 UTC 를 사용하는데 원래는 GMT(Greenwich Mean Time)으로 사용되었으나 현재는 UTC로 주로 사용됩니다. (둘이 혼용되어 사용될 수 있지만 값이 완전히 동일하지는 않다)

 

일반적으로 이런 데이터는 UTC를 기준으로 한 유닉스 시간이나 오프셋 정보가 포함된 ISO-8601와 같은 형태로 저장하게 됩니다. 예시로 서울의 2022년 8월 7일 오후 3시 30분을 유닉스 시간으로 보여준다면 숫자 타입의 1659853800 을 가져오고, ISO-8601을 이용하여 보여주면 문자열 타입의 '2022-08-07T06:30:00.000Z' 를 가져올 것입니다.

 

Offset

'Sun Aug 07 2022 15:30:00 GMT+0900 (한국 표준시)' 에서 GMT+0900의 의미는 UTC 또는 GMT 기준 시간보다 9시간 빠르다는 의미입니다. 즉, UTC 기준 시간이 현재 오후 2시라면 한국 시간은 오후 11시가 됩니다. 이렇듯 UTC와 로컬 타임의 차이를 오프셋이라고 합니다.

 

Unix Time

세계 표준시(UTC)로 1970년 1월 1일 00시: 00분: 00초 를 기준으로 하여 지금 현재까지 흐른 모든 시간을 초(sec) 단위로 표현한 것입니다. 단, 윤초(Leap Second)는 반영하지 않습니다. 

let now = new Date(2022, 7, 7, 15, 30).getTime() / 1000;


console.log(now); // 1659853800

* Date 객체에서 month 가 0부터 시작하기 때문에 8월을 가져오기 위해서 7을 입력했습니다.

 

ISO8601 표기법

let unixTime = new Date(2022, 7, 7, 15, 30).getTime() / 1000;
let ISOTime = new Date(unixTime * 1000).toISOString();


console.log(ISOTime);  // '2022-08-07T06:30:00.000Z'

프로그래밍 언어에서는 유닉스 타임을 분해하여, 현재 시각을 구합니다.

 

 

브라우저 환경에서 자바스크립트를 이용해 이러한 처리를 해야 한다면, 우리는 사용자의 입력 값을 위와 같은 형식으로 변환하는 작업과, 위와 같은 형식의 데이터를 받아서 사용자의 타임존에 맞게 변환하는 작업 두 가지를 모두 고려해야 한다. 흔히 사용하는 용어로 표현하자면 앞의 작업은 파싱(Parsing), 그리고 뒤의 작업은 포맷팅(Formatting)이라고 할 수 있습니다.

 

자바스크립트의 Date 객체는 내부적으로 유닉스 시간과 같은 절대값으로 시간 데이터를 관리합니다. 하지만 생성자나 parse() 함수, getHour(), setHour() 등의 메소드들은 모두 클라이언트의 로컬 타임존 (정확히는 브라우저가 실행되는 운영체제에 설정된 타임존)에 영향을 받습니다. 그러므로 사용자가 입력한 데이터를 이용해 그대로 Date 객체를 생성하거나 값을 지정한다면 그 데이터는 클라이언트의 로컬 타임존을 그대로 반영하게 될 것입니다.

 

 

클라이언트에서 Local Time 에 맞게 시간 보여주기

서버는 클라이언트에게 타임스탬프로 메시지의 시간을 내려주었고 클라이언트는 해당 값을 이용해 시간순에 맞는 채팅 메시지를 보여줄 수 있었습니다.

 

 

 

Timestamp

타임스탬프 값은 현재 시간을 밀리세컨드 단위로 변환하여 보여주는 값으로 특히 값을 비교하는 경우 유용하게 사용할 수 있습니다. 

if (1508367636000 < 1508367639600)

위의 코드와 같이 비교할 시, 시간에 따른 클라이언트 값을 보여주도록 구현할 수 있습니다.

 

타임스탬프를 이용해 시간을 보여주는 이유는 시간 단위에서 24 이후에 1이되거나 분 단위에서 60 다음에 1로 오는 특성이 현재 시간과 이후 시간을 비교할 경우 초, 분, 시 단위로 비교하기가 어렵게 하기 때문에 사용한다고 합니다. 타임스탬프의 경우 감소하지 않고 증가만 하기 때문에 현재 시간과 이후 시간을 비교하기에 적합합니다.