[chrome app 코딩 챌린지] 4. 시스템 시간 가져오기

JavaScipt에선 Date 라는 객체가 있다. 해당 객체는 UNIX 타임스탬프를 담는데, 1970년 1월 1일 자정부터 지난 시간을 밀리초로 나타내는 값이다. Date.now()를 호출하면 어떤 식으로 출력되는 지 알 수 있다.

봐도 뭔소린지 모르겠는데 1초마다 바뀜

new Date() 생성자로 호출할 경우 현재 날짜와 시간을 나타내는 문자열 형태로 새로운 Date 객체를 반환한다. 

내가 표현하고 싶은 것은 저 중 18:47 부분, 즉 분과 초다. 위 처럼 해당 date를 변수로 설정해 값을 저장해준 뒤 getHours()와 getMinutes() 메서드를 이용하면 값을 반환한다. 그 값을 string 형태로 출력해주는 함수를 작성해보도록 하겠다.

코드 리뷰

<div class="status-bar__clock"><span>00:00</span></div>

const clock = document.querySelector(".status-bar__clock span");

function systemClock() {
    const date = new Date();
    const hours = String(date.getHours()).padStart(2, "0");
    const min = String(date.getMinutes()).padStart(2, "0");
    clock.innerText = `${hours}:${min}`
}
systemClock();
setInterval(systemClock, 1000);

• clock은 html에서 출력되는 span의 위치를 저장한다.
• systemClock 함수에서 date는 새로운 Date 생성자다.
• hours는 date.getHours()로 시간을, min은 date.getMinutes()로 분의 값을 변수로 할당했다.  
  • padStart()는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환하는 메서드다. 예를 들어 5.padStart(2, '0')일 경우 5는 05가 된다. 2는 주어진 길이이고, '0'은 새로운 문자열이다. 해당 코드에선 1, 2, 3... 을 01, 02, 03...으로 반환시키기 위해 코드를 썼으며 String()으로 감싸 문자열로 출력되게 했다.
• clock의 innetText를 템플릿 리터럴을 이용해 해당 변수의 값으로 반환했다.
• setInterval()은 고정된 시간 지연으로 함수를 반복적으로 호출하거나 코드 조각을 실행한다. 위 코드는 systemClock 함수를 1000ms, 즉 1초마다 호출시킨다.
• 마지막으로 setInterval 위의 systemClock() 함수를 호출함으로써, 새로고침 후 1000ms 뒤에 시작하는 setInterval을 즉시 출력되게 했다.

결과물

 

위 코드에서 1분에 한번씩 업데이트 되는데 1000은 너무 과도하게 반복적인 것 아닌가? 서버에 문제가 생기지 않을까? 싶어서 setInterval을 60000으로 고쳐봤더니 그때부터 1분 뒤가 지연되며 딱딱 맞춰서 시간이 바뀌지 않았다. 그래서 다시 1000으로 바꿨더니 윈도우 시간과 동일하게 변해 그대로 고정시켰다. Nice Try 😁