[FE] react-datepicker시차문제 trouble shooting (datepicker한국시간표현)

Gnims는 일정관리 웹앱인 만큼

초기 기획단계에서 많은 의견이 오고갔던 주제..

달력을 넣을 것이냐...

현업에 계셨던 디자이너님께서 달력은 정말 공수가 많이 드는 작업이기에 디자이너님과 프론트엔드에서 고통스러울 것이라는 조언을 주셔서 오랜 논의 끝에 datepicker라이브러리를 이용하기로 했습니다!

 

yarn add react-datepicker

로 라이브러리를 설치한 다음, 

 

https://reactdatepicker.com/

React Datepicker crafted by HackerOne

Datepicker 공식사이트에서 여러가지 설정을 할 수 있습니다.

 

 

그러나 공식사이트에서도 찾을 수 없었던 몇가지 추가 설정이 있어요..! 

우선 제 코드를 먼저 슥 보시겠어요? 😊

import DatePicker from "react-datepicker";
...
<DatePicker
//DatePicker에도 tailwind css가 동일하게 적용됩니다! 
  className="relative -z-9 justify-center cursor-pointer w-[335px] h-12 mt-4 font-light text-center text-black rounded-md shadow bg-input placeholder-placeHolder text-l hover:bg-sky-100"
  dateFormat="yyyy년 MM월 dd일 h:mm aa"
  selected={selectedDate}
  minDate={new Date()}
  onChange={(date) => setSelectedDate(date)}
  showTimeSelect
  placeholderText="날짜를 선택해주세요!(필수)"
/>

당일부터 선택가능하게설정하는 코드입니다👇👇

  minDate={new Date()}

 

년 월 일 순으로 날짜를 표현하게하는 코드입니다👇👇

  dateFormat="yyyy년 MM월 dd일 h:mm aa"



 

 

Datepicker 시차문제해결하기 대장정

 

1차 내부QA시간을 가지며 받은 피드백 중에, 날짜가 비정상적으로 등록된다는 피드백이 있었어요!

datePicker로 받아오는 시간이 국제표준시간 GMT기준으로 시간을 정하기때문에, 우리나라보다 -9되어 표현됩니다.

그렇지만 이를 date타입이 아닌 string타입으로 변환하면 한국시간으로 표현이 가능합니다!

시간 표현은 string타입으로 바꿔주는 세팅을 통해 한국시간으로 표현이 가능해 한국시간으로 정상적으로 표현할 수 있었지만 날짜는 시차를 반영하지 못했던 이유에서 당일 새벽시간으로 지정한 일정은 하루가 당겨져서 지정이 되어버리는 에러였습니다...

 

selectedDate는 “Fri Mar 10 2023 15:30:00 GMT+0900 (한국 표준시)”로 표현됩니다. back-end에서 요청한 형식으로 구조를 변경하기 위해 toISOString()을 이용해 2023-03-10T06:30:00.000Z 형태로 만들었고, 날짜는 여기서 T를 기준으로 split하여 2023-03-10까지만 추출해 서버로 전송하고있었습니다. (잘 살펴보면 9시간의 시차가 발생하는 것을 확인할 수 있습니다!!) 아래는 제 기존 코드입니다.

const date = selectedDate.toISOString().split("T")[0];

해당 코드를 아래 정규표현식을 이용한 코드로 대체하여 문제를 해결했습니다!!!! 🎉🎉🎉

const date = new Date(+selectedDate + 3240 * 10000)
    .toISOString()
    .replace("T", " ")
    .replace(/\..*/, "")
    .split(" ")[0];

 

저는 가끔 구글링 없이 혼자 힘으로 해결하려고 고집부릴 때가 있는데요,

정규식을 보면 허탈해지곤합니다 🥲 

이렇게 쉽고 빠른 방법이..! 

 

그리고 시간은 이렇게 쪼갰답니다.

  const time =
    selectedDate && selectedDate.toString().split(" ")[4].slice(0, 5)

 

시간적으로 여유가 있다면 MUI datepicker로 변경해서 좀 더 예쁜 UI의 달력을 구현해보고싶네요...!

MUI를 쓰게된다면 꼭 포스팅하도록 하겠습니다 😊😊

 

읽어주셔서 감사합니다!

저희 그님스는 잘못된 정보에 대한 지적과 조언의 댓글을 언제나 환영합니다!