프론트엔드/JavaScript

[JS] timeout & Date object 기능을 알아보자 (시계 만들기_2)

새싹 개발자 뚜비 2022. 9. 4. 02:29
728x90

[ 노마드코더 학습 기록 ]

바닐라 JS로 크롬 앱 만들기(5.1 Timeouts and Dates)

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

sayHello();

 

Javascript는 sayHello(); 라인을 보자마자 Function을 실행시킨다.

하지만 내가 만들 프로그램은 Function이 5초뒤에 실행되어야 한다면 어떻게 해야할까?

이럴 땐 timeouts을 이용할 수 있다.

 

  timeouts  

setTimeout은 setInterval과 비슷하게 생겼지만 동작은 완전히 다르다.

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

setTimeout(sayHello, 5000);

setTimeout은 두 개의 argument를 받는다.

1. 실행하고자 하는 function

2. 호출될 function의 간격(ms)

노란부분에 표시됨

코드를 실행하면 5초 뒤에 console 창에 hello가 나타나게 된다.

 

  Date object  

크롬앱은 시간을 보여줘야 한다.

이를 위해 js가 가지고 있는 Date object tool을 사용해보도록 하자.

console에서 이런식의 사용도 가능하다.

Date() 이건 현재. 즉, 오늘의 날짜와 시간을 가지고 온다.

 

이렇게 메소드를 이용하여 현재의 일, 요일, 연도, 시간, 분, 초 등을 가져올수도 있다.

(Day는 현재 일요일이라 0으로 표시된다.)  

 

그럼 getHours(), getMinutes(), getSeconds() 메소드와

interval을 이용하여 3개의 function을 매 초마다 호출해주도록 만들어보자.

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

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

setInterval(getClock, 1000);

string을 console.log 하기 위해서 ``(백틱)을 꼭 사용해야한다.

string으로 시:분:초로 합쳐주고 interval을 이용해 매 초마다 실행되도록 한다.

 

1초마다 현재시간이 표시된다.

이건 매 초마다 새로운 Date object를 만들고 있는 것이다.

new Date (object)는 현재 날짜, 시간, 분, 초에 대한 정보를 가지고 있고

new Date (object)를 매 초마다 새로 생성하고 있는 것이다.

 

굉장히 멋지지만 쭉 보다보면 무언가 불편한 점이 생긴다.

0이 아니라 00으로,

또 01,02,03...으로 보이게 하고 싶으면 어떻게 해야할까?

이건 text formatting으로 해결할 수 있다.

 

또 다른 불편함.

새로고침을 하면 시간을 바로 보여주지 않고 1초를 기다린 후에 표시된다.

웹사이트가 load 되자마자 getClock()을 실행하고

매 초마다 실행되도록 해보자.

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

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

}

getClock()
setInterval(getClock, 1000);

setInterval(getClock, 1000);

이 코드 윗줄에 getClock()함수를 바로 호출함으로써 해결할 수 있다.

진짜 간단하고 쉬워서 기분이 좋다🤩

이제 웹사이트 화면에 이 시계를 넣어주기만 하면 시계만들기는 끝난다.

h2를 00:00:00으로 변경

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

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

getClock()
setInterval(getClock, 1000);

 

console.log를 clock.innerText로 변경해준다.

이제 시계가 완성됐다!!😆😆

정말 쉽고 간단한 코드로 시계를 만들어봤는데 재밌고 이해하기 쉬운 강의인 것 같다.

다음 포스팅에서는 아까 언급했던 불편함을 고쳐보는 시간을 가져보도록 하겠다.

끝.

728x90