노마드코더 AI 기초 탄탄 클럽 #11 Christmas Clock

노마드코더에서 수강 가능한 풀스택 웹 기초를 6주만에 훑는 챌린지. 해당 강의: JS #11은 JS로 크리스마스까지 남은 날짜 Countdown 하기

---

챌린지 조건

1. Date와 setInterval을 사용해 크리스마스까지 며칠이 남았는지 알려주는 시계를 만드세요. (12월 25일)

---

JavaScript Date 객체의 연산 원리

• 자바스크립트에서 날짜끼리 빼기 연산(targetChristmas - nowDay)을 하면 밀리초 단위의 숫자가 반환된다. 따라서 변환이 필요하다.

---

나머지 연산자(%)의 활용

• /는 전체 양을 구할 때 사용 (예: 전체 몇 일 남았나?)
• %는 단위 내 남은 값을 구할 때 사용 (예: 24시간으로 나누고 남은 ‘시간’, 60분으로 나누고 남은 ‘분’)
• ms / 1000 / 60 / 60은 총 ‘시간’을 구하지만, 여기에 % 24를 해줘야 시계에 표시할 0~23 사이의 숫자가 나온다.

  const ms = targetChristmas - nowDay;
  const days = Math.floor(ms / (1000 * 60 * 60 * 24));
  const hours = Math.floor((ms / (1000 * 60 * 60)) % 24);
  const minutes = Math.floor((ms / (1000 * 60)) % 60);
  const seconds = Math.floor((ms / 1000) % 60);
  

---

padStart()

• 숫자를 String()으로 변환한 뒤 padStart(목표길이, 채울문자)를 사용하면 깔끔한 시계 UI를 만들 수 있다.

  const h = String(hours).padStart(2, '0');
  const m = String(minutes).padStart(2, '0');
  const s = String(seconds).padStart(2, '0');

---

const와 let

• 처음에는 targetChristmas가 올해 크리스마스 하나였는데, 서브 미션으로 날짜가 지나갔으면 내년 크리스마스를 타겟으로 해보라고 해서 수정했다.
• const로 선언한 것을 let으로 변경하고, getFullYear()를 이용해 currentYear를 선언했다.
• 값이 재할당될 가능성이 있으면 let을 사용해야한다.

  const nowDay = new Date();
  const currentYear = nowDay.getFullYear();
  let targetChristmas = new Date(`${currentYear}-12-25 00:00:00`);
  if (nowDay > targetChristmas) {
    targetChristmas = new Date(`${currentYear + 1}-12-25 00:00:00`);
  }

---

Series: 노마드코더 - AI 기초 탄탄 클럽