[javascript] AnalogClock

⏱ Analog시계를 구현해 보자! 
노트북 화면 바탕에 동그란 시계를 띄워놓을 수 있는 기본적인 테마를 많이 봤을 것이다. 
javascript로 1초 간격으로 시침, 분침, 초침이 모두 일정 각도로 회전하는 시계를 구현해 보자 🤜🏻

 

✨ 결과물

👉🏻 현재 시각에 맞게 시침, 분침, 초침이 지정한 각도로 움직이도록 코드를 작성하였고, 시계를 n개 생성할 수 있도록 코드 재사용이 가능하도록 구현하였다. 

 

 

 

 

---

📌 시침, 분침, 초침의 각도를 javascript로 --deg(CSS) 값 조절
📌 시계는 재사용이 가능하도록 구현

 

✅ 현재 시간을 가져오기 위해 new Data()을 사용

    const now = new Date();

    const hour = now.getHours();
    const minute = now.getMinutes();
    const seconds = now.getSeconds();
    const milliseconds = now.getMilliseconds();

💡 new Date()을 통해 현재 시간을 가져오고, 각 시간에 대한 시, 분, 초, 밀리초를 가져와 각각의 변수에 할당하였다.
* 시 : hour
* 분 : minute
* 초 : seconds
* 밀리초 : milliseconds

 

 

 

✅ 시, 분, 초에 맞는 각도를 변수와 맞게 계산

- hour의 경우 👉🏻 hour * 1시간에 30도
- minute의 경우 👉🏻 minute * 1분에 6도
- seconds의 경우 👉🏻 seconds * 1초에 6도
- milliseconds의 경우 👉🏻 milliseconds * (6 / 1000)

 

 

 

✅ 계산한 각도를 적용하기 위해 javascript로 CSS 변수('--deg') 값 변경

✨ 변수명.style.setProperty('--deg, hourDeg +... )

💡 CSS에 지정해 놓은 변수 '--deg'를 javascript로 변경하기 위해 setProperty()를 사용하였다. 

💡 해당 각도에 맞게 변경되도록 계산 구현

 

 

 

✅ 1초에 한번씩 각도가 움직이도록 setInterval() 사용

setInterval(() => { setclock() }, 1000);

💡 1초에 한 번씩 시, 분, 초 각도가 움직이도록 각도를 계산한 함수인 setclock()을 setInterval()을 통해 동작시켰다.

 

 

 

---

처음 코드를 구현할 때, 아날로그시계 재사용을 생각하지 못하고,
전체를 감싸는 함수에 화면 구성 / 각도 계산 / 시간 계산 등을 전부 구현해 놓아서,
재사용을 하려니 시계가 산산조각이 나는 것을 보고 멘붕이 왔었다.. 🫠

'anlog-clock' 시계 전체를 forEach() 문으로 돌려 재사용할 수 있는 코드로 구현하기 위해
무엇이 문제일까하고 전체적인 틀을 다시 구성해 하나로 모아두었던 함수를 분리하였다.
분리 후, 시계 전체를 target으로 잡아 각각의 시,분,초를 선택할 수 있도록 구현하였더니 정상적으로 작동하였다.
 
재사용.. 😬 구현해놓은 코드를 반복해서 만들면 되지 않나..?라는 쉬운 생각을 했다가 애 먹었다 😵‍💫