JS-3) Clock 만들기

 * 아래 진행은 '노마드코더' 님의 무료 JS 강의를 참고했습니다.

처음 보는 메서드들은 developer.mozilla.org 에 검색해서 추가로 알아봤습니다. 

[clock.js handling]

먼저, 사용자의 현재 시간을 웹 브라우저 상에 띄워주는 코드를 짜보자.

- clock.js 파일을 만들고, html에 추가해준다.

- 시간을 표시하려면 new Date() 를 활용하면 된다. new Date()를 호출하면 새 Date 객체를 반환해준다.

- 그냥 Date() 만 해서 console.log 해봐도 현재 시간이 표시된다. 하지만 Date()는 모든 인수를 무시하고 현재 시간만 표시하는 것으로 new Date().toString() 과 같다. 즉, 우리가 원하는 것들만 표현하는 게 불가능하다.

- new Date()에서 불러올 수 있는 값은 다음과 같다.

1) year : 연도를 나타내는 정수 값으로 0에서 99까지의 값은 1900년 - 1999년을 나타낸다. 이외의 모든 값은 실제 연도를 나타낸다.

2) monthIndex : 1월 - 12월의 값을 표시해주는 것으로 1월 = 0 부터 12월 = 11 까지 카운트를 한다.

3) day : 해당 월의 요일을 나타내는 정수 값으로 default는 1이다.

4) hours : 하루의 시간을 나타내는 0 ~ 23 사이의 정수 값으로 default는 0이다.

5) minutes : 시간의 분을 나타내는 정수 값으로 default는 0이다.

6) seconds : 시간의 초를 나타내는 정수 값으로 default는 0이다.

7) milliseconds : 시간의 밀리초를 나타내는 정수 값으로 default는 0이다.

이외에도 new Date().get 을 찍어보면 자동완성으로 나오는 값들이 여러 개 존재한다.

- html로 잠시 넘어와서 clock을 넣고 싶은 위치에 h2 태그 id="clock"을 추가한다.

- clock.js에 clock을 변수 선언해서 위의 #clock을 불러준다.

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

- 이제 웹 브라우저에 현재 시간을 출력하는 함수를 짜보자.

function getTimeNow() {

    const date = new Date();

    const hours = date.getHours();

    const minutes = date.getMinutes();

    const seconds = date.getSeconds();

    clock.innerText = `${hours}:${minutes}:${seconds}`

}

new Date()를 date로 변수 선언하고, 밑에서 각각 시간, 분, 초를 불러오는 코드다. 연도나 월 등도 불러올 수 있지만, 우리가 필요한 건 00:00:00 이므로 해당하는 것만 불러온다.

아래에서 저번 greetings 에서 사용한 innerText를 이용해 html에 만들어 둔 clock에 변수들을 할당해 준다. 또한 ``(백틱)과 ${}을 활용해 표현식을 넣는 형태로 결과는 문자열로 자동 변환되게 한다.

- 맨 아래에 getTimeNow(); 를 하고 웹 브라우저를 보면 시간이 표시되는 게 보인다. 하지만 우리가 새로고침을 해야 시간이 바뀌고, 그렇지 않으면 변하는 시간이 반영되지 않는다.

- 이를 해결하기 위해서 setInterval() 메서드를 사용한다.

- setInteval()은 함수를 반복적으로 호출하게 도와주며, 각 호출 사이에 고정된 시간 지연 값을 넣어줄 수 있다. 여기서 사용되는 시간 지연 값은 milliseconds를 단위로 하기 때문에 1초의 지연 값을 원할 경우 1000을 입력해야 한다.

getTimeNow();

setInterval(getTimeNow, 1000);

getTimeNow(); 를 한 번 호출한 다음에 setInterval();을 넣는 이유는 첫 호출까지 1초의 지연 값이 있기 때문이다.

- 이 상태로 호출하면 한 가지 문제점이 더 나타난다. 시/분/초 단위가 1-9를 나타낼 때, 01-09로 표시되는 게 아니라 그냥 1로만 표시되는 점이다.

- 이를 해결하기 위해서 우리는 date.get ~ 에 padStart 메서드를 추가해준다.

- padStart 메서드는 String 요소에 붙여서 사용하는 메서드로 String의 length가 원하는 길이가 나올 때 까지 지정된 값으로 채워주는 메서드다. 하지만 우리가 만든 date.getHours 등은 정수이기 때문에 String()으로 감싸서 padStart 메서드를 사용해야 한다.

String(date.getHours()).padStart(2, "0")

String(date.getMinutes()).padStart(2, "0")

String(date.getSeconds()).padStart(2, "0")

위 코드를 해석하면 각각 현재 시각의 시/분/초를 호출해 해당 값의 길이가 2가 될 때까지 string의 앞에 0을 추가해주는 형태이다.

이상으로 clock.js 파일 코드 작성이 끝났다. 전체 코드는 아래와 같다.

그동안 내가 참고했던 다른 블로그들을 다시 보니 최종 코드를 올려주는 곳이 많아서 나도 이제부터 코드 이미지를 첨부해야겠다는 생각이 들었다. 코드만 보면 매우 짧고 간단한 코드지만, 처음 다뤄본 입장에서는 모르는 부분이 많았어서 글이 길어진 것 같다. 이제 조금씩 글 쓰는 게 익숙해지는 것 같으니, 하루에 가능한 만큼 작성을 해봐야겠다!

"기록은 기억을 이길 수 없다" 계속 힘내자!