📘클린코드 (2022.01.31)

DAY 11

책에서 배운 내용 실습

코드 리팩토링

📑 수정 전 코드

const merry = document.querySelector(".js-clock");

function getClock() {
const christmas = new Date("2021, 12, 25");
const date = new Date();
const timeGap = christmas - date;

const xDay = Math.floor(timeGap / (1000 * 60 * 60 * 24));
const xHours = Math.floor(
(timeGap - xDay * 1000 * 60 * 60 * 24) / (1000 * 60 * 60)
);
const xMinutes = Math.floor((timeGap % (60 * 60 * 1000)) / (60 * 1000));
const xSeconds = Math.floor((timeGap % (60 * 1000)) / 1000);

const day = String(xDay).padStart(2, "0");
const hours = String(xHours).padStart(2, "0");
const minutes = String(xMinutes).padStart(2, "0");
const seconds = String(xSeconds).padStart(2, "0");

merry.innerText = `${day}d ${hours}h ${minutes}m ${seconds}s`;
}

getClock();
setInterval(getClock, 1000);

📑 수정 후 코드

const untilChrismas = document.querySelector('.js-clock');
const MSEC_TO_SEC = 1000;
const SEC_TO_MIN = 60;
const MIN_TO_HOUR = 60;
const HOUR_TO_DAY = 24;

paintRemainTime();
setInterval(paintRemainTime, 1000);

function paintRemainTime() {
  const { paintingDay, paintingHour, paintingMinute, paintingSecond } = getRemainTime();
  untilChrismas.innerHTML = `${paintingDay}d ${paintingHour}h ${paintingMinute}m ${paintingSecond}s`
}

function getRemainTime() {
  const christmasDate = new Date('2022, 12, 25');
  const nowDate = new Date();
  const msecTimeGap = christmasDate - nowDate;

  const remainSecond = Math.floor(msecTimeGap / MSEC_TO_SEC);
  const remainMinute = Math.floor(remainSecond / SEC_TO_MIN);
  const remainHour = Math.floor(remainMinute / MIN_TO_HOUR);
  const remainDay = Math.floor(remainHour / HOUR_TO_DAY);

  return {
    paintingDay: padStartTwoString(remainDay),
    paintingHour: padStartTwoString(remainHour % 24),
    paintingMinute: padStartTwoString(remainMinute % 60),
    paintingSecond: padStartTwoString(remainSecond % 60),
  };
}

function padStartTwoString(date) {
  return String(date).padStart(2, '0');
}

수정 내역

• date, merry, day, minutes 등 그냥 봤을때 의미를 정확히 알 수 없는 이름들을 수정하였다.

• 1000, 60, 24 같이 자주 쓰이는 수들의 의미를 파악하고 정리하기 위해 상수로 정의하였다.

• padStart같은 반복해서 사용되는 메서드를 함수로 정의하였다.

• 코드를 잘 이해할 수 있도록 고차원에서 저차원으로 로직을 구현하였다.

책의 내용을 실제 코드에 적용해보니 재미도 있고 확실히 코드가 정리되는것을 확인할 수 있었다.