[JSClock 클론코딩] 1. 시계를 만들어 보았습니다.

이번에는 시계를 만들어보도록 하겠습니다.

위와 같은 모양의 시계인데, 별거 아닌 것 같죠? 실제로도 쉽게 만들 수 있습니다.

0. index.html

가장 먼저 만들어야 할 파일은 html입니다.

동적으로 만들어주고 싶더라도 내용물이 없을 순 없으니까요. (물론 JS로 넣어줄 순 있습니다만..)

<!-- index.html -->

<!DOCTYPE html>
<html>

<head>
    <title>Something</title>
    <link rel="stylesheet" href="index.css" />
</head>

<body>
    <div class="js-clock">
        <h1>00:00</h1> <!-- 임시로 -->
    </div>
    <script src="clock.js"></script>
</body>


</html>

별다른 내용이 없어 주석처리를 하지 않았습니다.

이번 클론 코딩의 목적은 JS 공부이므로, html에 나오는 내용들을 따로 정리하진 않겠습니다!

특이점이라고 하면 body의 맨 끝에 <script>를 이용하여 js파일을 불러들입니다.

1. clock.js

이제 동적으로 만들기 위해서 js파일을 만들어줍시다.

js파일의 가장 기초인 init()를 만들어줍니다.

init() 안에는 시간을 불러오기 위한 함수인 getTime()과, 실시간으로 새로고침해주기 위해서 사용할 setInterval 함수를 넣어줍니다.

setInterval() 함수의 매개변수는 앞에는 호출할 함수, 뒤는 시간을 적는데, 시간은 milliseconds 이기 때문에 1000을 넣으면 1초에 한번씩 갱신됩니다.

이제 다시 맨 위로 올라가서 데이터를 가져옵시다.

const clockContainer.document.querySelector(".js-clock")를 통해 js-clock이라는 클래스를 가진 div를 가져옵니다.

그리고 그 div 안에서 h1부분을 clockTitle로 가져와서 사용합니다.

데이터를 가져왔으면, getTime 함수를 정의해야합니다.

getTime 함수 내부에서는 new Date()를 통해 현재 시간을 가져옵니다.

그리고 Date()로 불러온 자료에 사용할 수 있는 getHours, getMinutes, getSeconds를 이용해 현재 시, 분, 초를 가져옵니다.

그리고 innerText를 사용하여 clockTitle로 가져온 h1자료를 ` `(백틱) 안의 자료로 바꿔줍니다. 백틱에 대한 내용은 이전 포스팅에 나와있으니 참고하시면 됩니다.

특히 삼항연산자가 사용되었는데, ? 앞의 조건문이 참이면 :를 기준으로 앞이 내용으로 들어가고, 거짓이면 뒤의 내용이 들어가게 됩니다. 자료1 ? 자료2 : 자료3 순서로 자료(항)가 총 3개 존재하기 때문에 삼항연산자라고 부릅니다.

// clock.js

const clockContainer = document.querySelector(".js-clock"),
    clockTitle = clockContainer.querySelector("h1");

function getTime(){
    const date = new Date(); // Date는 class!! (객체라고 생각) - 시간을 가져오기 위함
    // 가져온 시간에서 시, 분, 초를 빼내옴
    const minutes = date.getMinutes();
    const hours = date.getHours();
    const seconds = date.getSeconds();
    // 삼항연산자를 사용해서 0을 넣음
    clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${
        minutes < 10 ? `0${minutes}` : minutes}:${
        seconds < 10 ? `0${seconds}` : seconds}`; // 그 값들을 이용해서 clockTitle에다가   Text를 박아버림!!
}

function init(){
    getTime();
    setInterval(getTime, 1000); // 시간 간격을 정함, 호출할 함수 / milliseconds 순
}

init(); 실행

지금까지 간단한 시계를 만들어봤습니다.

다음 포스팅에서는 이름을 저장하는 localStorage에 관한 글을 작성해보도록 하겠습니다. 감사합니다 :)