[JavaScript] Date 객체 사용 시 주의해야 할 점 (크로스 브라우징 이슈)

▪ JavaScript Date객체 사용 시 주의할 점

자바스크립트 작성 시 날짜 생성, 비교 등으로 Date 객체는 자주 활용되지만,
Date.parse() 메소드나 데이터 포맷을 사용한 생성자로 객체 생성 시
크로스 브라우징 이슈를 발생시킬 수 있어 주의해야 합니다.

아래 예시는 서비스 개발 시 대개 호환성을 맞춰야하는 브라우저인 Chrome, Safari, IE11에서
몇 가지 데이터 포맷을 사용한 생성자로 Date 객체를 생성 후 로그로 출력한 결과입니다.

// yyyy-mm-dd
var a = new Date("2021-07-06");
console.log(a);
// CHROME - Tue Jul 06 2021 09:00:00 GMT+0900 (대한민국 표준시)
// SAFARI - Tue Jul 06 2021 09:00:00 GMT+0900 (KST)
// IE11   - Tue Jul 06 2021 09:00:00 GMT+0900 (대한민국 표준시)

// yyyy-mm-dd hh:mm:ss
var b = new Date("2021-07-06 10:30:06");
console.log(b);
// CHROME - Tue Jul 06 2021 10:30:06 GMT+0900 (대한민국 표준시)
// SAFARI - Invalid Date
// IE11   - Invalid Date

// yyyy-mm-ddThh:mm:ss
var c = new Date("2021-07-06T10:30:06");
console.log(c);
// CHROME - Tue Jul 06 2021 10:30:06 GMT+0900 (대한민국 표준시)
// SAFARI - Tue Jul 06 2021 10:30:06 GMT+0900 (KST)
// IE11   - Tue Jul 06 2021 10:30:06 GMT+0900 (대한민국 표준시)

// yyyy.mm.dd
var d = new Date("2021.07.06");
console.log(d);
// CHROME - Tue Jul 06 2021 00:00:00 GMT+0900 (대한민국 표준시)
// SAFARI - Invalid Date
// IE11   - Invalid Date

// yyyy.mm.dd hh:mm:ss
var e = new Date("2021.07.06 10:30:06");
console.log(e);
// CHROME - Tue Jul 06 2021 10:30:06 GMT+0900 (대한민국 표준시)
// SAFARI - Invalid Date
// IE11   - Invalid Date

// yyyy/mm/dd
var f = new Date("2021/07/06");
console.log(f);
// CHROME - Tue Jul 06 2021 00:00:00 GMT+0900 (대한민국 표준시)
// SAFARI - Tue Jul 06 2021 00:00:00 GMT+0900 (KST)
// IE11   - Tue Jul 06 2021 00:00:00 GMT+0900 (대한민국 표준시)

// yyyy/mm/dd hh:mm:ss
var g = new Date("2021/07/06 10:30:06");
console.log(g);
// CHROME - Tue Jul 06 2021 10:30:06 GMT+0900 (대한민국 표준시)
// SAFARI - Tue Jul 06 2021 10:30:06 GMT+0900 (KST)
// IE11   - Tue Jul 06 2021 10:30:06 GMT+0900 (대한민국 표준시)

// yyyy/mm/ddThh:mm:ss
var h = new Date("2021/07/06T10:30:06");
console.log(h);
// CHROME - Invalid Date
// SAFARI - Invalid Date
// IE11   - Tue Jul 06 2021 12:30:06 GMT+0900 (대한민국 표준시)

// yyyy-m-d
var i = new Date("2021-7-6");
console.log(i);
// CHROME - Tue Jul 06 2021 00:00:00 GMT+0900 (대한민국 표준시)
// SAFARI - Invalid Date
// IE11   - Invalid Date

// yyyy-mm
var j = new Date("2021-07");
console.log(j);
// CHROME - Thu Jul 01 2021 09:00:00 GMT+0900 (대한민국 표준시)
// SAFARI - Tue Jul 01 2021 09:00:00 GMT+0900 (KST)
// IE11   - Thu Jul 01 2021 09:00:00 GMT+0900 (대한민국 표준시)

// yyyy-mm hh:mm:ss
var k = new Date("2021-07 10:30:06");
console.log(k);
// CHROME - Thu Jul 01 2021 10:30:06 GMT+0900 (대한민국 표준시)
// SAFARI - Invalid Date
// IE11   - Invalid Date

// yyyy.mm
var l = new Date("2021.07");
console.log(l);
// CHROME - Thu Jul 01 2021 00:00:00 GMT+0900 (대한민국 표준시)
// SAFARI - Invalid Date
// IE11   - Invalid Date

세 개의 브라우저를 모두 지원하는 데이터 포맷은 yyyy-mm-ddThh:mm:ss 와 yyyy/mm/dd hh:mm:ss 이지만
위의 예시처럼 동작이 일관적이지 않고 브라우저에 따라 파싱 에러(Invalid Date)를 발생시킬 수 있으므로
생성자를 이용한 방법으로 Date 객체 생성 시 new Date(year, month, day, hour, min, sec); 사용을 권장합니다.

// Date(year, month, day, hour, min, sec) 
// 2021년 7월 6일
var x = new Date(2021, 6, 6); // 월은 0부터 시작하므로 6
console.log(x); // Mon Jul 06 2021 00:00:00 GMT+0900 (대한민국 표준시) 

var y = new Date(2021, 6, 6, 10, 30, 15); 
console.log(y); // Mon Jul 06 2021 10:30:15 GMT+0900 (대한민국 표준시)

또 다른 해결 방법으로는 라이브러리를 사용하는 방법으로
Moment.js 등의 라이브러리를 사용해 예외를 원천 봉쇄하는 방법도 있습니다.
https://github.com/moment/moment

moment/moment