노마드 코더 - 바닐라 JS로 크롬 앱 만들기(#5.0 ~ #5.3)

#5.0 Intervals

intervals -> 매번 일어나야 하는 무언가를 뜻한다. 예를 들면 매초마다 무엇을 한다라는 말중 매초가 intervals를 뜻한다고 하는데 그 매 시간마다 함수를 실행하게 해주는 것이 바로 setInterval()이다.

setInterval()은 2개의 인자를 받는데 첫번째는 실행하고자 하는 function 두번째는 호출되는 function의 시간간격을

몇ms로 할지 쓰면 된다. 

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

setInterval(sayHello, 5000); // 5000은 5000ms 즉 5초를 뜻한다.

5초마다 hello를 출력을 한다. 

#5.1 Timeouts and Dates

setTimeout() -> function을 딱 한번만 호출하는데 일정시간이 흐른뒤에 호출해준다. setInterval() 과 마찬가지로 2개의 인자를 받는데 첫번째는 function 두번째는 얼마나 기다리고 함수를 실행할지 하는 시간 이라는 점에서 다르다. 

 

Date()

function getClock() { 
	const date = new Date();
    	const hours date.getHours() // 현재 시간을 알려줌
    	const min = date.getMinutes() // 현재 분을 알려줌 
    	const seconds = date.getSeconds() // 현재 초를 알려줌 
    }
    
getClock();
setInterval(getClock, 1000);

setInterval을 써서 1초마다 실행하게 했지만 처음 사이트를 새로고침해서 들어가면 1초 기다리고 시간이 나오기 때문에 그냥 함수를 바로 실행을 시켜주고 그아래에 setInterval을 써준것이다.

#5.2 PadStart

padStart() 

"1".padStart(2, "0") // "1"이라는 문자의 길이를 2로 만드는데 문자의 길이가 만약 2가 아니라면 앞쪽에
// 0을 추가해준다는 의미 "01"이 된다. 문자의 길이가 2일때는 아무런 영향을 안끼친다.

단 number에는 사용할 수 가 없어서 숫자는 String으로 바꿔주는 String() 을 이용해주어야 한다.

const hours = String(date.getHours()).padStart(2, "0");
clock.innerText = `${hours}`; // 지금이 3시라면 03시 이렇게 출력