1. 목표

현재 시간에 맞게 작동하는 시계를 만들자

2. 정리

1. 현재 시간 가져오기

const now = new Date();
const secnodDeg = (now.getSeconds() / 60) * 360 + 90;

new Date()

현재 시간을 가져온다.
new Date().getSecond() 로 현재 초를 가져온다
이외에 시,분,요일,년도 등 가져올 수 있다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date

2. js에서 element에 style 지정하기

// 시침
        const hourHand = document.querySelector(".hour-hand");
        const hourDeg = (now.getHours() / 12) * 360 + 90;
        hourHand.style.transform = `rotate(${hourDeg}deg)`;

element.style

해당 element의 css를 지정할 수 있다.
위는 hour-hand class에 해당하는 element에
transform: rotate(${hourDeg}deg)를 추가했다.
백틱 기호(`)를 활용해서 js 상수값을 string에 넣어주었다.

3. 일정 시간마다 반복해서 함수 실행하기

setInterval(rotateHands, 1000);

setInterval 을 활용해 callback과 ms(시간)을 지정한다.
ms 마다 callback이 수행된다.