< Clean Code > Day 11

지금까지 읽은 클린 코드 내용을 바탕으로 주어진 코드를 더 깔끔하게 리팩토링하는 미션!
기존 로직은 최대한 건드리지 않으며 작업하려 노력했다.

개선사항:

1. 클래스와 함수명 좀 더 명확하게 개선
2. 반복되는 식(날짜계산식) 변수로 만들어 정리
3. 반복되는 함수(0 붙이는 기능) 따로 함수로 만들어 정리
   
   

💩 더러운 코드

function runChristmasClockEverySecond(){
setInterval(setChristmasRemainingClockTime, 1000);
}

function setChristmasRemainingClockTime() {
const christmasClock = new ChristmasClock();
setChristmasClockElementTimeRemains(christmasClock.getRemainingChristmasTimegap());
}

function setChristmasClockElementTimeRemains({day, hours, minutes, seconds}){
getChristmasClockElement().innerText = ${day}d ${hours}h ${minutes}m ${seconds}s;
}

function getChristmasClockElement(){
return christmasClock = document.querySelector(".js-clock");
}

runChristmasClockEverySecond();

🤔 클린 코드(?)

const countdown = document.getElementById("clock");

function getClock() {
const now = new Date();
const end = new Date("2022, 12, 25");
const timeGap = end - now;

const seconds = 1000;
const minutes = seconds 60;
const hours = minutes 60;
const days = hours * 24;

const leftDays = Math.floor(timeGap / days );
const leftHours = Math.floor( (timeGap % days) / hours );
const leftMins = Math.floor( (timeGap % hours) / minutes );
const leftSecs = Math.floor( (timeGap % minutes) / seconds );

function addZero (time) {return String(time).padStart(2,"0");}
const daysWith0 = addZero(leftDays);
const hoursWith0 = addZero(leftHours);
const minutesWith0 = addZero(leftMins);
const secondsWith0 = addZero(leftSecs);

countdown.innerText = ${daysWith0}d ${hoursWith0}h ${minutesWith0}m ${secondsWith0}s;
}

getClock();
setInterval(getClock, 1000);

🔖 느낀 점:

생각보다 쉽지 않았고, 또 그만큼 재밌었다. 배운 내용을 직접 적용하는 것만큼 빠르게 익힐 수 있는 길이 또 있을까. 열심히 해보았지만 아쉬운 부분도 있었다:

1. 이미 날짜가 지났을 때 다른 화면을 반환하는 로직이 빠졌다.
2. 날짜 앞에 0 을 추가하는 함수를 따로 뺐어야 했는데 (클린코드에 따르면 함수 하나에 기능 하나인데 여기서는 getClock() 안에 함수가 하나 더 있는 꼴...) 이 부분이 좀 아쉽다.

완전히 만족할 수 는 없었지만, 한층 성장할 수 있었다고 느껴졌던 시간이었다.