React(88) KST 에서 UTC 로 시작일/종료일 변환하기 (feat.moment)

 

Updated 12/27/22

 

 

시작일과 종료일이 표시된 캘린더 컴포넌트가 있다. 당연히 유저입장에서는 한국시간(KST)으로 표기된다.

하지만 데이터를 넘길때는 UTC(국제표준시간)으로 변환해주어야 한다. 자 그럼 변환하려 가보자!

(기본적인 지식으로 KST = UTC + 9시간 이라는 것을 기억하자)

 

 

---

React(88) KST 에서 UTC 로 시작일/종료일 변환하기 (feat.moment)

 

자, 유저가 선택한 시작일과 종료일이다.

 

서버로 넘기는 결과일은 아래와 같이 UTC 로 변경되어야 한다.

특히 종료일은 선택한 날짜인  11 / 3 일(KST 기준) 의 23: 59: 59 초 까지로 표기 되어야 한다.

(서버에서는 일(Date)까지가 아닌 시간(Time)까지도 보내줘야 하기 때문이다.)

 

 

moment 라이브러리를 사용해서 Date 를 핸들링한다는 가정 하에 짜본 함수이다.

(다음에 기회가 되면 바닐라 js 를 통해서도 Date 데이터를 핸들링 해보고 싶다)

 

방법 1 

// 시작일은 단순히 11/01 00:00 에서 -9시간 뺀 UTC 를 리턴하면 된다
const getUTCStartDate = (date: Moment): Moment => {
  return date.set('h', 0).set('m', 0).set('s', 0).add(-9, 'h');
};

// 종료일은 11/03 23:59 까지이며 그를 위해 -1일에서 -9시간을 뺴고 -1초를 빼준 값을 리턴한다.
const getUTCEndDate = (date: Moment): Moment => {
  return date
    .set('h', 0)
    .set('m', 0)
    .set('s', 0)
    .add(1, 'd')
    .add(-9, 'h')
    .add(-1, 's');
};

 

 

방법 2

moment.js 의 내장함수를 이용해서 한방에 가져오자

const startUTCDate = moment(startDate).startOf('day').toISOString()
const endUTCDate = moment(endDate).endOf('day').toISOString()