new Date()의 argument로 dateString을 사용할 때는 "yyyy-mm-dd"형식을 사용하자

javascript의 new Date() 생성자는 매개변수로 들어오는 string을 꽤나 유연하게 파싱한다. 시간에 대한 정보 없이 날짜에 대한 정보만을 string으로 넘겨봤을 때, 아래와 같은 형식들을 모두 수용한다.


(현재 위치는 한국이고, 아래 코드들은 크롬 브라우저 콘솔에서 실행했다.)

yyyy-mm-dd

new Date("2023-07-22")
// Sat Jul 22 2023 09:00:00 GMT+0900 (Korean Standard Time)

yyyy/mm/dd

new Date("2023/07/22")
// Sat Jul 22 2023 00:00:00 GMT+0900 (Korean Standard Time)

yyyy.mm.dd

new Date("2023.07.22")
// Sat Jul 22 2023 00:00:00 GMT+0900 (Korean Standard Time)

유연함의 대명사 javascript는 보란듯이 세가지 각기 다른 형식의 string을 Date 객체로 잘 변환시켜주었다. 그런데 결과를 자세히 보니 시간대가 조금 차이가 있는 것이 보인다. yyyy-mm-dd 형식은 09:00:00의 시간값을 가지고 있는 반면 다른 두 형식은 00:00:00 의 시간값을 가지고 있다.


결론부터 말하자면, 날짜 string만 인자로 넘겨주었을 때의 정상적인 파싱의 결과는 09:00:00의 시간값을 가지고 있는 것이 맞다. 현재 내가 있는 지역의 시간대를 의미하는 KST는 GMT로부터 9시간 더 빠른 시간대를 의미한다. 인자로 넘겨받은 string에는 시간정보가 없었기 때문에 GMT 00:00:00을 기준으로 잡고 9시간을 더한 값으로 계산해야하기 때문이다.


그럼 yyyy-mm-dd 형식을 제외한 다른 두 형식은 결과값에서 보이듯 GMT+0900 (Korean Standard Time)의 시간대를 갖고 있음에도 00:00:00의 시간값을 갖고 있는 것은 어떻게 된 일일까? 이 말은 즉 GMT기준으로 9시간 더 늦은 시간인 "하루 전(2023년 7월 21일)"의 15:00:00시간을 기준점으로 잡았다는 말이 된다. 나는 분명 2023년 7월 22일의 시간을 인자로 넣었는데 하루 전을 기준으로 삼는다고? 무언가 이상하다.

시간정보를 넣은 dateString을 사용해보자

정확한 시간 기준을 가지고 파싱을 하기 위해 날짜 string에 시간정보를 넣어서 다시 Date 객체를 만들어보자. 기준으로 삼고자 하는 시간은 GMT 00:00:00 이다. KST로 자동 파싱이 될 때 이는 09:00:00으로 변한될 것이다.

(기존의 날짜 string에 `T00:00:00Z`라는 string을 덧붙일건데, 여기서 `T`는 날짜와 시간 사이의 구분자, `Z`는 "Zulu Time", 즉 GMT 시간대를 가리킨다.)

yyyy-mm-dd

new Date("2023-07-22T00:00:00Z")
// Sat Jul 22 2023 09:00:00 GMT+0900 (Korean Standard Time)

yyyy/mm/dd

new Date("2023/07/22T00:00:00Z")
// Invalid Date

yyyy.mm.dd

new Date("2023.07.22T00:00:00Z")
// Invalid Date

yyyy-mm-dd 형식은 여전히 잘 작동한다. 그러나 다른 두 형식은 Invalid Date 라는 객체를 반환하며 Date 객체 생성에 실패해버렸다.

dateString 표준형식, ISO 8601

javascript의 Date 객체는 string을 인자로 받거나 객체 정보를 string으로 반환할 때 ISO 8601 표준 형식을 따른다. 그 형식은 다음과 같다.

YYYY-MM-DDTHH:mm:ss.sssZ

이 형식에 따르면 날짜에 대한 값은 "-"를 사용하여 표현해야 한다. 따라서 new Date() 생성자의 인자로 넘기는 날짜 string은 YYYY, YYYY-MM 혹은 YYYY-MM-DD 만 허용된다. 위에서 시간정보를 더할 때 사용했던 T00:00:00Z도 이 표준을 따른 표현이다.

처음에 yyyy/mm/dd와 yyyy.mm.dd를 인자로 넣었을 때 그 string이 파싱되어 Date 객체가 생성된 이유는 아직도 잘 모르겠다.

(javascript가 javascript했다 싶다.)

다만 애초에 "-"를 사용하지 않는 형식은 잘못된 형식임을 인지하고 "."이나 "/"같은 것을 사용하지 않도록만 주의하자.

참조

MDN - date time string format
ECMA script - date time string format
재그지그 - 왜 내가 작성한 JavaScript Date 코드가 서버에서는 다르게 보이는 거죠?