바닐라 JS 챌린지 - 파이널 프로젝트 . js (2)

Momentum 구현하기 - JavaScript / 시계 편

이번엔 Momentum 앱의 메인 기능인 시계 구현을 해볼차례다,

음.. 시계는 저번 과제때 크리스마스까지의 디데이를 계산하는 시계를 구현한적이 있던터라
그렇게 어렵게 느껴지진 않았다, 오히려 그것보다 쉬웠으니.. 후딱 끝내보자.

html 과 js 연결하기

일단 저번에 html에서 만든 태그가..

<div class="clock">
    <h1>00:00:00</h1>
 </div> 

이랬었으니까, 우리는 document.querySelector() 를 이용해서 clock 클래스를 불러올 수 있다.
아, 그전에 일단 또 html 파일에서 먼저 js 를 연결해주자. 나는 이번 파일의 이름을 clock.js 로
만들었다.

        .
        .
        .
    <div id="quote">
        <span>이건 명언이고</span><br />
        <span>이건 그 말을 한 사람이야</span>
    </div>
<script src="weather.js"></script>
<script src="clock.js"></script>     // clock.js 파일을 연결해 준다.
</body>

</html>

이렇게 연결을 하고 js 파일로 넘어오자, 그리고 여기서도 저번에 했던것 처럼 clock class 로 저장된
div 태그를 가져오도록 하자.

  const clock = document.querySelector('.clock');

그런데 우리는 여기서 clock 안에 있는 <h1> 에 시계를 구현해줘야하기 때문에 clock 에서
다시 한번더 h1 태그를 불러와주도록 한다. 그리고 우리가 구현하는 시계를 이곳에 저장할것이다.

이 방법만이 있는것이 아니라서 다양한 방법에 대해서 공부해보는것도 괜찮을듯 하다,
clock이 class 가 아니라 id 의 상태로도 가져올 수 있을거고, 그때는 또 그때에 따라 가져올 수 있는
방법이 또 다르니까 검색 ㄱㄱ, 우리는 class 로 가져왔으니 이렇게 하도록 한다.

  const clock = document.querySelector('.clock');
  const mainClock = clock.document.querySelector('h1');

  mainClock.innerText = 'Hello World?';

* 항상 무언가 연결이 되는 코드를 작성하면 잘 연결이 됬는지 확인해보는 습관을 들이는게 좋다.
이때 확인을 안하고 그냥 넘어갔다가 코딩이 많이 진행된 후에 오류를 발견하는게 쉽지 않기 때문이다.
그리고 '분명히 연결했는데.. 저건 (오류의 이유) 가 아닐거야' 라는 생각을 하고 다른곳에서 디버깅을
하는 불상사가 생길 수 있기때문에 한줄한줄 확인하며 작성하는게 좋다.

innerText 를 적용하여 <h1> 이 잘 변경되는지 확인해보자.

문제없이 잘 변경되는걸 볼 수 있다. 이러면 연결이 잘 된것이다, 이제 본격적으로 시계를 만들어보자.

라이브시계 구현하기

시계는 1초마다 1초씩 늘어나며 시간을 알려준다. 물론 javascript 에도 시간을 알려주는 메서드는
존재한다. 하지만 우리가 눈으로 확인할 수 있는건 그 메서드를 입력하고 엔터를 치는 그 순간의 시간,
또는 최신화된 시간을 보려고 새로고침 버튼을 누르는 그 순간의 시간만을 확인할 수 있다.

내가 아무때나 시간을 보고싶을때, 굳이굳이 새로고침 버튼을 누르지 않더라도 시간을 확인할 수 있어야 한다.

이 전의 크리스마스 디데이 시계도 그랬었고, 그 시간은 여전히 잘 돌아가고 있다.
setInterval() 을 사용했었다, 시간을 나타내는 로직을 가진 함수를 1초에 한번씩 실행을 시켜주는
역할을 한다. 이때문에 우리 눈에는 마치 시계가 1초에 한번씩 움직이는듯한 느낌을 받을 수 있다.

시계를 구현할 수 있는 방법은 알았고, 이제 시간을 나타내는 방법을 알아보자.

자세한 설명은 "크리스마스 디데이 계산기" 이 정리글에 잘 정리를 해놓았으니 확인하면 될거 같고,
여기서는 조금 빠르게 진행해 보겠다.

우리는 new Date() 라는 함수를 이용할것이고, 시, 분, 초를 받아올것이다.

시 는 new Date().getHours() 가 될것이고,
분 은 new Date().getMiutes() 가 될것이고,
초 는 new Date().getSeconds() 가 될것이다.

그런데 보다시피 new Date() 가 중복적으로 들어가니 개발자들의 불편함이 생겨버렸다.
new Date() 를 변수처리 해주어서 사용하기 간편하게 해주도록 하자.

  const date = new Date();            // new Date() 를 변수처리

  const hours = date.getHours();      // 시간을 출력한다.
  const minutes = date.getMinutes();  // 분을 출력한다.
  const seconds = date.getSeconds();  // 초를 출력한다.

이제 이녀석을을 함수에 집어넣고 나중에 setInterval() 이 실행시킬 수 있게 해줘야 한다.

const getTime = () => {
  const date = new Date();            // new Date() 를 변수처리

  const hours = date.getHours();      // 시간을 출력한다.
  const minutes = date.getMinutes();  // 분을 출력한다.
  const seconds = date.getSeconds();  // 초를 출력한다.
  
  console.log(hours, minutes, seconds); // 시험출력
 }

getTime();

과연 문제없이 잘 출력될 수 있을까?

잘 나오는것을 볼 수 있다. 이제 이 녀석들을 저 시계에 출력을 해줄것이다. innerText 를 사용하자.
이건 getTime() 안에서 작성해야 한다.

const getTime = () => {
    const date = new Date();
    const hours = date.getHours();
    const minutes = date.getMinutes();
    const seconds = date.getSeconds();
  
    mainClock.innerText 
      = `${hours < 10 ? `0${hours}` : hours} :
         ${minutes < 10 ? `0${minutes}` : minutes} :
         ${seconds < 10 ? `0${seconds}` : seconds}`;
}

getTime();

갑자기 삼항연산자가 놀라서 당황할수도 있겠지만, 사실은 별게 아니다. 여기서 출력하는 시간을 나타내는
숫자는 한자리의 수가 출력될때 01, 02, 03 ... 의 상태가 아닌 1, 2, 3 ... 으로 나타난다.
우리는 좀더 온전한 시계의 모습을 원하기때문에 10의 아래의 숫자가 출려됬을때, 숫자 앞에 0을 붙여준다.
라는 의미의 삼한연산자를 만들어 준것이다, 이걸 보고 다시 삼항연산자를 보면 이해가 될듯 하다.

아무튼 이렇게 하고 출력을 해보면,

무난하게 잘 출력되는걸 볼 수 있다. 우리가 원하던 대로 10 아래의 숫자는 앞에 0이 붙는것도
잘 구현이 되었다. 하지만 아직 끝난게 아니다, 라이브로 움직이지 않는다.
새로고침을 해야지만 현재 시간이 나타난다. 아까 말했던거 처럼 setInterval() 을 이용해서
getTime() 이 1초에 한번씩 실행되게끔 해주자.

const init = () => {
    getTime();     // setInterval() 은 1초 뒤부터 실행하기에 일단 바로 하나 실행시킴.
    setInterval(getTime, 1000);
};

init();

자, 이제 모든 준비가 되었다.. 과연 동작할것인가..!!

완벽하게 동작한다..!! gif 만들기 귀찮아서 여기는 안올리지만 해본 사람이라면 아주 잘 동작하는걸
볼 수 있을것이다. 이렇게 시계도 구현이 끝났다~!! 다음은 이름을 적으면 인삿말을 출력해주는 기능을
구현해 보겠다.

-끝-