[JS] 노마드코더 - 바닐라 JS로 크롬 앱 만들기 #Clock

Clock

#1. Interval

Interval이란? '매번' 일어나야 하는 무언가를 말한다. 예를 들어 매 2초마다 어떠한 일을 발생하게 하고 싶다면, 그때 Interval를 사용하면 되는 것이다. JavaScript에서는 이 기능을 기본적으로 보유하고 있다.

Interval를 사용하고 싶다면 setInterval(function, ms)을 사용하면 된다. 첫 번째 argument는 호출할 함수의 이름을 넣어 주면 되고, 두 번째 argument는 호출되는 함수의 간격을 몇 ms로 할 지 넣어 주면 된다.

clock.js 라는 이름의 JS 파일을 만들어 아래와 같이 코드를 작성하였다. sayHello라는 이름의 함수로 console에 Hello가 찍히도록 구현하였다. 그리고 지금 우리에게 가장 중요한, Interval을 세팅해 주고 저장하여 결과를 확인해 보면 5000ms(5초)마다 console에 Hello가 찍히게 된다.

여기서 유의할 점 한 가지. 우리가 5000ms로 설정한 만큼 새로고침을 했을 때 바로 console에 Hello가 나타나지는 않는다. 5000ms가 지난 후, 나타나기 시작하면서 멈추지 않고 계속 5000ms마다 Hello가 찍힌다.

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

setInterval(sayHello, 5000);

#2. Timeout and Date

Timeout

우리는 setInterval을 시계를 구현하는 데에 사용이 가능한 것을 알 수 있을 것이다. 하지만, 계속해서 함수가 호출되면 그것도 부담이 되지 않겠는가...... setInterval 없이 그냥 함수를 실행하면 적용한 Interval이 없으므로 몇 초 기다릴 필요 없이 바로 console에 Hello가 나타날 것이다. 그런데, 5초 기다렸다가 나타나게 하고 싶다면? 그런데 Interval을 사용해서 반복되는 현상을 구현하고 싶지 않다면? 이때 timeout을 사용하면 된다.

setInterval과 사용 방법은 같다. setTimeout(function, ms)로 사용하면 된다. 사용하는 방법은 같지만 다른 결과물을 확인할 수 있을 것이다.

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

setTimeout(sayHello, 5000);

Date

Interval과 Timeout의 사용법을 알았다면, 이제 현재 날짜와 시각을 나타낼 수 있는 방법을 알아보자. 개발자 도구 console창에 new Date()를 입력하면, 현재 날짜와 시각이 나타나게 된다. Date 객체에 대한 기능들은 문서를 통해 더 자세히 알 수 있다.

대표적으로 많이 사용하는 것들을 아래 표로 정리해 두었다.

함수	설명
new Date()	현재 날짜 및 시각
getDate()	일자
getDay()	요일
getFullYear()	년도
getHours()	시
getMinutes()	분
getSeconds()	초

그렇다면 우리는 이제 시계를 만들 수 있다. getHours(), getMinutes(), getSeconds()를 사용해서 말이다. 초가 지날 때마다 시계는 계속해서 업데이트가 되면서 우리에게 현재 시간을 알려 주어야 한다. 그러기 위해서는 Timeout보다 Interval이 더욱 적합할 것이다. 우리는 이 둘을 사용하여 시계를 구현하면 된다.

함수를 생성하여 console에 나타내 테스트를 진행해 보자. 아래와 같은 코드를 구성하였더니 console에 지정한 대로 1000ms 즉, 1초마다 시간이 찍혀 나오고 있다. 함수를 setInterval 전에 호출하여 실행하는 것은 위에서 설명했듯이 1초를 기다린 후, console에 찍혀나오는 특성 때문에 먼저 호출하여 실행해 시간을 보여 주기 위함이다.

우리의 코드는 매 초마다 새로은 Date 객체를 만들고 있으며, Date 객체가 가지고 있는 정보 중에 시, 분, 초를 console에 나타내고 있다.

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

getClock();
setInterval(getClock, 1000);

하지만, 우리는 console에서 시간을 확인하는 것이 아닌 페이지에서 확인을 해야 한다. 방법은 간단하다.

HTML 파일에 clock이라는 id를 가진 h2를 입력해 준 후, 기본 값은 00:00:00으로 둔다. 그리고, JS 파일로 돌아와 h2 요소를 상수 clock으로 선언해 준 뒤, console.log로 표현한 곳을 clock.innerText로 표현해 주면 끝.

<form id="login-form" class="hidden">
    <input required 
    maxlength="15" 
    type="text" 
    placeholder="What is your name?" />
    <input type="submit" value="Log In" />
</form>

<h2 id="clock">00:00:00</h2>   <!--default 값을 00:00-->

<h1 id="greeting" class="hidden"></h1>

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

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

getClock();
setInterval(getClock, 1000);

#3. padStart

그러나, 보기에 불편한 점이 하나 있다. 시, 분, 초가 한 자리 수가 되면 딱 한 자리로만 표현이 되고 있다. 아래 사진처럼 말이다. 결과적으로 내가 구현하고 싶은 것은? string의 길이가 최소 2가 되도록 하는 것이다. 0이 아닌 00이 되도록 말이다.

이 문제를 해결할 수 있는 함수 역시 JavaScript에서 내장하고 있다. 바로 padStart. string에서 사용할 수 있는 함수이다. 사용 방법은 padStart(원하는길이, 남는자리에입력될string)이다. 예를 들어, 길이가 1인 string의 길이를 2로 만들어 주고 싶다면, 아래와 같이 입력하면 된다.

참고로 padEnd()는 padStart()와 달리 남는 자리에 입력될 string이 뒤에 입력되는 함수이다.

그럼 이제 문제를 해결할 방법을 찾았으니, 코드를 수정해 보도록 하자. 시, 분, 초를 가져오던 Date 객체들을 모두 상수로 선언해 주고, 그 뒤에 padStart()를 붙여 주면 문제 해결! 인 줄 알았으나...... 에러가 났다. 왜냐? 앞서 말했듯이 padStart()는 string에 사용하는 함수이다. 하지만, 현재 시, 분, 초는 string이 아닌 number이기 때문. 그렇다면, number를 string으로 바꿔 주면 문제는 해결된다.

function getClock() {
    const date = new Date();
    const hours = date.getHours().padStart(2, "0");
    const minute = date.getMinutes().padStart(2, "0");
    const second = date.getSeconds().padStart(2, "0");

    clock.innerText = `${hours}:${minute}:${second}`;
}

string으로 바꿔 주기 위해서는 함수를 String()으로 감싸 주면 된다. 아래의 코드처럼 변경해 준다면 이 문제가 해결되고 깔끔하게 원하는 결과를 볼 수 있을 것이다.

function getClock() {
    const date = new Date();
    const hours = String(date.getHours()).padStart(2, "0");
    const minute = String(date.getMinutes()).padStart(2, "0");
    const second = String(date.getSeconds()).padStart(2, "0");

    clock.innerText = `${hours}:${minute}:${second}`;
}

---

Clock 파트를 마무리하며

앞서 했던 Login 파트보다 짧아 비교적 금방 학습할 수 있는 파트였다. 내가 아는 객체들도 많이 나와서 더욱 수월하기도 했고...... 그런데 partStart와 partEnd는 처음 만나는 객체였다. 아마 Date 객체 자체 중에 저렇게 표현되는 것이 있기도 했던 것 같은데, 사실 자세히 기억이 나진 않는다. 
원래 있던 지식을 사용하면서 새로운 것을 배우게 된 파트였다.