CleanCode TIL (2022.01.31)

Henry Cho·2022년 1월 31일

TIL 노개북

노개북

목록 보기

11/31

DAY 11

🔖 오늘 읽은 범위 : Mission#1

🤓 책에서 기억하고 싶은 내용

중간 mission을 위한 총정리

중복 줄이기, 표현력 높이기, 초반부터 간단한 추상화 고려하기 → 진짜 문제에 신경 쓸 여유 생김
추상적인 개념 하나에는 일관된 단어를 선택해 고수하라
IDE의 자동완성을 생각해서라도 불필요한 접두사 다 붙이지말자
함수에서 들여쓰기 수준은 1단이나 2단을 넘어서면 안된다.
한가지(지정된 함수 이름 아래에서 추상화 수준이 하나인 단계만 수행) 만 해라
함수 인수는 적을 수록 좋다.
부수 효과를 일으키지 마라!
명령과 조회를 분리하라!
오류 코드보다 예외를 사용하라!
500줄을 넘지않는 평균 200줄의 파일로도 커다란 시스템을 구축할 수 있다
신문 기사처럼 작성하라: 추상화 → 세부적, 유사개념은 가까이

고칠 코드

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 getThisChristmasDate = () => {
  const thisYear = new Date().getFullYear();
  return new Date(`${thisYear}, 12, 25`);
};

const getRemainingMillisecondTo = targetDate => targetDate - new Date();

const convertNumToZeroPaddedStr = sec => String(sec).padStart(2, "0");

const parseMillisecondTo = (millisecond, targetType) => {
  const secondFrom = {
    day: 60 * 60 * 24,
    hour: 60 * 60,
    min: 60,
  };
  const second = millisecond / 1000;
  let parsed = 0;
  switch (targetType) {
    case "day":
      parsed = second / secondFrom["day"];
      break;
    case "hour":
      parsed = (second % secondFrom["day"]) / secondFrom["hour"];
      break;
    case "minute":
      parsed = (second % secondFrom["hour"]) / secondFrom["min"];
      break;
    case "second":
      parsed = second % secondFrom["min"];
      break;
    default:
      throw "Wrong date type";
  }
  return convertNumToZeroPaddedStr(Math.floor(parsed));
};

const renderRemainingTimeToChristmas = element => {
  const thisChristmasDate = getThisChristmasDate();
  const remainingMillisecond = getRemainingMillisecondTo(thisChristmasDate);

  const day = parseMillisecondTo(remainingMillisecond, "day");
  const hour = parseMillisecondTo(remainingMillisecond, "hour");
  const minute = parseMillisecondTo(remainingMillisecond, "minute");
  const second = parseMillisecondTo(remainingMillisecond, "second");

  element.innerText = `${day}d ${hour}h ${minute}m ${second}s`;
};

const clock = document.querySelector(".js-clock");
setInterval(() => renderRemainingTimeToChristmas(clock), 1000);