[프론트엔드] Clock

간단한 시계 만들기!

Interval & Timeout

setInterval(함수이름, 함수주기(ms)) = 일정 시간마다 호출
setTimeout(함수이름, 함수주기(ms)) = 일정 시간이 지나면 한번만 호출

Date

const date = new Date();

date.getFullYear()		2022
date.getMonth()			0부터 시작
date.getDay()			월화수목금토일(0,1,2,3,4,5,6)
date.getHours()			24시간으로 표현
data.getMinutes()		분
data.getSeconds()		초

padStart() & padEnd()

`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`

이렇게 00시00분00초를 표시하면 되지만 단위를 1대신 01로 표시하기위해선 padStart() 사용.

"1".padStart(2,"0")   는 "01"

string의 길이를 2로만드는데, 길이가 2가 아니라면 앞에 "0"을 추가.

길이가 1인 문자가 있다고 했을때 padStart()를 써서 string앞부분에 padding을 추가한다는 개념!

"12".padStart(2,"0")   는 "12"

string의 길이가 2이기 때문에 padStart()는 아무 작업도 안한다!

padEnd()는 string 끝에 padding을 추가한다는 개념!

"1".padEnd(2,"0")  는 "10"

마무리

date.getHours() minutes() seconds() 는 결과값이 숫자이므로, padStart()를 사용하려면 결과값을 string으로 바꾸어야한다.

String(date.getHours()).padStart(2, "0")

이와 같이 시간, 분, 초를 string 으로 바꿔준 후 padStart()를 사용하면 간단한 시계가 완성된다.

소감

자바스크립트의 기초를 더욱 튼튼하게 알고가기위해 노마드코더의 도움을 받는중이다! 완성된 결과물은 간단하지만, 강의를 들으며 정말 중요한 요소들을 재미있게 알려주는듯하여 집중이 잘됐다. 좀만 더 공부하러 2만

완선된 코드는 깃헙!