[JavaScript] setInterval과 padStart로 시계 만들기

✅ setInterval 과 setTimeout

1. setInterval()

⏰ 함수를 일정시간 반복하여 실행시켜줌 ( 단위: ms )

setInterval(function, delay)

🎁 예시

function sayHello() {
  console.log("hello");
}

setInterval(sayHello, 5000);
// console에 hello가 5초 간격으로 반복하여 찍힘

2. setTimeout()

⏰ 함수를 일정시간 후 실행시켜줌 (반복실행❌)

setTimeout(function, delay)

🎁 예시

function sayHello() {
  console.log("hello");
}
setTimeout(sayHello, 5000);
// 5초뒤 console에 hello가 한 번만 찍힘

3. 정리

초단위로 바뀌는 시계를 만들어주기 위해서는 현재의 시, 분, 초를 1초마다 가져오는 과정을 반복해주어야 한다. 따라서 이 때에는 setInterval()을 사용하는 것이 적합하다.

✅ 시계 만들기

function getClock() {
  // 현재의 시, 분, 초 가져오기
  const date = new Date();
  const hours = String(date.getHours()).padStart(2, "0");
  const minutes = String(date.getMinutes()).padStart(2, "0");
  const seconds = String(date.getSeconds()).padStart(2, "0");
  // HTML태그에 넣어주기
  $clock.innerText = `${hours}:${minutes}:${seconds}`;
} 
// 웹페이지 열자마자 시계를 볼 수 있도록
getClock(); 
// 1초 간격으로 getClock 함수 실행
setInterval(getClock, 1000); 

1. new Date()로 현재의 날짜와 시간을 알 수 있음을 활용한다. date라는 변수에 담아 활용해준다.
   
   
2. 시, 분, 초를 00:00:00의 형태로 가져오려고 한다. 하지만, 시, 분, 초가 1, 2, 3, ... 과 같이 한자리 수일때는 00과 같은 두자리의 형태를 만족시키지 못한다. 이를 해결하기 위해 padStart()를 사용한다. padStart()는 문자열 앞에 문자열을 채워넣어주고, padEnd()는 문자열 뒤에 문자열을 채워준다.
   📝 str.padStart(목표 문자열 길이, 채워넣을 문자열)
   
   
3. padStart()는 문자열에 사용하는 메서드이므로 String()으로 시, 분, 초로 가져온 값을 문자열로 만들어주어야 한다는 점도 주의할 것
   
   
4. innerText로 HTML의 h2태그 00:00:00에 지금의 시, 분, 초를 넣어준다.
   
   
5. setInterval(getClock, 1000)만을 해주면, 웹페이지를 실행시킨 뒤 1초 뒤부터 시계가 작동한다. 이를 해결하기 위해 바로 앞에 getClock()함수를 넣어 바로 시계가 작동할 수 있게 해준다. (시계가 작동한다는 것은 결국 현재의 시, 분, 초를 1초마다 가져오는 과정을 반복하는 것)

📜 참고

노마드코더ㅣ바닐라 JS로 크롬앱 만들기