TIL : 최종프로젝트 22일차

시차 버그 해결하기

전에 작성시간에 시차가 있는 것 같아서 작성시간의 9시간 뒤로 시차를 맞추도록 수정했었다.

하지만, 새벽에 작성했을 때 시간을 나타내는 부분에 24이상의 숫자가 나오고 있는 걸 확인했다. 예외의 경우는 생각을 못하고 시간에만 9를 더해서 발생한 버그였다.
하지만, 시간을 맞추면 일자도 안맞는 경우가 생기고, 일자를 맞추면 월도 안 맞게 되어서 부분부분에 조건문을 주어서 해결했다. 물론 완벽한 방법은 아니다. 2월은 연도에 따라 끝나는 일자가 다르기 때문이다.

해결할 수 있는 제일 좋은 방법은 글을 post할 때, 다른 방법으로 날짜를 넣는 방법인 것 같다. 지금은 쌓인 데이터가 꽤나 있어서 전체적으로 일일이 시간을 수정해야하기 때문에 나중에 리팩토링 할 생각이다.

게시물이 보여질 때, 항상 작성시간도 나타내는데, 아래 코드가 그 때마다 반복되는 건 비효율적이라고 생각해서 useDate라는 커스텀 훅을 만들었다. 날짜를 나타내는 부분이 .map안에 있어서 이 부분을 컴포넌트로 만들어서 재사용 하도록 했다. ( 콜백함수 내에서 hook사용 안됨 )

const useDate = (time: any) => {
  //분
  const minute = JSON.parse(time).substr(14, 2);

  //시간 ( + 9:00 )
  const hourNum = Number(JSON.parse(time).substr(11, 2)) + 9;
  const hour = hourNum > 23 ? hourNum - 24 : hourNum;

  //일 ( 24시 이상 숫자 처리 )
  const dateNum = Number(JSON.parse(time).substr(8, 2));
  let date = hourNum + 9 > 23 ? dateNum + 1 : dateNum;

  //월 ( 28,30,31일 이상 숫자처리 )
  const monthNum = Number(JSON.parse(time).substr(5, 2));
  let month;
  if (monthNum === 2) {
    month = date > 28 ? monthNum + 1 : monthNum;
    date = 1;
  } else if (monthNum === 4 || 6 || 9 || 11) {
    month = date > 30 ? monthNum + 1 : monthNum;
    date = 1;
  } else {
    month = date > 31 ? monthNum + 1 : monthNum;
    date = 1;
  }

  //연 ( 12월 이상 숫자처리 )
  const yearNum = Number(JSON.parse(time).substr(0, 4));
  let year;
  if (month > 12) {
    year = yearNum + 1;
    month = 1;
  } else {
    year = yearNum;
  }

  return { year, month, date, hour, minute };
};

❗️ 위 코드로 인해 버그발생 ⇒ 해결 완료 ( 0308TIL )