바닐라 JS 챌린지 - 8일차

크리스마스까지 며칠 남았을까?

오늘은 시간을 사용할 수 있는 Date 생성자 [new Date()] 를 이용하여
올해 크리스마스까지 남은 시간을 알려주는 시계를 만들어서 제출했다.

조금은 당황했다, 그냥 시간이 가는 시계는 만들어 봤지만, 디데이를 만드는 시계는 처음이었다.

어떻게 만들지?

일단, 크리스마스까지 남은 시간을 어떤 형식으로 출력할지를 생각했다, 뭐 여러방법이 있겠지.
그중에서 나는 일수 (day) - 시간 (hours) - 분 (minutes) - 초 (seconds) 로 출력하려고 한다.

일단 기본적으로 시간을 출력하는 시계는 어떻게 만들었더라?

시계를 만드는 방법은 의외로 단순하다... 맞나?

콘솔창에 new Date() 를 입력하면 내 컴퓨터 기준 현재 시간이 출력된다.
그 형식은, Thu Sep 02 2021 02:40:16 GMT+0900 <-- 이렇게 된다.

이것은 순서대로 요일,월, 일, 년, 시간, (대한민국 표준시) 를 전부 나타내준다.
그리고 이 항목들을 별개로 출력할 수 도 있다. 몇가지만 설명하자면.

getFullYear() : "연도" 를 나타내는 정수 값.

getMonth() : "월" 을 나타내는 정수 값. (0부터 11의 12개 이므로, 1을 더해준다.)

getDay() : "일" 을 나타내는 정수 값.

getHours() : "시" 를 나타내는 정수 값.

getMinutes() : "분" 을 나타내는 정수 값.

getSeconds() : "초" 를 나타내는 정수 값.

정도로 알고있으면 되겠다.

new Date().getFullYear() 를 입력하면 2021 이 출력되는것을 볼 수 있다.

이제 이것들을 이용해서 디데이 시계를 만들어보자.

D-Day 란?

디데이는 "계획이 일어나는 예정일" 이라는 뜻이다, 그리고 가장 큰 특징.
일반적인 시계는 시간이 더해지며 흘러가지만, 디데이 시계는 시간이 감소하며 흘러간다.

그러다가 그 시간이 0이 되면 해당 일이 되는것이다. 그렇게 우리는 크리스마스의 디데이를 만들것이다.

크리스마스 D-Day 시계

위에서도 말했듯이, 디데이는 시간의 감소를 나타내야 한다.
그런데 흘러가는 시간을 어떻게 후진 시킬까..?

방법은 "예정시간에서 현재시간을 빼는것" 이다. 그래, 방법은 좋다 이거야.
그래서 어떻게 뺄껀데?

getTime() 메서드를 이용하면 된다. 이 녀석은 무엇이냐.
1970년 01월 01일 기준으로 구하려는 날짜까지의 값을 1000분의 1초(1밀리초단위)로 나타낸것이다.

1970년이란 기준이 왜 생긴지는 모르겠으나. 지금 우리가 사용하기에는 별 문제 없다.
(저 시간 전으로는 음수로 표현 된다더라.)

그래서 new Date().getTime() 을 콘솔에 입력해보면 1630520357722 이란 값이 나온다.

아마.. 저 값이 1970년 1월 1일 부터 지금까지의 시간을 밀리세컨드 단위로 나타낸것이겠지..?
자, 그럼 계산을 해보자. 우리는 이제 크리스마스가 디데이인 2021년 12월 25일 에서 현재 시간을 뺀다.
그렇다면? 디데이는 고정되어있고, 현재시간은 점점 증가하고 있으니
시간이 지날 수록 저 둘의 뺀값은 점점 감소할것이다.

코드 작성

일단 기본적으로 html 내에서 필요한 class 들을 js 파일로 가져오도록 한다.
(할 줄 알테니 여기에 안적음)

그리고 나중에 설명하겠지만 setInterval() 가 실행시킬 메인함수.
시간을 나타내는 함수를 만든다.

const getD_Day = () => {}

이제 이 함수안에서 디데이를 구현하는 코드를 작성할텐데,
기준이 될 두가지의 시간을 먼저 변수에 할당하도록 하겠다.
new Date() 의 괄호안에 원하는 날짜를 직접적으로 입력하면 그 날짜를 출력할 수 있다더라.

const setDate = new Date("2021-12-25T00:00:00");  // 크리스마스 (D-Day)
const newDate = new Date();  // 현재날짜

이렇게 두가지의 변수와 아까봤던 getTime() 을 이용해서 두 날짜의 뺀값을 가져와본다.

const distance = setDate.getTime() - newDate.getTime();

이제 이 distance 는 시간이 지날때마다 감소가 될것이다. (이정도는 이해 ㅇㅋ?)

자, 그리고 이 distance 도 어쨌든 시간이기때문에 이 시간을 다시 일, 시간, 분, 초 로 만들어주면
우리가 원하는 시계가 생성될것이다, 여기서는 수학적인 계산이 필요하다.

distance 는 밀리세컨드 단위로 생성되었다. 쉽게말하면 초단위로 계산되었다는거다.
이것을 일수 (day) - 시간 (hours) - 분 (minutes) - 초 (seconds) 로 변형시키자.

day(일) : distance 를 일 단위로 나눈다.
hours(시간) : distance 를 일 단위로 나눈 나머지를 시간 단위로 나눈다.
minutes(분) : distance 를 시간 단위로 나눈 나머지를 분 단위로 나눈다.
seconds(초) : distance 를 분 단위로 나눈 나머지를 초단위로 나눈다.

이런식으로 계산이 될텐데, 코드를 보면 조금... 이해가 될랑가.

const day = Math.floor(distance/(1000*60*60*24));
const hours = Math.floor((distance % (1000*60*60*24))/(1000*60*60));
const minutes = Math.floor((distance % (1000*60*60))/(1000*60));
const seconds = Math.floor((distance % (1000*60))/1000);

이런식으로 구현될것이다. 자, 다 끝났다, 이렇게 생성된 변수들을 시간을 나타내는
시계의 해당 위치에 템플릿 리터럴 ${ } 을 사용하여 입력하면 된다.

innerText = 
  `크리스마스 이브까지 
   ${day}일 
   ${hours < 10 ? `0${hours}` : hours} 일
   ${minutes < 10 ? `0${minutes}` : minutes} 분 
   ${seconds < 10 ? `0${seconds}` : seconds} 초 
   남았습니다.`

갑자기 삼항연산자가 왜 나오나 싶을텐데, 잘 보면 알 수 있다.
저기서 구현되는 시간을 나타내는 숫자는 10 이하의 수 일때는 1자리의 숫자로 표현된다.
1부터 9까지는 1, 2, 3 ... 9 로 나오는것이다.
하지만 우리가 흔히 보는 시계는 이렇지 않고 01, 02, 03 ... 09 로 나타난다.
그렇기때문에 삼항연산자를 이용해서 해당 숫자가 10 이하일때는 출력되는 숫자앞에 0을 표시하도록 하고
아닐때는 그대로 출력하라는 의미를 가진 코드를 입력하는것이다, 복잡해 보이지만 단순한 내용이다.

자, 이렇게 하면 시계가 정상적으로 출력될것이다. 하지만 아직 한가지가 더 남았다.
우리가 만든 이 시계는 작동은 하지만 실시간으로 움직이지 않는다, 브라우저에서 보고있다면
이 브라우저를 새로고침해야 변한 시간이 출력되기때문,
시계를 확인하려면 일일이 새로고침을 해야되기때문에 이것은 완벽한 시계라고 할 수 없다.

이제 여기서 등장하는 것이 setInterval() 메서드이다. 이 메서드는 시계를 구현한 함수가
실시간으로 움직이게끔 하는 역할을 한다. 어떻게 그것이 가능하냐면 이 메서드의 기능을 알면 이해가
가능하다, 주어진 시간을 주기로 인자로 받아온 값을 반복적으로 실행이 가능하게 해준다.

그렇다는것은, 우리가 이 메서드안에 지금껏 만든 getD_Day 함수를 1초마다 실행시키게 한다면
우리는 이 시계가 1초마다 최신화 되는, 마치 실시간으로 움직이는 시계를 보는것처럼 구현이 가능하다는
것이다.

const init = () => {
    getD_Day();
    setInterval(getD_Day, 1000);
};

init();

이렇게 setInterval() 가 동작하는 함수를 만들고 , 이 함수가 바로 실행되게끔 해주면
코드가 완성된다, 결과를 보면 무난하게 실행되는것을 볼 수 있을것이다.

이번 과제로 또 하나 배웠다. 복습 잘해야지..