Javascript | 데이터,문자열 원하는 형태로 조작하기

받아온 문자열 데이터를 변환하여 사용하는 일이 비일비재하다. 프론트엔드를 공부해나가면서 이런 상황을 맞닥뜨렸지만 그때 그때 구글링을 통해서 해결하였다. 하지만 제대로된 정의나 사용법에 대해서는 정리하지않은 것 같아 정리하는 시간을 가져보려고 한다.

문제발생!

캘린더 기능을 구현함에 있어서 문제가 발생하였다.
회사 개발팀의 요구사항은 date picker라이브러리를 어느것이든 사용하여

• 오늘 날짜를 표시
• 선택된 날짜 "yyyy-mm-dd"으로 어느 곳에 표시
• 휴일 데이터를 받아 해당 날짜에는 선택되지 않아야함

이 중 문제가 발생한 곳은 마지막 2가지였다.

1. 휴일 데이터를 받아 해당 날짜에는 선택되지 않아야함

◎ 휴일 데이터

[
{
"title": "휴일1",
"holiday": "2020-05-29"
},
{
"title": "휴일2",
"holiday": "2020-06-04"
},
...
,
{
"title": "휴일7",
"holiday": "2020-07-27"
}
]

◎ "react-day-picker" 에서 원하는 disable date의 형태

<DayPicker
      initialMonth={new Date(2017, 3)}
           //날짜가 선택되지 않도록 하기 위해서는 다음과 같은 형태로 props 전달하여야한다.
      disabledDays={[
        new Date(2017, 3, 12),
        new Date(2017, 3, 2),
        {
          after: new Date(2017, 3, 20),
          before: new Date(2017, 3, 25),
        },
      ]}
    />

props로 전달되는 "disabledDays" 는

[ 선택되지 않을 날짜들,{after: new Date(원하는 날짜) , before : new Date(원하는 날짜) ]
의 형태를 가지고 있다.

◎ 휴일 데이터 ➡︎ 라이브러리에서 원하는 데이터 구조

 //휴일 정보를 받아온다.
  const getDayoffData = async () => {
    try {
      const url = `${URL}/dayoff`;
      const res = await axios.get(url);
      const dayOffArr = res.data.holidays;
      //map()을 통해 새로운 배열 반환
      const daysArr = dayOffArr.map((el) => {
        return new Date(el.holiday.split("-"));
      });
      //받아온 휴일 데이터 state에 배열로 저장
      setDayOffData(daysArr);
    } catch (err) {
      console.log(err);
      alert("다시 시도해보시기 바랍니다.");
    }
  };

• 반환되는 휴일 데이터 (daysArr)

  [ Fri May 29 2020 00:00:00 GMT+0900 (대한민국 표준시),
  Thu Jun 04 2020 00:00:00 GMT+0900 (대한민국 표준시),
  ...
  Sat Jul 11 2020 00:00:00 GMT+0900 (대한민국 표준시),
  Mon Jul 27 2020 00:00:00 GMT+0900 (대한민국 표준시) ]

"dayOffData" 라는 상태값으로 저장된 배열은 위의 props로 전달될 "disabledDays" 에서
"{after: new Date(∼), before: new Date(∼) }"
의 인자를 뺀 것과 같은 형태를 가진다.

항상 그날의 날짜 이전의 날짜들을 선택되지 않도록 설정하기 위해서 아래와 같이 Spread연산자를 이용하였다.

       <DayPicker
        initialMonth={new Date()}
        disabledDays={[...dayOffData, { before: new Date() }]}
        ... />
      

.....작성중...