5.3 Recap

getclock() 이라는 function을 만들었고 그 안에는 현재 날짜와 시간을 나타내는 Date() 객체를 이용해서 시계를 만들었다. 그리고 Date() 메서드를 통해서 시, 분, 초를 알아내고 구한 시간을 clock의 innerText로 넣어줬다. clock는 id가 clock인 h2였다.

padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워 넣기는 대상 문자열의 시작(좌측)부터 적용됩니다. 가지고 있는 string을 보다 길게 만들어야 할 때 사용한다. 그래서 원하는 만큼의 길이가 아닌 경우 string의 앞쪽에 문자를 끼워 넣는다.

date()메서드 는 padStart()를 사용할 수 없다. getHours()는 Number이기 때문이다. 그래서 Number(숫자)에서 String(자료형)으로 변경해 줘야 할 필요가 있다. padStart()의 두 번째 매개변수 padString의 타입은 String이라서 다른 자료형을 입력하려면 toString()을 사용해 문자열 형태로 바꿔서 사용해야 한다.

setInterval() 함수는 주기적으로 인자를 실행하는 함수이다. 첫번째 인자로 실행할 함수의 이름을 적는다. 두번째 인자로 반복 주기를 밀리초(ms) 단위로 받는다. 만약 setInterval()이 없다면 새로고침을하고 웹사이트가 로드 될때 시간을 새로 만들어내긴 하지만 로드 했을때 당시의 시간만 보여줄것이고 한 번만 실행되고 작업이 반복되지 않을것이다.

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

function getClock() {
  const date = new Date();
  // 현재 날짜와 시간을 나타내는 new Date()를 date라는 변수로 선언한다.
  // 인수를 전달하지 않으면 현재 날짜와 시간을 가지는 인스턴스를 반환한다.
  const hours = date.getHours().toString().padStart(2, "0");
  // padStart(2, "0") - string이 가져야 하는 길이를 2로 설정
  // 그렇지 않다면 string의 앞쪽에 0을 추가하도록 한다.
  const minutes = date.getMinutes().toString().padStart(2, "0");
  const seconds = date.getSeconds().toString().padStart(2, "0");
  // Date() 메서드를 통해 시 분 초를 각각의 변수로 선언한다.
  clock.innerText = `${hours}:${minutes}:${seconds}`;
  // 변수로 선언한 Date() 메서드를 이용해서 시, 분, 초를 clock의 innerText로 넣어준다
}

getClock();
// 웹사이트가 로드되면 getClock()을 바로 호출한다.
setInterval(getClock, 1000);
// setInterval() 함수는 주기적으로 인자를 실행하는 함수이다. / 1초 뒤에 getClock()함수를 실행
// 첫번째 인자로 실행할 함수의 이름을 적는다. 두번째 인자로 반복 주기를 밀리초(ms) 단위로 받는다.