자바스크립트 입문[Javascript] - 자바스크립트로 시계를 구현하기 - setIntervals / Date / padStart

2021-07-26

자바스크립트 학습일지입니다.

해당 내용은 노마드코더님의 <바닐라JS로 크롬 앱 만들기> 강의를 들으며 추가적인 학습을 정리한 내용입니다.

---

[Intervals] 

 

먼저, 지난 시간까지 만들었던 자바스크립트 파일을 greetings.js로 바꿔주고 clock.js 파일을 새로 생성해줍시다.

위와 같이 js라는 폴더에 clock.js와 greetings.js 를 저장한 후, html에 js를 import 해줍시다.

 

자바스크립트로 주기적인 작업을 실행하기 위해서 setInterval과 setTimeout 메소드를 사용할 수 있습니다.

 

setInterval 함수

일정한 시간 간격으로 작업을 수행하기 위해서 사용합니다. clearInterval 함수를 사용하여 중지할 수 있습니다.

주의할 점은 일정한 시간 간격으로 실행되는 작업이 그 시간 간격보다 오래걸릴 경우 문제가 발생할 수 있습니다.

setTimeout 함수

일정한 시간 후에 작업을 한번 실행합니다. 보통 재귀적 호출을 사용하여 작업을 반복합니다.

기본적으로 setInterval 과는 달리 지정된 시간을 기다린후 작업을 수행하고, 다시 일정한 시간을 기다린후 작업을 수행하는 방식입니다.

지정된 시간 사이에 작업 시간이 추가 되는 것입니다. clearTimeout() 을 사용해서 작업을 중지합니다.

 

 

const clock = document.querySelector("h2#clock");

function sayHello() {
	console.log("say Hello");
}

setInterval(sayHello, 5000)

 

위와 같은 코드는 5초마다 "say Hello"를 5초마다 콘솔에 나타냅니다.

date

JavaScript Date 객체는 시간의 한 점을 플랫폼에 종속되지 않는 형태로 나타냅니다.

 

Date() 

함수로 호출할 경우 new Date().toString()과 동일하게 현재 날짜와 시간을 나타내는 문자열을 반환합니다.

 

new Date()

생성자로 호출할 경우 새로운 Date 객체를 반환합니다.

 

const clock = document.querySelector("h2#clock");


function getClock() {
	const date = new Date();
	clock.innerText = `${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`;
}
getClock();
setInterval(getClock, 1000);

위의 코드를 실행하면,  브라우저에 매 시간이 구현되는 것을 알 수 있습니다. 

이제 시계를 가질 수 있습니다. 

 

하지만 0초~10초까지 0, 1, 2 를 01, 02, 03으로 나오는 것이 가시성이 좋아 바꾸고싶을 때

어떻게 바꿀 수 있을까요?

 

padStart()

padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다

메서드 padStart는 string에 사용할 수 있는 함수입니다.

매개변수

-targetLength

목표 문자열 길이. 현재 문자열의 길이보다 작다면 채워넣지 않고 그대로 반환합니다..

-padString Optional

현재 문자열에 채워넣을 다른 문자열. 문자열이 너무 길어 목표 문자열 길이를 초과한다면 좌측 일부를 잘라서 넣습니다.

기본값은 ""입니다.

구문

str.padStart ( targetLength, "padString Optional" );

마찬가지로 padEnd() 메서드는 문자열의 끝을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다.

 

const clock = document.querySelector("h2#clock");


function getClock() {
	const date = new Date();
	const hours = String(date.getHours()).padStart(2,"0");
	const minutes =String(date.getMinutes()).padStart(2,"0");
	const seconds = String(date.getSeconds()).padStart(2,"0");
	clock.innerText = `${hours}:${minutes}:${seconds}`;
}
getClock();
setInterval(getClock, 1000);

위와 같은 방식으로 이제 각각의 시간을 두자리로 표현할 수 있습니다.

 

여기서 주의해야할 점은 

메서드 padStart는 string에 사용할 수 있는 메서드입니다.

따라서 우리는 date.getHours()의 Number 을 String으로 바꿔야합니다.

String(date.getHours()).padStart(2,"0"); 으로 String으로 바꾼뒤 padStart를 적용할 수 있습니다.

 

 

---

출처

 

자바스크립트 주기적인 실행(setInterval, setTimeout)

 

String.prototype.padStart() - JavaScript | MDN

 

노마드 코더 Nomad Coders