[TIL] 2022-11-02

• 이전 코드

여전히 개도라이 같은 반복이 일어나는 중...

  const btnSixBeforeStandard = moment().subtract(6, 'quarter');
  const btnSixYear = btnSixBeforeStandard.year();
  const btnSixQuarter = btnSixBeforeStandard.quarter();
  quarterBtnStr.sixBeforeQuarterBtnStrYear = `${btnSixYear}년`;
  quarterBtnStr.sixBeforeQuarterBtnStrQuarter = `${btnSixQuarter}분기`;

  const btnFiveBeforeStandard = moment().subtract(5, 'quarter');
  const btnFiveYear = btnFiveBeforeStandard.year();
  const btnFiveQuarter = btnFiveBeforeStandard.quarter();
  quarterBtnStr.fiveBeforeQuarterBtnStrYear = `${btnFiveYear}년`;
  quarterBtnStr.fiveBeforeQuarterBtnStrQuarter = `${btnFiveQuarter}분기`;

  const btnFourBeforeStandard = moment().subtract(4, 'quarter');
  const btnFourYear = btnFourBeforeStandard.year();
  const btnFourQuarter = btnFourBeforeStandard.quarter();
  quarterBtnStr.fourBeforeQuarterBtnStrYear = `${btnFourYear}년`;
  quarterBtnStr.fourBeforeQuarterBtnStrQuarter = `${btnFourQuarter}분기`;

  const btnThreeBeforeStandard = moment().subtract(3, 'quarter');
  const btnThreeYear = btnThreeBeforeStandard.year();
  const btnThreeQuarter = btnThreeBeforeStandard.quarter();
  quarterBtnStr.threeBeforeQuarterBtnStrYear = `${btnThreeYear}년`;
  quarterBtnStr.threeBeforeQuarterBtnStrQuarter = `${btnThreeQuarter}분기`;

  const btnTwoBeforeStandard = moment().subtract(2, 'quarter');
  const btnTwoYear = btnTwoBeforeStandard.year();
  const btnTwoQuarter = btnTwoBeforeStandard.quarter();
  quarterBtnStr.twoBeforeQuarterBtnStrYear = `${btnTwoYear}년`;
  quarterBtnStr.twoBeforeQuarterBtnStrQuarter = `${btnTwoQuarter}분기`;

  const btnOneBeforeStandard = moment().subtract(1, 'quarter');
  const btnOneYear = btnOneBeforeStandard.year();
  const btnOneQuarter = btnOneBeforeStandard.quarter();
  quarterBtnStr.oneBeforeQuarterBtnStrYear = `${btnOneYear}년`;
  quarterBtnStr.oneBeforeQuarterBtnStrQuarter = `${btnOneQuarter}분기`;

• 그나마 고친 코드...^^

이즈음엔 솔직히 나도 최선을 다 했다고 생각해 포기하려고 했다...
여전히 개도라이 같지만... 그렇지만...
이렇게까지 하면 꼴은 갖췄었단 말이야...!

근데 사수분이 말씀하시기를 솔직히 코드의 성능이나 그런 건 나중에 생각해도 되고 좋은 코드는 무조건 유지보수가 쉬운 코드라고 했다.
유지보수가 쉬운 코드란 곧 무엇이냐, 누가 봐도 한 눈에 알아볼 수 있기 간편한 코드라고 한다.
만드는 건 시간있으면 얼마든지 만들 수 있는 거니까 솔직히 뭐가 됐든 다 만들 수 있는데,
그걸 만들어 놓은 다음에 유지보수에 시간이 오래 걸리는 거면 그건 아무리 좋게 만들어 놔도 지속가능성에서 엄청나게 품이 드니까 좋지 않은 코드라고.
그리고 이제 혼자 프로젝트를 하는 게 아니고 다른 사람이랑 같이 하니까 다른 사람이 보기에도 한 눈에 알아볼 수 있어야 그게 곧 유지보수가 쉬운 코드로 직결되는 거라고 했다.

이렇게까지 해 놔도 돌아가니까 그만해도 되지만 일단 생각을 더 해보고 좀 더 해보려고 해야 된다고 해서 다시 찬찬히 가르침을 받고...
생각을 더 해 보게 되었어요...

  let btnYear = '';
  let btnQuarter = '';
  const handleBtnStr = (i) => {
    let standard = moment();
    standard = standard.subtract(i, 'quarter');
    btnYear = `${standard.year()}년`;
    btnQuarter = `${standard.quarter()}분기`;
    return btnYear + btnQuarter;
  };
  
  handleBtnStr(6);
  quarterBtnStr.sixBeforeQuarterBtnStrYear = btnYear;
  quarterBtnStr.sixBeforeQuarterBtnStrQuarter = btnQuarter;

  handleBtnStr(5);
  quarterBtnStr.fiveBeforeQuarterBtnStrYear = btnYear;
  quarterBtnStr.fiveBeforeQuarterBtnStrQuarter = btnQuarter;

  handleBtnStr(4);
  quarterBtnStr.fourBeforeQuarterBtnStrYear = btnYear;
  quarterBtnStr.fourBeforeQuarterBtnStrQuarter = btnQuarter;

  handleBtnStr(3);
  quarterBtnStr.threeBeforeQuarterBtnStrYear = btnYear;
  quarterBtnStr.threeBeforeQuarterBtnStrQuarter = btnQuarter;

  handleBtnStr(2);
  quarterBtnStr.twoBeforeQuarterBtnStrYear = btnYear;
  quarterBtnStr.twoBeforeQuarterBtnStrQuarter = btnQuarter;

  handleBtnStr(1);
  quarterBtnStr.oneBeforeQuarterBtnStrYear = btnYear;
  quarterBtnStr.oneBeforeQuarterBtnStrQuarter = btnQuarter;

• 최종 코드

계속 "반복문"을 돌리면 된다는 건 알았는데 어떻게 돌려야 하는지를 전혀 감을 못 잡겠어서 여기를 시작하는 걸 사수분한테 도움받았다.
페이지 함수 안에서 돌아가면 자꾸 루프를 많이 돌아서 망가지는데 이러면... 그냥 아예 밖으로 나가서 함수를 선언한 다음에 가지고 들어오면 되는 거였죠...? 바보죠 진짜...?

그렇게 buttonString을 만들고 얘한테 기준이 되는 버튼의 날짜를 배열 형태로 넣어 준 다음에 얘를 페이지 함수 안에서 실행시켜서 불러온 다음 그 배열을 기준으로 버튼을 6개 만들었다.

이렇게 하면! i의 숫자만 조절하면! 버튼의 갯수까지도 조절 할 수 있다!
대신에 첫번째 버튼이 지금의 시점으로부터 제일 먼 날짜이기에 숫자를 거꾸로 넣었음!
.reverse()로 조절해볼까 싶었는데 이렇게 하려면 이 안의 로직을 다시 짜줘야 하길래 때려치고 그냥 뒤집어서 하는 채로 놔뒀다!

// 기준값 만들어서 배열에 넣기
const buttonString = () => {
  const btnStrArr = [];

  for (let i = 6; i > 0; i -= 1) {
    const standardDate = moment().subtract(i, 'quarter');
    btnStrArr.push(standardDate);
  }
  return btnStrArr;
};

// 배열 불러오기
const buttonStr = buttonString();

// 분기설정 버튼 기능
const selectBeforeQuarter = (ele: Moment) => {
  setDate({
    startDate: moment(ele).startOf('quarter'),
    endDate: moment(ele).endOf('quarter')
  });
};

// 화면에 나타내기
<div>
  {buttonStr.map((ele) => {
    return (
      <QuarterStrBtn
        className=
          ele.startOf('quarter').format('YYYY-MM-DD') === strStartDate &&
          ele.endOf('quarter').format('YYYY-MM-DD') === strEndDate
      ? 'active' : ''
    }
    role="button"
    onClick={() => selectBeforeQuarter(ele)}
      >
        <div>{ele.year()}년</div>
        <div>{ele.quarter()}분기</div>
      </QuarterStrBtn>
    );
  })}
</div>
) : null}