사실 디지털시계는 학원에서도 배우기도 했고 작업하면서 종종 시간값을 받아서 쓸 일이 있어서 new Date()는 꽤 사용해보기는 했는데 이번에 노마드코더 영상으로 보고 padStart()라는 함수를 처음 알게되어 정리한다.
당시에 배웠을때 두자리수를 만들때 10보다 작으면 앞에 0을 붙이는 함수를 또 따로 만들어서 사용했던걸로 기억한다.
function digit(n){
if(n<10){
n = '0'+n;
return n;
}else{
return n;
}
}이런식으로...
이렇게 해도 사실 기능에는 문제가 없긴하지만 시,분,초마다 다시 함수를 적용해야하고 여간 귀찮은 일이 아니다
(padStart를 오늘에서야 할게된 내가 할 말은 아니지만ㅋㅋㅋㅋ)
그런데 오늘 영상을 보니 따로 함수를 만들 필요없이 padStart라는 자바스크립트 내장함수를 쓰면 아주 간단하게 2자리수를 만들 수 있었다!!!
그러면서 니꼴라스가 사람들이 많이 필요로할만한 기능들은 이미 프리셋이 되어있으니 찾아보라고...
역시 아는만큼 보입니다ㅠㅠ
사용법은 매우 간단하다
String객체.padStart(제한길이, "추가할 String")
ex) hour.padStart(2, "0") 으로 사용할 경우 시간이 2자리수가 아닐때 앞에 0을 붙인다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>디지털 시계</title>
</head>
<style>
div{
margin: auto;
width: 200px;
height: 70px;
border: 1px solid #ccc
}
.clock{
text-align: center;
font-size: 20px;
font-weight: bold;
}
</style>
<body>
<div>
<p class="clock"> 00 : 00 : 00</p>
</div>
<script>
const domClock = document.querySelector(".clock");
function clock(){
const now = new Date();
const hour = String(now.getHours()).padStart(2, "0");
const min = String(now.getMinutes()).padStart(2, "0");
const sec = String(now.getSeconds()).padStart(2, "0");
domClock.innerText = `${hour} : ${min} : ${sec}`
}
clock()
setInterval(clock, 1000);
</script>
</body>
</html>
간단한거라 html페이지 body에 바로 스크립트 코딩했는데 이와중에 실수난발함...;;
나처럼 이렇게 한페이지에 스크립트를 짤경우 돔 객체가 언제 그려지는지를 유의해야한다.(한페이지가 아니더라도 기능에 따라 스크립트를 바디 위에 적용해야하는지 아래 적용해야하는지 유의해야함!)
처음에 스크립트를 돔 요소 위에 짰는데 querySelector가 자꾸 null이 떠서 이게 왜 널이야??? 한참 고민하다 아..!하고 돔요소 밑으로 내렸다.
또 진짜 부끄러운 실수는 new Date를 처음에 clock밖에 만들어 놓음;;; 그럼 당연히 setInteval이 안먹지 에효.. 정말 바보같은 실수다
참고로 padStart와 반대로 padEnd도 있는데 이건 string객체가 제한길이 미만일때 객체 뒤에 내가 설정한 string을 붙이는 함수이다
'TIL_any' 카테고리의 다른 글
| [TIL.10] 공공데이터open API. 리액트 로컬 작업 교차브라우저 cors 에러 해결 방법 proxy설정 (0) | 2021.09.09 |
|---|---|
| [TIL.9]React JSX return내에서 html 마크업 에밋기능 사용하는 방법(vsCode) (0) | 2021.09.01 |
| [TIL.7] form과 submit, e.preventDefault, 중요하지 않은 String변수는 대문자로! (0) | 2021.08.27 |
| [TIL.6]드림코딩:엘리 자바스크립트 프로처럼 쓰는 팁. 스프래드 연산자, 비구조 할당, Set() (0) | 2021.08.20 |
| [TIL.5] 노마드코더 Deploying to Github pages 깃허브에 리액트 프로젝트 홈페이지 올리기 (0) | 2021.08.16 |
