[시나브로 자바스크립트] Date, Intl.DateTimeFormat으로 날짜 다루기

Date() vs new Date()

Date()처럼 함수로 호출할 경우 new Date().toString()과 동일하게 동작하며, 현재 날짜/시간을 나타내는 문자열을 반환한다.

Date()는 문자열이기 때문에 Date 객체에서 사용하는 getDate(), getTime() 등의 인스턴스 메서드를 사용할 수 없다. 때문에 아래 첫번째 이미지처럼 Date() 뒤에 메서드를 사용하려고 할 경우 TypeError가 발생한다.

new Date()로 호출할 경우에는 새로운 Date 객체를 반환하며 관련된 메서드들을 사용할 수 있다.

Date() vs new Date() 비교

타임존 설정하기

toLocaleString을 사용하면 timezone을 설정할 수 있다. 첫 번째 파라미터에는 언어를 설정하고, 두번째 파라미터 안에 timeZone을 넣으면 시간대를 설정할 수 있다.

UTC 시간 반환하기

new Date()를 사용할 경우, 로컬 시간을 기준으로 동작한다. 때문에 한국에서 실행하는 시간과 영국에서 실행하는 시간이 다르기 때문에 글로벌 서비스의 경우 서비스가 의도한대로 동작하지 않을 수 있다.

new Date().toISOString()을 사용하면 ISO 형식의 UTC 시간대를 기준으로 문자열을 반환한다.

 

"UTC 시간대를 기준으로 문자열을 반환한다면 이걸 new Date() 객체에 다시 넣었을 때는 어떤 걸 반환할까?" 시간대가 UTC로 설정되어 있기 때문에, 시간대가 로컬 시간을 기준(한국에 있다고 가정)으로 +9시간 더해져 출력된다. 문자열로 표시했을 때는 9시간의 차이가 있지만, UTC 기준으로 봤을 때 동일한 시점을 나타낸다. 때문에 new Date().getTime()과 toISOString()의 결과값을 new Date()로 넣어 getTime()을 적용한 값은 동일한 결과를 반환한다.

toISOString 결과값과, 이를 다시 new Date에 넣었을 때의 반환값

new Date()와 toISOString()을 다시 new Date()에 넣었을 때, getTime() 메서드 반환 값은 동일

현재 시간 조회하고 싶을 때

그럼 실무에서 UTC 시간대를 기준으로 날짜/시간을 알고 싶다고 했을 때 new Date().toISOString()을 한 다음 split이나 slice 등을 활용해서 포맷을 직접 해야하는걸까...?라는 생각이 들 것 같다. 자바스크립트 강의에서도 split을 사용하는 방법이 나왔는데, 사실 이렇게 되면 형식이 바뀐다고 했을 때, 혹은 포맷팅 하는 메서드가 잘못될 가능성 등이 있기 때문에 조심스럽게 써야 한다.

다행히도 이를 제공해주는 메서드가 있다. 기존에는 new Date()에 getDate(), getHours() 메서드를 활용하여 현재 날짜/시간을 가져왔는데, 여기에 UTC만 넣어주면 UTC 시간대를 기준으로 날짜/시간을 구할 수 있다. getUTCDate()를 사용하면 날짜, getUTCHours()를 사용하면 시간이 반환되며, 이 외에 getUTCXXX로 원하는 걸 다 구할 수 있다. (아래 이미지 참고)

개발자 도구에 .getUTC를 입력했을 때 나오는 다양한 메서드

 

Intl.DateTimeFormat

new Intl.DateTimeFormat을 사용하고, 포맷하고자 하는 시간을 .format() 괄호 안에 넣으면 string을 반환한다. 만약 date를 생략한다면 현재 시간을 기준으로 반환된다.

첫 번째 파라미터에는 날짜를 표시하고자 하는 언어를 표시한다. 그리고 두번째 파라미터에는 options를 넣어 포맷하고자 하는 정보를 구체적으로 넣을 수 있다. 예를 들어 timeStyle, dateStyle 등을 통해 short, medium, full 등을 입력하면 아래 이미지처럼 결과가 다르게 나타난다.

style에 따른 포맷

또한 timezone을 설정할 수도 있다. 첫번째 파라미터는 단순히 시간을 표시하는 언어를 설정하는 영역이고, timezone에 의해 시간대가 설정되어 결과값이 반환된다.

시드니와 서울로 타임존 변환

그 외에도 hour, minute, hour12 등의 옵션들을 통해 포맷을 다르게 정할 수 있다.

 

시간 관련 라이브러리

하지만 좀 더 손 쉽게 할 수 있는 방법으로, 시간 관련 라이브러리를 선택할 수도 있다. 그 예로 day.js, date-fns를 사용할 수 있다. 이전에는 moment.js를 많이 사용했지만 현재는 moment.js 라이브러리 내에서도 레거시로 간주하며, 유지보수만 진행하기 때문에 다른 라이브러리를 사용하는 것을 권장하고 있다.

day.js : https://github.com/iamkun/dayjs

GitHub - iamkun/dayjs: ⏰ Day.js 2kB immutable date-time library alternative to Moment.js with the same modern API

date-fns : https://date-fns.org/

Modern JavaScript Date Utility Library