[JavaScript] Intervals Timeouts Dates

1. 시계 생성하기

오늘은 시계를 만들어 보자.

HTML 파일에 아래 코드를 작성한다.

<h2 id="clock">00:00:00</h2>

js 파일에 clock을 불러온다.

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

function sayHello() {
	console.log("hello");
}

2. interval

interval은 '매번' 일어나야 하는 무언가를 말한다. (예로 매 2초)

서버에서 몇 초에 한 번 확인할 수 있는 기능들이 필요할 때가 있다.
js에는 이런 기능을 제공하는 tool이 있는데 setInterval()이다.

setInterval(실행하고자 하는 function, milliseconds)

setInterval()은 두 개의 argument를 받는다. 첫 번째는 내가 실행하고자 하는 function이다. 두 번째는 호출되는 function 간격을 몇 milliseconds로 할 지이다.

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

function sayHello() {
	console.log("hello");
}

setInterval(sayHello, 5000);

function인 sayHello를 5초마다 호출하는 코드이다.
콘솔을 확인해보면 5초 뒤에 hello라고 호출되는 것을 볼 수 있을 것이다.

3. timeout

지금부터 사용할 것은 setTimeout이다.
setInterval과 비슷하지만 동작은 완전히 다르다.

Timeout은 일정 시간이 흐른 뒤에 한 번 호출이 되는 것이다.

setTimeout(sayHello, 5000);

먼저 호출할 function을 넣어주고, 얼마나 기다릴지 milliseconds 단위를 입력해주면 된다.
그럼 콘솔에서 5초 뒤에 나타날 것이다.

시계 완성하기

방금 배운 것들을 활용해 매 초마다 변하는 시계를 완성해보자.
여기서 js가 가지고 있는 Date object tool을 사용할 것이다.

콘솔에서 new Date를 입력하면 현재 시간이 나온다.

아래 링크는 mozilla에 있는 Date document가 있다. 참고 바람!
링크: Date document

쓸 수 있는 document가 정말 많다. 에를 들자면

date.getHours()  <-- 현재 시간
date.getDate()  <-- 현재 일수
date.getFullYear()  <-- 현재 년도
date.getMinutes()  <-- 현재 분
.
.

시계를 만들려면 어떤 것들이 필요할까?
getHours getMinutes getSeconds 이 세 가지가 필요할 것이다.

시계의 시간이 계속 갈 때 계속해서 뭔가를 다시 실행하고 싶다면 아까 배운 Interval과 Timeout 중에 어떤 것을 사용해야 할까?
바로 Interval이다.

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

function getClock() {
	const date = new Date();
	console.log(`${date.getHours()}:${date.getMinutes()}:${date.getSeconds()}`);
}

getClock();
setInterval(getClock, 1000);

위의 코드로 콘솔에는 1초마다 시간이 표시 될 것이다.
하지만 콘솔이 아니라 브라우저에 표시하고 싶다면 아래와 같이 innerText를 넣어준다.

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

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

getClock();
setInterval(getClock, 1000);

하지만 여기에 오류가 있다.
00:00:00 처럼 시계를 표시하고 싶지만 00:00:0 이렇게 표시되기도 한다.
이 오류는 다음 글에서 고쳐보자.