CLOCK

• 서로 다른 기능들에 대해서 파일 각각 만들어주기

• interval : '매번' 일어나야 하는 무언가를 의미.
  setInterval(실행하고자 하는 함수명, 함수 호출 간격(ms)) : 함수를 특정 시간마다 실행함. 매 호출 사이에 얼마나 기다릴지 시간을 써주면 된다. = clock 만드는 방식

• timeout : 일정한 시간이 지난 후에 함수를 1번만 호출하는 것
  setTimeout(실행하고자 하는 함수명, 함수 호출 간격(ms)) :

** 1000ms = 1s

• js 가 가지고 있는 Date object라는 tool을 이용한다.
  new Date() : 호출 당시의 날짜와 시간을 알려줌
  new Date().getHours()

• padStart() : string 앞에 문자 추가하는 것 (padStart()는 뒤에 문자 추가)
  ex) "1".padStart(3, "0") // 앞의 string에 대하여 길이가 3인 string "100" 반환(길이가 3 이상이라면 추가하지 않음)
  0초를 00초로 표기하기
  시간 string이 최소한 2개의 문자를 가져야 한다.
  먼저, 시간 number를 text로 변환해주어야 한다. String() 사용.

• 숫자나 불리언을 문자열로 변환하는 방법
  1. 숫자.toString()
  2. String(숫자)
  3. "" + 숫자, 숫자 + ""

const clock = document.querySelector("h2#clock");

function getClock() {
  const date = new Date();
  const hour = String(date.getHours()).padStart(2, "0");
  const min = String(date.getMinutes()).padStart(2, "0");
  const sec = String(date.getSeconds()).padStart(2, "0");
  clock.innerText = `${hour}:${min}:${sec}`;
}

getClock(); // 웹 로드되자 마자 실행
setInterval(getClock, 1000); // 매초마다 getClock 실행 -- 실시간 시간을 보여줌