[Clean Code] 미션 - Day 11

Clean Code 미션 Day 11

1. DAY 11

🔖 미션: 더러운 코드를 고치자

---

1.1. 💩 더러운 코드

      

      

      

    
    

      <code />
    
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);

1.2. 🤔 클린 코드

      

      

      

    
    

      <javascript />
    
setInterval(printXmasTime, 1000);

function printXmasTime() {
  const clock = document.querySelector('.js-clock');
  const { day, hours, minutes, seconds } = getXmasTime();
  clock.innerText = `${day}d ${hours}h ${minutes}m ${seconds}s`;
}

function getXmasTime() {
  const xMasDate = new Date('2021, 12, 25');
  const date = new Date();
  const timeGap = xMasDate - date;

  const SET_DAY = 1000 * 60 * 60 * 24;
  const SET_HOURS = 1000 * 60 * 60;
  const SET_MINUTES = 1000 * 60;
  const SET_SECONDS = 1000;

  const xMasTime = {
    day: setPadStart(Math.floor(timeGap / SET_DAY)),
    hours: setPadStart(Math.floor((timeGap - xDay * SET_DAY) / SET_HOURS)),
    minutes: setPadStart(Math.floor((timeGap % SET_HOURS) / SET_MINUTES)),
    seconds: setPadStart(Math.floor((timeGap % SET_MINUTES) / SET_SECONDS)),
  };

  return xMasTime;
}

function setPadStart(number) {
  return String(number).padStart(2, '0');
}

1.3. 👀 미션 후기

일단 코드의 로직을 최대한 건들지 않으면서 코드를 개선 하려고 했다. 

왜냐하면 모두 고쳐버리면 리팩토링이 아니라 그냥 내가 새로 짜는 느낌이라..?

'클린 코드'책에서 배운 내용과 같이 내가 적용한 내용은

• 함수는 최대한 하나의 기능만 하도록 분리함
• 중복되는 내용을 하나의 함수로 작성함
• 신문을 읽듯이 위에서 아래로 자연스럽게 읽을 수 있도록 함수의 순서를 변경함
• 변수, 함수 이름 내용 좀 더 명확하게 변경함
• 사용할 변수 위치와 해당 변수의 위치를 가깝게 위치시킴