[JavaScript] 날짜 형식 수정, 문자열을 date객체로 파싱하기

---

github api에서 받아온 커밋 날짜 데이터가 있다.

// 편의를 위한 자바스크립트화
let gitDate = "2021-04-02T15:00:37Z"

 

그리고 5일 후를 나타내줄 수 있는 데이터를 만들기 원한다.

답은 아래와 같이 나와야 한다.

let resultDate = "2021.04.07"

 

물론 백엔드쪽에 원하는 데이터를 주문할 수 있지만, 그렇지 못할 경우도 많으니 해결해보자.

---

우선, moment.js라는 아주 유우명한 패키지를 사용할것이다.

이 패키지는 시간을 아주 쉽게 다루게 해준다.

 

Moment.js | Home

 

예를 들어, 아래와 같이 입력하면 포맷이 바뀐다.

let userDate = "2021.04.02"
moment(userDate, "YYYY.MM.DD").format("YYYY-MM-DD")
// 2021-04-02

 

우리가 하려는 5일 더하기는 아래와 같이 한다

let userDate = "2021.04.02"
moment(userDate, "YYYY.MM.DD").add(5, 'days').format('YYYY.MM.DD')
// 2021.04.07
// format을 시켜주지 않는다면 moment객체가 출력된다

 

그렇다면 아래와 같이 적으면 될 것이다.

let gitDate = "2021-04-02T15:00:37Z"
let subDate = gitDate.substr(0, 10)	//T15:00:37Z 잘라내기
let result = moment(subDate, "YYYY-MM-DD").add(5, 'days').format('YYYY.MM.DD')
// 2021.04.07

---

여기까지야 괜찮은데, 문제는 react-nice-dates라는 캘린더 패키지를 사용할 때 일어났다.

React Nice Dates

원래는 선택 한 날짜가 체크되는 형식인데

이를 내 데이터에서 커밋 한 날짜를 추출해 위와 같이 뿌려주기로 했다.

 

그렇다면 우선 어떤 형식으로 변환시켜야 체크될지 클릭을 콘솔로그로 받아보자.

Tue Jun 08 2021 00:00:00 GMT+0900 (대한민국 표준시)

 

주의해야 할 점은, 이것이 문자열이 아닌 객체라는 것이다.

그렇기 때문에, 문자열인 데이터를 전부 시간 객체로 변환시켜주어야 한다.

let gitDate = "2021-04-02T15:00:37Z"
Date.parse(gitDate.substr(0, 10))	
// 1617321600000

 

Date.parse는 문자열로 된 날짜를 분석하며, 잘못된 형식이면 NaN가 반환
우선 이렇게 파싱하면 1617321600000가 된다.

그리고 아래와 같이 시간 객체로 변환하자.

const finalDate = new Date(1617321600000)
// Fri Apr 02 2021 09:00:00 GMT+0900 (대한민국 표준시)

이제 전부 시간 객체로 변환이 됐으니, 원하는 대로 달력에 표시할 수 있게 됐다.

 

---

 

사실 더미데이터로 무작정 연습한 것 이기 때문에, 

실제로 깃허브 api가 시간 객체로 넘겨주는지, 문자열로 넘겨주는지는 잘 모른다.

더 어려운 상황에서 이런식으로 해결할 수 있다는 것을 알았으면 좋겠다.

 

중요한건

형식이 객체인지 문자열인지 헷갈리지 말아야 한다는것!!