월요일을 쉬고 화요일부터 시작해서 그런지 벌써 주말이다. 아침에 wecode에 오니 아무도 없어 1주차 블로그를 써보자 한다.

1차 dete slide

일단 위에 짤을 보자... 엄청난 삽질의 결과였다.
처음에 date slide를 구현하기 위해서 react slick과 date-fns를 사용하였다가 직접 구현하는 것보다 더 어렵고 코드가 깔끔하게 정리가 되지 않는다고 생각이 들어 갈아엎어버렸다.
그래도 많은 시간을 쏟았기에 코드와 기능되는 것을 남겨두고 싶어 촬영을 하였다.

2차 date slide

기본적으로 1차 date slide를 만들려고 생각했던 로직을 비슷하게 사용했고 멘토님도 많은 도움을 주셔서, 다시 만들었지만 시간이 생각보다 덜 걸렸다.
날짜를 만들어주는 것이 가장 오래 걸렸던 것 같다.

코드를 보자
전체적인 코드보다는 중요하다고 생각되는 코드만 적어보려고 한다.

  const getDateList = idx => {
    const week = ['일', '월', '화', '수', '목', '금', '토'];
    const today = new Date();
    const newDate = new Date(today.setDate(today.getDate() + idx));
    const year = newDate.getFullYear();
    const month = newDate.getMonth() + 1;
    const date = newDate.getDate();
    const day = week[newDate.getDay()];
    return { year, month, date, day };
  };

javascript에 내장 함수를 사용하여 년, 월, 일, 요일을 구했다. 처음 써봐서 많이 검색해보았고 이어지는 날짜를 구하는 것에 고민을 많이 했다.

{[...Array(MAX_DATE)].map((_, idx) => {
  const dateInfo = getDateList(idx);
  return (
    <React.Fragment key={idx}>
      {setYearArea(idx, dateInfo)}
      <DateBox
        id={idx}
        key={`DateBox${idx}`}
        width={DATEBOX_WIDTH}
        dateInfo={dateInfo}
        disabled={idx > 6 ? true : false}
        isSelected={idx === curDate}
      />
    </React.Fragment>
  );
})}

MAX_DATE를 상수 data로 만들고 map함수를 돌며 date와 day를 쭉 찍어주도록 만들었다. setYearArea가 뭔지 보자

<DateSliderContainer ref={dateBtnWrapperRef}>
  {[...Array(MAX_DATE)].map((_, idx) => {
    const dateInfo = getDateList(idx);
    return (
      <React.Fragment key={idx}>
        {setYearArea(idx, dateInfo)}
        <DateBox
          id={idx}
          key={`DateBox${idx}`}
          width={DATEBOX_WIDTH}
          dateInfo={dateInfo}
          disabled={idx > 6 ? true : false}
          isSelected={idx === curDate}
        />
      </React.Fragment>
    );
  })}
</DateSliderContainer>

함수를 만들고 map함수를 돌리는 것이 신기하고 더 깔끔하다고 생각이 들었지만, 멘토님이 그냥 함수로 만들지 말고 안에서 map을 돌리는 것이 더 보기 좋을 것 같다고 하셨다.
년과 월은 다 만들어 주는 것이 아니고, 현재 날짜와 1일에만 각 해당되는 년과 월을 만들어 준 뒤에 css를 활용하여 버튼을 누를 때마다 date의 width만큼 왼쪽으로 이동하여 date에 붙어있는 것처럼 로직을 만들었다.(1차 영상을 보면 한박자 느리게 움직인다ㅋ)

dateBtnWrapperRef부분도 useRef를 사용하여 arrow버튼을 누를 때마다 아래처럼 style.transform을 이용하여 옆으로 이동되도록 만들었다.

  const handleArrowBtn = direction => {
    if (direction === 'left' && curDate !== 0) {
      dateBtnWrapperRef.current.style.transform = `translateX(${
        -DATEBOX_WIDTH * (curDate - 1)
      }px)`;
      setCurDate(prev => prev - 1);
    } else if (direction === 'right' && curDate !== MAX_DATE - 20) {
      dateBtnWrapperRef.current.style.transform = `translateX(${
        -DATEBOX_WIDTH * (curDate + 1)
      }px)`;
      setCurDate(prev => prev + 1);
    }
  };

2차 프로젝트에서 예매페이지를 맡으며, 자신이 있었지만 처음부터 너무 어려워 후회를 조금했었다.
어떻게든 하면 된다 라는 생각으로 일단 키보드를 쳤다. 삽질도하고 멘토님의 도움을 많이 받기도 했지만, 어쨋든 잘 작동이 되는 중이다.
아직 이해해야 할 부분이 있다고 생각하니, 정확히 이해하고 다시 코드를 뜯어보는 시간이 필요할 것이다.