toLocaleTimeString과 toLocaleDateString, 그리고 ISO 8601
- new Date으로 날짜 형식을 보면 2024-10-25T15:30:45.123Z 이런 식으로 생겼다.
나는 여기서 시간만 뽑아서 24시 단위의 시간을 12시간제로 바꾸어 사용하고 싶었다.
new Date에서 시간만 뽑으려면 어떻게 할 수 있을까?
toLocaleTimeString을 써주면 시간만 가져올 수 있다고 한다.
여기서 toLocaleTimeString이란 뭘까?
W3School에 의하면
"The toLocaleTimeString() method returns the time portion of a date object as a string, using locale conventions." 이렇다고 한다. 문자열의 형식으로 시간을 리턴한다고 하는데 local convention이란 무엇인지 알 수가 없다.
지피티는 이 관습을 어떻게 설명했냐면
"Locale Convention(로케일 관습)이란, 특정 지역이나 문화권에서 날짜, 시간, 숫자, 통화 등을 표시하는 방식이나 규칙을 말합니다. 각 나라나 언어에 따라 이러한 포맷이 다를 수 있으며, 로케일에 기반한 변환을 통해 다양한 형식을 자동으로 지원할 수 있습니다." 라고 한다.
여기서 예로 toLocaleDateString을 들 수 있는데, 위의 설명대로 각각 나라마다 날짜를 표시하는 형식이 다르다.
그래서 toLocalDateString을 new Date 객체에 써주고 인자로 'en-US'를 넣어주면 미국 형식, 'ko-KR'을 넣어주면 한국의 날짜 형식으로 날짜를 뽑아 쓸 수 있다.
아래의 예시처럼 말이지!
자, 그래서 시간만을 뽑아서 이걸 12시간제로 바꾸고 싶은데 어떻게 할 수 있을까?
toLocaleTimeString에는 두 가지의 인자를 넣어 줄 수가 있는데, 첫 번째 인자로는 'en-US' 같은 특정 지역 그리고 두 번째 인자로는 options가 있다.
이 options는 객체 형식으로 안에 값들을 정의 해줄 수가 있는데, 어떤 형식으로 넣어줄 수 있는지 코드로 확인해보자
이 options 안에는 hour, minute, second, timeZone, timeZoneName, hour12, fractionalSecondDigits의 키들을 넣어주고 정의해줄 수 있다.
(필요한 키들은 문서를 확인하면서 사용하면 된다!)
여기서 내가 정의가 필요한 키는 hour, minute, hour12이다.
numeric 형식의 시간과 2자리수의 분 형식, 그리고 12시간제로 설정할 것인지의 유무
numeric은 시간이 1자리 수이면 하나만, 두 자리 수이면 그대로 보여지게 해주는 것이다.
minute의 2-digits는 5분이라고 가정하면 05 이런식으로 나타낸다
나는 위에 보이는 것처럼 options라는 변수에다가 객체로 이 값들을 정의해놓고, toLocalString의 두 번째 인자로 전달해줬다.
여기서 드는 생각은, 아까 잠깐 예로 들었던 toLocaleDateString은 어떻게 다를까?
toLocaleDateString을 사용하는 법도 toLocaleTimeString과 굉장히 흡사하다.
두 가지의 인자를 전달할 수 있고, 첫 번째로는 지역/나라를 넣고 두 번째로는 options를 넣어준다
하지만 이번 options의 키는 다른데, 이름에서도 다르다싶이 이건 DateString임!
그래서 여기 옵션의 키들은 weekday, year, month, day가 있다.
(MDN에서 가져온 toLocalDateString 예시이다)
이건 내가 사용한 코드인데, 한국어 형식으로 된 날짜가 필요했기에 'ko-KR'을 넣어줬고 options는 이런 식으로 내가 원하는 대로 정의해줬다.
이렇게 해주면, Date 형식의 값을 "2024년 10월 25일" 이런 형식의 문자열로 받아볼 수가 있다.
Date 형식을 다뤄보며, 검색을 하던 중 ISO 8601 이라는 키워드에 대해서 알게 됐다.
이게 뭘까?
ISO format이란 다양한 형태의 날짜 형식이 전세계에 있는데 그건 나라마다 다르게 해석이 될 수 있기에 불확실성을 해결하기 위해 만들어진 포맷이다.
ISO 공식 문서에서 말하길 "When dates are represented with numbers they can be interpreted in different ways. For example, 01/05/22 could mean January 5, 2022, or May 1, 2022. On an individual level this uncertainty can be very frustrating, in a business context it can be very expensive. Organizing meetings and deliveries, writing contracts and buying airplane tickets can be very difficult when the date is unclear." 이렇다고 한다.
그래서 ISO 8601이 따르는 형식은 "year, month, day, hour, minutes, seconds, and milliseconds" 라고 한다.
예를 들어, "September 27, 2022 at 6 p.m."의 형식이 ISO format을 따르면 "2022-09-27 18:00:00.000"이 되는 것이다.
그래서, 자바스크립트에 이 형식으로 바꿀 수 있는 method가 있는데 그건 toISOString이다.
MDN에서 가져온 예시 코드를 확인해보자
위의 예시는 그냥 문자열로 된 날짜를 Date으로 변환해주고 문자열로 만들어 로그를 찍어보면 저런 식으로 되어있는 걸 확인할 수 있다.
하지만 우리가 필요한 건 ISO 형식의 날짜!
바로 그 밑에는 toISOString을 사용하니, 내가 생각한 ISO format의 날짜가 로그에 찍히는 걸 확인할 수가 있다.
여기서 알게 된 건, 이 ISO 8601 형식이 UTC 시간을 따른다는 것인데 여기서 UTC가 무엇인지 확인해보자.
UTC(협정 세계시, Coordinated Universal Time)란
"지구의 모든 지역에서 통용되는 표준 시간으로, 특정한 시간대에 속하지 않고 모든 시간대를 기준"한다고 한다.
그래서 이 ISO format의 시간을 보면 맨 마지막에 Z가 붙게 되는데 이게 UTC 시간을 나타내는 것이라고 한다!
그러면 한국은 이 UTC시간에서 +9을 해야 한국 시간을 알 수가 있는 것이다.
이렇게 해서 간단하게 Date 타입에서 date과 time의 형식을 바꾸려다가 어떤 식으로 이 메소드들이 실행이 되는 건지 조금 이해를 하게 되었다!
