안녕하세요 수지님 ~ ^ㅡ^ ~ 문의주신 질문에 답변드려요.

먼저 setInterval()은 작동에 아무런 문제가 없어요. 정작 문제는 다른 곳에 있었습니다. :-)

코드를 다음과 같이 수정하면 문제가 해결 되요. 코드를 읽어본 후 문제를 발생시킨 원인과 해결 방법에 대해 이야기 나눠봅시다.

// -----------------------------------------------------------------------------
// 수지님 코드
// -----------------------------------------------------------------------------
// var date_obj        = new Date();
// var current_hours   = Number(date_obj.getHours());
// var current_minutes = Number(date_obj.getMinutes());
// var current_seconds = Number(date_obj.getSeconds());
// -----------------------------------------------------------------------------


// -----------------------------------------------------------------------------
// 수정한 코드
// : 변수를 함수로 변경
// -----------------------------------------------------------------------------
var currentHours   = function(){ return Number(new Date().getHours()) };
var currentMinutes = function(){ return Number(new Date().getMinutes()) };
var currentSeconds = function(){ return Number(new Date().getSeconds()) };
// -----------------------------------------------------------------------------


var hour_hand   = document.getElementsByClassName('hour-hand')[0]
var minute_hand = document.getElementsByClassName('minute-hand')[0]
var second_hand = document.getElementsByClassName('second-hand')[0]


// -----------------------------------------------------------------------------
// 수정한 코드
// : 변수에서 함수 호출 코드로 변경
//
// 예) current_hours ⇒ currentHours()
// -----------------------------------------------------------------------------
function hourDesign() { 
   hour_hand.style.transform = 'rotate(' + 30 * currentHours() + 'deg)';
}
function minuteDesign() {
   minute_hand.style.transform = 'rotate(' + 6 * currentMinutes() + 'deg)';
}
function secondDesign() {
   second_hand.style.transform = 'rotate(' + 6 * currentSeconds() + 'deg)';
}

원인

setInterval() 은 문제 원인이 아니었어요. timeRoad() 함수 내부에 console.log() 코드를 통해 확인해보면 정상적으로 1초마다 함수가 호출되는 것을 확인할 수 있었어요.

그렇다면?! 무엇이 문제 원인 일까요?

원인은 시간을 가져오는 코드가 로딩 시 1회만 수행된다는 점이었습니다.

시계를 만들려면 지속적으로 변경되는 시간 정보 값을 가져와야 하는데 변수에 할당된 값을 로딩 시 1회만 처리 되었으니 시간이 흘러도 값이 변경되지 않아 멈춘 것처럼 보였던 겁니다. :-)

var date_obj = new Date();

var current_hours   = Number(date_obj.getHours());
var current_minutes = Number(date_obj.getMinutes());
var current_seconds = Number(date_obj.getSeconds());

해결책

이 문제는 지속적으로 시간이 변경될 때마다 값을 다시 할당 받아 처리하면 됩니다. 그렇습니다! 재사용이 필요하다고 생각들거에요. 네 맞아요! 함수가 필요합니다.

변수를 사용해 1회만 할당 받던 코드를, 호출할 때 마다 변경된 시간 정보를 반환하는 함수로 모두 변경합니다.

var currentHours   = function(){ return Number(new Date().getHours()) };
var currentMinutes = function(){ return Number(new Date().getMinutes()) };
var currentSeconds = function(){ return Number(new Date().getSeconds()) };

마무리로 시, 분, 초를 처리하던 함수 내부 코드에 현재 시간 정보를 가져오는 각 함수를 호출하는 코드로 변경합니다. :-)

function hourDesign() { 
   hour_hand.style.transform = 'rotate(' + 30 * currentHours() + 'deg)';
}
function minuteDesign() {
   minute_hand.style.transform = 'rotate(' + 6 * currentMinutes() + 'deg)';
}
function secondDesign() {
   second_hand.style.transform = 'rotate(' + 6 * currentSeconds() + 'deg)';
}

짜잔!! 이제 문제가 해결되고, 시계는 초침이 움직이는 것을 확인할 수 있을 거에요~ 예! :-)

요약

변수에 할당된 값이 1회만 처리 되서 발생한 문제 였어요. 이 문제를 함수를 사용해 해결할 수 있었습니다. 함수의 중요성과 필요성을 다시금 느낄 수 있는 풀이 과정이었습니다. :-)

FIN.