노마드 코더(Vanilla JS로 크롬 앱 만들기) 영상으로 클론 코딩 하며 기록한 글 입니다
login에 이어서 시계를 넣어보자 👉⏱️⏰⏲️🕰️
setInterval()
, setTimeout()
에 대해서 간단하게 설명하면
setInterval()은 '매번' 일어나야 하는 무언가,
만약 2초이면 -> 매 2초마다 인자로 받은 함수를 매번 동작하는 메서드
setTimeout() 인자로 받은 함수를 한번 동작하는 메서드
날짜 정보를 갖고 있는 new Date()를 적용한다면 ?
new Date object는 현재 날짜,시간,분,초 의 정보를 갖고 있으므로, getClock() 함수를 1초마다 동작하여 실제 시계처럼 보이고 있다
이것을 html에 있는 텍스트에 적용해보자
clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
현재 시간은 오전 12시 09분으로 잘 나타내고 있는 것이 확인 된다
하지만 숫자가 10보다 작으면 한자리 수로 나타내고 있는데
padStart()
라는 메서드를 적용해보자
padStart()
는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환하는 string에 쓸 수 있는 메서드이다
"1".padStart(2,"0")
// 결과 : '01'
"1"의 string 길이를 2로 만드는데 길이가 2가 아니라면
앞쪽에 "0"을 추가 하는 것이다
여기서 뒤에 padStart() 메서드를 붙이게 되면
date.getHours(...).padStart는 함수가 아닙니다.getClock에서
라는 에러 문자가 뜨는데
시간은 number 이기 때문에 number + string이 되기 때문이다
number를 string으로 변환 해야 한다
const hours = String(date.getHours()).padStart(2, "0");
시간을 가져오는 각각의 메서드를 String으로 감싼 뒤 padStart 메서드를 붙여주면 아래의 화면처럼 나타나게 된다