[Nomad Coders -JS로 크롬앱 만들기] Clock

실시간으로 시간이 흐르는 시계를 만들기 위해서는 

interval에 대한 개념을 알아야 한다.

interval은 매번 일어나야 하는 어떤 행위의 간격을 말한다. 

 

setInterval() 함수를 이용하면 이를 구현할 수 있다.

setInterval(function, 호출 간격)
첫번째 인자에는 실행할 함수를, 두번째 인자에는 호출되는 간격을 milliseconds 단위로 적어준다.

 

예시를 살펴보자.

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

setInterval(sayHello, 5000);

//5초마다 콘솔에 "hello"를 출력

5초마다 sayHello 함수가 호출된다. 즉, 5초마다 콘솔에 "hello"가 출력된다.

 

이렇게 hello가 쌓이는 것을 볼 수 있다.

 

setInterval과 비교해 보아야 할 함수가 하나 더 있다.

바로 setTimeout이다.

 

setTimeout은 setInterval과 달리 지정된 시간 후 한 번 실행되고 함수가 끝난다. 

 

setInterval(function, 호출 시간)

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

setTimeout(sayHello,5000);

//5초 후에 콘솔에 "hello"를 출력

즉 setTimeout을 쓰게 되면 5초 후에 sayHello 함수가 한 번 실행된다. 콘솔에 "hello"가 한 번 찍히게 된다. 

 

 

 

이제 시계를 만드는 데 필요한 재료를 얻기 위해 Date라는 Object를 알아봐야 한다.

 

이 객체는 1970년 1월 1일 UTC(협정 세계시) 자정과의 시간 차이를 밀리초로 나타내는 정수 값을 담고 있다.

 

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date

Date - JavaScript | MDN

 

다양한 method들이 있는데, 시계를 만들기 위해 필요한 것은 getHours(), getMinutes(), getSeconds() 이 세가지이다.

 

이를 토대로 코드를 작성해 보면,

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

function getClock(){
    const date = new Date();
    clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`
}

getClock();
setInterval(getClock, 1000);

이렇게 매초마다 갱신되는 시계를 얻을 수 있다.

 

 

그런데 하나의 문제점이 발생하는데,

 

이렇게 숫자가 한자리 수가 되어 버리는 일이 발생한다.

 

시간이 한자리 수일 경우 앞에 0을 붙이기 위해서 padStart() 함수를 사용할 수 있다.

 

padStart는 문자열의 길이를 지정하고, 그 길이보다 부족할 경우 지정한 문자열을 앞쪽에 채워준다.

 

예를 들어, padStart(2, "0")라고 하면 문자열 길이가 2여야 하고 그보다 작으면 앞쪽에 0을 채운다는 의미이다. 

반대로 padEnd는 뒤쪽에 0을 채운다.

 

해당 함수는 반드시 문자열에만 사용가능하기 때문에 숫자라면 문자열로 바꾸어 넣어줘야 한다.

 

 

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

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");
    clock.innerText = `${hours}:${minutes}:${seconds}`;
}

getClock();
setInterval(getClock, 1000);

 

정리해서 구현하면 요런 코드가 나오고 

 

요렇게 잘 구현이 되었다!!!