얼마 전 , 해외에서 우리 서비스를 접속 하였을 때 backend 에서 내려주는 날짜 데이터와 클라이언트에게 노출되는 날짜가 다르다는 이슈가 있었다.
backend 에서 날짜 형식을 yyyy-MM-dd string 형식으로 내려주는데 해당 데이터를 new Date() 의 인자로 그대로 넣어주었기에 생기는 문제였다.
코드로 예시를 들면 다음과 같다.
ex) 시스템 설정의 표준 시간대를 GMT-1200 시간대로 변경하였을 때.
const date = new Date('2024-05-02'); // Wed May 01 2024 12:00:00 GMT-1200 (GMT-12:00)
const date = new Date(2024, 4, 2); // Thu May 02 2024 00:00:00 GMT-1200 (GMT-12:00)new Date() 의 인자로 string 형태로 날짜를 넣었을 때, 24년 5월 2일 자로 넣었지만 5월 1일을 반환한다.
하지만 인자로 number 를 넣었을때, 5월 2일자로 잘 반환한다.
해당 문제를 해결하기 위해 yyyy-MM-dd 형식으로 받아온 데이터를 년 , 월 , 일로 나누어주고 number 형태로 new Date()를 생성해주기로 하였다.
const fullDate = '2024-05-02'
const [year, month, day] = fullDate.split('-').map(Number); // ['2024','05','02'] >> [2024,5,2]
// const date = new Date(fullDate) // Wed May 01 2024 12:00:00 GMT-1200 (GMT-12:00) ❌
const date = new Date(year, month - 1, day) // month는 0부터 시작하기에 1월 이라면 인자로 0을, 2월 이라면 1을 넣어주어야 하기에 -1 을 해준다. ⭕
console.log(date) // Thu May 02 2024 00:00:00 GMT+0900 (한국 표준시) fullDate 를 string 형태로 받아와 '-' 를 기준으로 split 해준 후, 구조분해 하여 첫번째 요소를 year 두번째 요소를 month 세번째 요소를 day에 할당한다.
혹은
// const date = new Date('2024-05-02') // Wed May 01 2024 12:00:00 GMT-1200 (GMT-12:00)
const date = new Date('2024-05-02').toISOString() // 2024-05-02T00:00:00.000Z
date.split('T')[0] // 2024-05-02위의 방법을 이용하여도 될 것 같지만 개인적으로 전자의 방식을 사용하여 해당 이슈를 수정하였다.
위의 방법 외에도 다양한 방법이 있으나, 개인차에 따라, 혹은 프로젝트의 상황에 맞게끔 방식을 선택하여 사용하면 될 것 같다.
@p_samename