[JavaScript] 일반적인 달력 만들기 - 날짜 이동 버그 수정하기!

갑자기 너무 바빠졌다는 핑계로 블로그 관리를 소홀히 하던 중 오랜만에 들어왔더니 너무 감사하신 분이 버그를 제보해 주셨습니다.

잉? 31일엔 왜 2개월이 넘어가지..?!...

그러고 나서 왜 그런지 봤더니 지난달, 다음 달로 넘어가는 코드를 제가 너무 고민 없이 작성했더라고요!

let date = new Date();


// ...( 생략 )...

const prevMonth = () => {
  date.setMonth(date.getMonth() - 1);
  renderCalendar();
}

const nextMonth = () => {
  date.setMonth(date.getMonth() + 1);
  renderCalendar();
}

const goToday = () => {
  date = new Date();
  renderCalendar();
}

이 코드가 바로 문제의 코드였습니다!

이 코드를 보자마자 아차! 싶더라고요!

혹시 지금 이 글을 보고 계신 여러분도 왜 그런지 문제를 알아차리셨나요!?

 

문제는 제가 단순히 다음 달로 넘어간다고 생각해서 Month 만 + 1을 했기 때문이었어요!

오늘 날짜가 만약 8월 31일인데 month 값만 +1을 하게 되면 9월 31일... 그런데 문제는 9월 31일이라는 날짜는 실제로 존재하지 않기 때문에  date에는 9월 30일의 바로 다음날인 10월 1일이라는 날짜가 계산되는 것이었습니다! 

그래서 오늘 날짜가 31일인 경우에는 지난달, 다음 달 이동이 제대로 동작하지 않았던 것이죠!

이 문제는 다음 달 이동뿐만 아니라 당연히 지난달 이동에도 문제가 있었습니다.

 

잔소리를 더 얹자면 이 문제는 꼭 31일이 아니더라도, 1월 30일에서 2월로 넘어갈 때, 3월 30일에서 2월로 넘어갈 때 같은 문제가 발생했었는데요.

 

그럼 이 문제를 어떻게 해결하면 좋을까요?

 

사실.. 시간이 지난 지금에서 제가 제 코드를 보고 있노라니... 코드 전체를 다 리팩터링 해버리고 싶은 마음이 굴뚝같지만.. 아무튼!

가장 간단하게 해결할 수 있는 방법은 이번 달 지난달 이동 메서드 안에서 setMonth를 하기 전에 setDate 메서드로 날짜를 1로 설정해주는 겁니다.

// ...

const prevMonth = () => {
  date.setDate(1);
  date.setMonth(date.getMonth() - 1);
  renderCalendar();
}

const nextMonth = () => {
  date.setDate(1);
  date.setMonth(date.getMonth() + 1);
  renderCalendar();
}

// ...

이렇게 말이죠!

그럼 1일은 항상 지난달, 다음 달에 포함되어 있으니 31일 일 때 발생하는 문제가 사라집니다!

 

제보해주신 분께 다시 한번 감사하다는 말씀을 드립니다. 덕분에 저도 성장할 수 있었습니다.