Review about clock.js

clock.js

const timeContainer = document.querySelector(".clock");
const clockManager = (() => {
    const time = new Date();
    const hours = time.getHours();
    const minutes = time.getMinutes();
    const seconds = time.getSeconds();
    timeContainer.innerText = `${hours < 10
        ? `0${hours}`
        : hours}:${minutes < 10
            ? `0${minutes}`
            : minutes}:${seconds < 10
                ? `0${seconds}`
                : seconds}`;
})
const init = (() => {
    clockManager();
    setInterval(clockManager, 1000);
})
init();	

시간 분 초 정보 가져오기

const time = new Date();
    const hours = time.getHours();
    const minutes = time.getMinutes();
    const seconds = time.getSeconds();

삼항 연산자를 이용하여 나타내기

timeContainer.innerText = `${hours < 10
        ? `0${hours}`
        : hours}:${minutes < 10
            ? `0${minutes}`
            : minutes}:${seconds < 10
                ? `0${seconds}`
                : seconds}`;

시간 분 초 가 한자리 숫자일때 이쁘게 나타나지 않는다. 예를 들면 13시 10분 7초면 13:10:7로 나타난다.

이를 13:10:07로 나타내기 위해서 삼항연산자를 사용하여 10미만일때는 앞에 0을 붙여주었다.

매초마다 업데이트

const init = (() => {
    clockManager();
    setInterval(clockManager, 1000);
})
init();

Init 함수에 clockManager함수를 넣은 후 함수 setInterval을 사용하여 clockManager함수가 1000m/s 즉 1초마다 동기화 되도록 해준다.