노마드 코더(Vanilla JS로 크롬 앱 만들기) 영상으로 클론 코딩 하며 기록한 글 입니다
login에 이어서 시계를 넣어보자 👉⏱️⏰⏲️🕰️
clock.setInterval() , , setTimeout()
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 메서드를 붙여주면 아래의 화면처럼 나타나게 된다
