new Date()사용시 Invalid date방지하기

query로 date값을 받아 datePicker에 적용하는 작업을 진행하였다
관리자 페이지를 작업하면서 느끼는건 날짜 관련 함수를 사용할 일이 정말 많고 예상치 못한 변수들이 너무 많이 생긴다는 것이다.. 나중에 또 사용할 때가 있을 것 같아 내용을 정리하기로 했다.

Invalid date

Invalid date란 날짜 객체 사용시 유효하지 않은 날짜값을 나타낸다.
Chrome브라우저 에서는 특별한 경우가 아닌경우 new Date()사용시 왠만해선 Invalid date가 나타나지 않지만 Safari와 IE환경에서는 다름으로 항상 주의해야 한다.

// 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

// 출처 [https://string.tistory.com/m/32]

Date fotmat 변환

위의 결과값을 보면 세 브라우저 모두 지원되는 형식이 있는데 그중 나는 yyyy/mm/dd hh:mm:ss 포멧을 사용하기로 했다. (query로 날짜값 받을때 yyyy-mm-dd hh:mm:ss형식이여서 제일 나은 방법이였음)

const reg_dt = this.$route.query.reg_dt || '' // YYYY-MM-DD HH:mm
const formatDt = reg_dt.replace(/-/g, '/') // YYYY/MM/DD HH:mm 으로 변환

Date parse()

포멧도 변환했으니 이제 Safari나 IE환경에서도 Invalid date가 보이지 않을 것이라고 생각하면 오산.. 예로 정말 뜬금없는 이상한 이상한 형식의 날짜값이 받아와진다면?

new Date('foo-bar 2014').toString();
// returns: "Invalid Date"

Date.parse('foo-bar 2014');
// returns: NaN

이를 방지하기 위해 사용하는것이 Date parse()이다.
(처음에는 try catch로 Invalid Date를 방지하고자 했지만 Invalid Date는 에러가 아니기 때문에 try catch를 사용해도 에러로 감지하지 못한다.. )

moment js나 datepicker.parseDate와 같은 방법으로도 Date parse()를 대체할 수 있지만 나는 가장 간편한 방법을 택하기로 했다.

const reg_dt = this.$route.query.reg_dt || '' // YYYY-MM-DD HH:mm
const formatDt = reg_dt.replace(/-/g, '/') // YYYY/MM/DD HH:mm 으로 변환

const isValidDate = !isNaN(Date.parse(formatDt))
if (isValidDate) {
  const voteStartDt = new Date(formatDt)
  
// Date parse()를 사용하여 NaN이 아닐경우 if문 안으로 로직이 실행되도록 처리 
  ...