[JavaScript] Clock 만들기

✔️ 원하는 바

• 초단위까지 보여주는 시계 만들기
• 한자리수 단위의 시,분,초면 앞에 0 채워넣기
• 요일, 날짜 등도 Show!

---

▪️ new Date()를 사용하면 javascript에서 제공해주는 시간을 얻어와 간편하게 시간을 작성할 수 있다.

▪️ 위와 같이 new Date()에서 get_()로 시간을 긁어오면 시간/분/초가 10보다 작은 경우 시계 모양이 이상해진다.(예를 들어 9시 3분인 경우 9:3) 어떻게 해결할까?

• if문으로 처리하기

if (minute.toString().length === 1){
    minute = '0' + new Date().getMinutes();
}

if (second.toString().length === 1){
    second = '0' + new Date().getSeconds();
}

• padStart 사용하기

const h2 = document.querySelector('h2#clock')

function clock(){
    const date = new Date()
    const hour = date.getHours().toString().padStart(2,'0')
    const minute = date.getMinutes().toString().padStart(2,'0')
    const second = date.getSeconds().toString().padStart(2,'0')
    h2.innerText = `${hour}:${minute}:${second}`
}
setInterval(clock, 1)

---

✔️ 배운 함수/문법

• type을 문자열로 변환하는 함수 ⇨ 차이점은 toString은 특정진수로 객체를 표현하여 반환하고, String()은 객체를 문자열로 형변환하여 반환한다. toString(n)에서 n이 기본적으로 10이라 String과 다른점이 없는 것처럼 보인다.
• • _.toString(n)  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/toString
  • String(_) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String
• setInterval(function,ms) : 특정 함수를 n초마다 실행하는 함수 (반복적으로) ⇨ 실행 중지 시 clearInterval(name)으로 중지 가능하다. https://developer.mozilla.org/en-US/docs/Web/API/setInterval 
• setTimeout(function,ms) : 특정 함수를 n초 후에 실행하는 함수 (1회) https://developer.mozilla.org/ko/docs/Web/API/setTimeout
• new Date() : js에서 제공하는 날짜/시간 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
  • getDate()
  • getHours()
  • getMinutes()
  • getSeconds()
  • getDays() 등
• str.padStart(targetLength, padString) : 목표 문자열 길이보다 작다면 앞부터 padString으로 채워넣기. padString의 기본값은 '' https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padStart
• str.padEnd(targetLength, padString) : 목표 문자열 길이보다 작다면 뒤부터 padString으로 채워넣기. padString의 기본값은 '' https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/padEnd