LHJ

I'm a FE developer.

15.7 날짜 형식

22 May 2020 » js_lj

15.7 날짜 형식

초보자들은 날짜 표시 형식을 바꿀 때도 종종 골치를 앓곤 합니다.
자바스크립트 Date 객체에서 제공하는 날짜 형식은 별로 다양하지 않고, 이 형식 중에 원하는 것이 없다면 손으로 힘들게 직접 만들어야 합니다.
다행히 Moment.js는 원하는 형식을 쉽게 만들 수 있는 편이므로, 날짜 표시에 관심이 있다면 Moment.js를 권합니다.

Moment.js의 format 메서드를 써서 날짜를 원하는 형식으로 만들 수 있습니다.
이 메서드는 메타 문자가 포함된 문자열을 받고, 메타 문자는 그에 해당하는 날짜 구성 요소로 변환됩니다.
예를 들어 문자열 YYYY는 네 자리 연도로 바뀝니다.
다음 예제는 Date 객체의 내장된 메서드와 Moment.js 메서드로 날짜 형식을 만든 예제입니다.

const d = new Date(Date.UTC(1930, 4, 10));

// 다음 결과는 로스엔젤리스에 사는 사람 기준입니다.
d.toLocaleDateString()      // "5/9/1930"
d.toLocaleTimeString()      // "4:00:00 PM"
d.toTimeString()            // "17:00:00 GMT-0700 (Pacific Daylight Time)"
d.toUTCString()             // "Sat, 10 May 1930, 00:00:00 GMT"

moment(d).format("YYYY-MM-DD");                     // "1930-05-09"
moment(d).format("YYYY-MM-DD HH:mm");               // "1930-05-09 17:00"
moment(d).format("YYYY-MM-DD HH:mm Z");             // "1930-05-09 17:00 - 07:00"
moment(d).format("YYYY-MM-DD HH:mm [UTC]Z");        // "1930-05-09 17:00 UTC - 07:00"
moment(d).format("YYYY년 M월 D일 HH:mm");            // "1930년 5월 10일 09:00"

moment(d).format("dddd, MMMM [the] Do, YYYY");      // "Friday, May the 9th, 1930"

moment(d).format("h:mm a");                         // "5:00 pm"

//////////////////////////////////////////////////////////////////

const moment = require('moment-timezone');

const d = new Date(Date.UTC(1930, 4, 10));

console.log(moment(d).format("YYYY-MM-DD"));
console.log(moment(d).format("YYYY-MM-DD HH:mm"));
console.log(moment(d).format("YYYY-MM-DD HH:mm Z"));
console.log(moment(d).format("YYYY-MM-DD HH:mm [UTC]Z"));
console.log(moment(d).format("YYYY년 M월 D일 HH:mm"));
console.log(moment(d).format("dddd, MMMM [the] Do, YYYY"));
console.log(moment(d).format("h:mm a"));

이 예제만 봐도 Date 객체의 날짜 형식 옵션이 얼마나 일관성 없고 융통성 없는지 잘 알 수 있습니다.
자바스크립트의 입장에서 본다면 이들 옵션은 사용자 지역에 알맞은 형식 옵션을 제공하려는 것이긴 합니다.
다른 라이브러리를 쓸 수 없는 상황에서 다양한 지역의 날짜 형식을 지원해야 한다면 내장 메서드를 써야 하겠지만, 역시 불편합니다.

이 책에서 Moment.js의 다양한 형식 옵션을 설명하지는 않습니다.
자세한 자료가 필요하다면 Moment.js의 온라인 문서를 읽어 보십시오.
날짜 형식을 바꿔야 한다면, Moment.js에는 당신의 필요에 걸맞는 방법이 분명 있을 겁니다.
날짜 형식을 다루는 메타 언어가 대개 그렇듯, Moment.js에도 기억해두면 좋은 몇 가지 표기법이 있습니다.

메타 문자가 길면 해당하는 구성 요소도 더 길게 표시됩니다.
예를 들어 “M”은 1, 2, 3으로 바뀌고 “MM”은 01, 02, 03으로 바뀝니다.
“MMM”은 Jan, Feb, Mar 등으로 바뀌고 “MMMM”은 January, February, March 등으로 바뀌는 식입니다.
소문자 “o”는 서수로 바뀝니다.
즉 “Do”는 1st, 2nd, 3rd로 바뀝니다.
M이나 o 등을 있는 그대로 표시하려면 대괄호 안에 넣으면 됩니다.
예를 들어 “[M]M”은 M1, M2로 바뀝니다.

  • M : 1, 2, 3, …
  • MM : 01, 02, 03, …
  • MMM : Jan, Feb, Mar, …
  • MMMM : January, February, March, …
  • o : 서수
  • Do : 1st, 2nd, 3rd, …
  • M이나 o등을 있는 그대로 표시하려면 : [M]M - M1, M2, …

NOTE_ Mement.js조차 EST나 PST 같은 타임존 약어는 완전히 해결하지 못했습니다.
타임존 약어에 관한 일관된 국제 표준이 없기 때문에 Moment.js는 포맷 문자 z를 폐기했습니다.
타임존 약어의 문제에 관한 상세한 설명은 Moment.js의 문서를 보십시오.

역주_
http://momentjs.com/docs/#/displaying/format/에서 z와 zz을 폐기했다는 내용과 함께, 그 결정에 관한 토의가 담긴 링크를 볼 수 있습니다.