문제상황

new Date와 axio를 이용해서 날짜를 SpringBoot 서버에 전송 후, 터미널에 출력하니 하루 전 날짜가 출력되었다. 아래와 같이 date를 정의해서 서버에 전송했는데, 날짜가 이상해서 console에 출력해봤다.

lesson에 출력된 것은 서버 전송 전에는 24일을 선택한 것을 볼 수 있고, date에는 서버 전송 후 23일로 변경된 것을 볼 수 있다.

해결방법

axio로 정의한 date값으 보낼 시 JSON 직렬화를 한다. 이 과정에서 기본적으로 toISOString() 메서드를 이용해서 Date 객체를 ISO 8601 문자열 형식(yyyy-MM-ddTHH:mm:ss.sssZ)으로 변환하여 전송하기 때문에, 서버에서는 UTC 기준으로 처리됩니다. UTC(국제표준시)으로 설정되기 때문에 9시간이 사라져버리는 문제가 발생한다.

아래는 console에서 입력한 것이다. date를 정의한 후 toISOString() 메서드를 통해 출력하면 9시간이 사라져있는 것을 확인할 수 있다.

편차 사용하기

offset(편차)를 정의해서 우리가 원하는 시간대로 수정할 수 있다.

// 현재 UTC와 한국 표준시와의 차이를 분 단위으로 변환
const offset = new Date().getTimezoneOffset() * 60000;
const today = new Date(Date.now() - offset);

이렇게 하면 정상적으로 현시간대를 출력되는 것을 확인할 수 있다! 처음에는 서버 시간 설정이 잘못된 줄 알고 설정했는데, 그래도 해결이 안되서 찾아보니 이게 문제였다... js는 어렵네

참고 사이트

• https://velog.io/@minsu2344/JS-Date.toISOString%EC%9D%98-%EC%9E%83%EC%96%B4%EB%B2%84%EB%A6%B0-9%EC%8B%9C%EA%B0%84
• https://velog.io/@minsunill/axios-Date-Object-%EB%B3%B4%EB%82%BC-%EB%95%8C-9%EC%8B%9C%EA%B0%84-%EC%A0%84-Datetime%EC%9C%BC%EB%A1%9C-%EB%B3%B4%EB%82%B4%EC%A7%90