시계 구현도 내가 배운 것들 중에서 응용을 하기가 굉장히 힘든 기능이었다.
배웠던 것 중 Date라는 객체가 내장되어 있던 것은 알고 있었다.
이 Date라는 객체를 이용하면 될 것 같다는 생각이 들었지만 거기까지가 한계였다.
엄청나게 많은 앱을 이용하면서도 당연한 듯이 봐왔던 시계를 직접 앱에서 구현을 하려니 막막하게만 느껴졌다.
그렇게 오늘도 강의 영상의 플레이버튼을 눌러 확인해보았다.
오늘도 역시 새로 배우는 재밌는 메서드가 있었다. setInterval이다.
setInterval을 이용해 1초마다 화면의 컨텐츠를 갱신시킬 수 있었다.
Date 객체와 setInterval 메서드를 이용해 아주 간단하게 구현이 가능한 기능이었다.
Date 객체로 현재 시간의 시, 분, 초를 받아서 HTML의 요소에 textContent로 담아준 뒤 setInterval로 1초마다 시간을 다시 보여주면 된다.
시간은 잘 나왔지만 찝찝한 게 있었다. 10:5:7 10시 05분 07초라는 현재 시간은 잘 표시가 되지만 더 눈에 익숙하게 5분일 때 숫자 앞에 ‘0’을 붙여 ‘05’라고 표시해주고 싶었다.
10:05:07처럼 말이다. 이럴 때 유용한 메서드도 역시 있었다. padStart라는 메서드이다.
이 메서드는 두 개의 인자를 받는데 첫 번째 인자는 string의 길이, 두 번째 인자는 첫 번째 인자에서 설정한 길이보다 짧을 때 채워줄 string이다.
padStart(2, “0”)으로 설정해준다면 될 것이다.
다시 앱을 확인해보면 10:05:07이라고 시계가 제대로 표기가 된 것을 확인할 수 있다.