이번에 wecode를 하면서 만나이를 계산하는 문제가 나왔다.
그래서 예전에 했던 D-day 계산기를 다시 복습할 생각이다.
크리스마스까지 몇 일 남았을까 🤔❓
이제부터 코드를 하나씩 뜯어 보자 🚀
1) getTime()
-
const dday = new Date("2021-12-25T00:00:00+0900").getTime();
getTime()은 1970년 1월 1일을 기준으로 얼마만큼의 밀리세컨드가 지났는지를 알려주는 메서드이다. 크리스마스를 기준으로 밀리세컨드 값을 dday에 저장한다. -
const today = new Date().getTime();
오늘 날짜를 기준으로 밀리세컨드 값을 today에 저장한다. -
const gap = dday - today;
크리스마스부터 오늘까지 밀리세컨드 값의 차를 gap에 저장한다.
2) get day, hour, minute, second
-
const day = String(Math.floor(gap / (1000 * 60 * 60 * 24))).padStart(3, "0");
gap은 밀리세컨드 값이기 때문에 1000(초) * 60(분) * 60(시) * 24(일)로 나누어 day를 구하고,
Math.floor로 소수점은 버린다. (소수점 부분으로 시, 분, 초를 구한다.)
세자리수로 표시하기 위해 .padStart(3, "0")을 추가한다. -
const hour = String(
Math.floor((gap % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60))
).padStart(2, "0");
위와 마찬가지로 gap를 day로 나눈 나머지를 다시 1000(초) * 60(분) * 60(시)로 나누어 h를 구하고, Math.floor로 소수점은 버린다. -
const min = String(
Math.floor((gap % (1000 * 60 * 60)) / (1000 * 60))
).padStart(2, "0");
반복 -
const sec = String(Math.floor((gap % (1000 * 60)) / 1000)).padStart(2, "0");
또 반복
3) 화면에 표시
-
clockTitle.innerText = `${day}d ${hour}h ${min}m ${sec}s`;
화면에 표시하는 코드까지 함수에 포함시키고, -
Dday();
함수를 호출한다. -
setInterval(Dday, 1000);
초 단위로 화면이 갱신되도록 한다.
💡 후기
솔직히 처음 이 코드를 공부했을 때는 그냥 음~ 그렇구나~ 하면서 넘어갔지, 내 것이 되었다는 느낌은 없었다. 그 후로 지금까지 공부를 얼마나 했는지 실감이 나지 않았는데, 이렇게 다시 되짚어보니 쪼끔 성장했을지도...?
