02. CSS + JS Clock

프로젝트 소개

• 아날로그 시계(초, 분, 시침 포함)을 제작

코드 작성 순서

1. 매초 현재 시, 분, 초 값을 가져오는 함수 실행
2. 해당 시, 분, 초 값을 회전량으로 변환(360도)
3. 해당 로테이션 값을 초, 분, 시침의 transform: rotate() 값에 넣어줌
   @ 주의할 점: 각도 변환시 최초 -90도에서 시작하므로 +90을 하고, 시간은 12시간 기준으로 넘어가는 경우와 그렇지 않은 경우 나눠 삼항 조건 연산자 활용하면 편리

배운 것들

시간 관련 date() 속성

:오늘 날짜, 현재시간 등 날짜와 시간 관련 method는 'Date()' 내장 함수 참조
https://goddaehee.tistory.com/234

setInterval

: setInterval은 일정시간 간격으로 특정 함수를 주기적으로 호출하는 것이고, setTimeout은 일정 시간 후에 특정 함수를 1번 호출하는 것임. 따라서, setTimeout은 재귀함수 형식으로 사용해야 함.
https://offbyone.tistory.com/241

최종 코드

const secondHand = document.querySelector(".second-hand");
  const minuteHand = document.querySelector(".min-hand");
  const hourHand = document.querySelector(".hour-hand");

 function clock() {
  let now = new Date()
  let second = now.getSeconds()
  let minute = now.getMinutes()
  let hour = now.getHours()
   
  let rotateSecond = (second/60) * 360 + 90; 
  let rotateMinute = (minute/60) * 360 + 90;
  let rotateHour =  (hour > 12 ? ((hour-12)/12) * 360 + 90 : hour/12 * 360 + 90);

  secondHand.style.transform = `rotate(${rotateSecond}deg)`
  minuteHand.style.transform = `rotate(${rotateMinute}deg)`
  hourHand.style.transform = `rotate(${rotateHour}deg)`

  console.log(now);
  console.log(rotateSecond, rotateMinute, rotateHour);
 }

 setInterval(clock, 1000);

느낀 점

• 분, 초와 달리 시간은 24시간 기준으로 데이터를 가져오지만, 실제 시계는 12시 기준으로 되어 있어서, 이에 대한 변형이 필요했음.
• 12보다 큰 경우는 12을 뺀 다음 시간에 대응하는 rotate 각도를 계산하는 식으로 삼중 조건 연산자를 활용하여 편리하게 변형했음.