캘린더 날짜 바꾸기 - Welcome to Data structure

.... "Welcome to 자료구조!!"

 

날짜 바꾸는 것이 잘 되지 않아서 함께 스터디 하고 있는 분에게 물어봤더니 이런 말이 돌아왔다.

내가 아는 자료구조랑 달라서

 

"어? 이런 것도 자료구조에요?"

라고 물어봤더니,

 

"문자형 데이터를 내 멋대로 조종하는 작업이니까요. 실제로는 Timestamp를 datetime으로 바꿔서 제공해주는데, 그걸 패트릭님이 숫자로 바꿔서 비교한 다음에 문자열로 결과물을 내놓는 거잖아요. 그렇기에 자료구조이지요."

라는 답이 왔다.

 

---

현재 회사 사정상 백엔드 없이 프론트 작업만 먼저 선행 되어야 하는 경우가 생겼다.

그래서 우선은 임시로 데이터들을 만들어놓고 그것이 작동을 하는지 정도만 알아보려고 했다.

이 후에 백엔드 분이 오시면 내가 만들어놓은 것을 보여드리고 비교해보고, 더 좋은 방법을 피드백 받을 수도 있으니까!

 

그런데 문제는 숫자로 바꾸는 것이 더럽게 되지 않았다....

나는 react-datepicker 라는 라이브러리를 사용하였는데, 이를 이용하여 날짜를 콘솔에 찍어보면 아래와 같이 출력되었다.

GMT...

 

하지만 일반적으로 JSON data를 만들 때는 210915 이런 식으로 들어가게 될 것이다.

내가 최대한 해봤을 때 나오는 것이 21915 정도였다...

내가 원하는 것은 yyyy-MM-DD 와 같은 포멧이었는데 0이 어디로 가버렸으어...!!!!!

사용자가 캘린더의 어떤 날짜를 선택 할지 모르기 때문에 하드코딩으로 넣을 수도 없었다.

 

그래서 처음 시도해본 라이브러리는 luxon 이었다.

저번에 한번 써본 적이 있어서 괜찮겠거니 하고 써봤는데 .... 답답해 죽는 줄 알았다... 왜 이렇게 잘 안되는지...

그렇게 꼬박 반나절을 싸우다가 결국 moment를 설치했다.

그리고... moment의 도움을 받을 수 있었다...

Number type으로 나온... 파란 숫자를 보자마자 희열....😹

이 맛에 개발자하지... 라는 생각을 다시 했다.. (고작 날짜 바꾸기라고 생각 할 수 있지만 나는 고군분투 했기 때문에...)

---

우선 startDate, endDate를 받아오면 첫 번째 이미지처럼 GMT time format으로 나온다.

그래서 moment를 설치하여, 안에 넣어주고 format이라는 메서드를 사용한 뒤, 필요한 부분만 자르고 parseInt로 감싸주었다!

이거이거... 잊어먹으면 안된다...

어후 고생했네..

이제 신나게 날짜에 맞는 데이터를 불러와볼까아!!!