자바스크립트에서 미국표준시로 날짜 보여주기

웹 프로그램에서 사용자에게 보여지는 시간을 PST 표준시로 보여주고자 한다. 이를 구현하기 위하여 아래와 같은 방법을 사용하였다.

❶ 서버는 시간 정보를 협정 세계시(UTC, Coordinated Universal Time) 로 ISO-8601 (Date elements and interchange formats - Information interchange - Representation of dates and times) 국제 표준 날짜 표기 기준을 사용하여 클라이언트에 데이터를 전달하고 ❷ 클라이언트는 UTC 데이터를 사용하여 원하는 시간대의 형태로 변경하여 보여준다.



Spring 기반의 서버 프로그램은 데이터를 JSON 형식으로 전달하며 객체의 Date 타입 필드값에 대하여 어노테이션을 사용하여 ISO-8601 형식으로 변환되도록 하였다.

UTC 기준 시간 변환을 위하여  "yyyy-MM-dd'T'hh:mm:ss.SSS+00:00"  패턴 값을 사용하였다.

class OpenRsc implements Serializable{

 int rsc_id;
 String title;
 String description;    
 int viewCount; 
 String linkId;
 String creationUser;
 @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd'T'hh:mm:ss.SSS+00:00" )
 Date creationDate;
 String modifiedUser;
 @JsonFormat(shape = JsonFormat.Shape.STRING, pattern = "yyyy-MM-dd'T'hh:mm:ss.SSS+00:00" )
 Date modifiedDate;  
  
 public OpenRsc(int rsc_id, String title, String description, int viewCount, String linkId,
       String creationUser, Date creationDate, String modifiedUser, Date modifiedDate ) {
  super();
  this.rsc_id = rsc_id;
  this.title = title;
  this.description = description;
  this.viewCount = viewCount;
  this.linkId = linkId;
  this.creationUser = creationUser;
  this.creationDate = creationDate;
  this.modifiedUser = modifiedUser;
  this.modifiedDate = modifiedDate;
 } 
}

서버 시간이 한국 표준시를 기준으로 2020년 1월 15일 17시 54분 인 경우 ISO-8606 형식으로 변환을 하면  2020-01-15T17:52:00.000+00:00  값이 된다.

자바스크립트에서 서버에서 응답한 UTC 기준 시간 값을 인자로 Date 객체를 생성하면 클라이언트 타임존이 한국표준시인 경우 Thu Jan 16 2020 02:52:00 GMT+0900 (한국 표준시) Date 값이 생성된다.

new Date ('2020-01-15T17:52:00.000+00:00')

자바스크립트에서 다른 시간대로 보여주려면 Moment 스크립트를 사용하면 된다. 먼저 사용을 위하여 아래와 같이 자바 스크립트를 HTML 에 추가한 다음 원하는 타입존 값을 지정하여 변환하면 된다.

참고 자료

• 자바스크립트에서 타임존 다루기
• ISO 8601
• Moment.js
• Moment Timezone