D-day 계산

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

function getDday() {
const date = new Date();
const xmax = new Date("2021-12-24T00:00:00");
const distance = xmax.getTime() - date.getTime();
  //현재시점에서 크리스마스 이브까지 남은 시간을 ms로 계산된 값을 리턴함
const day = Math.floor(distance / (24*60*60*1000));
const hour = String(Math.floor(distance/(1000*60*60) % 24)).padStart(2,"0");
const minute = String(Math.floor(distance/(1000*60) % 60)).padStart(2,"0");
const second = String(Math.floor(distance/(1000) % 60)).padStart(2,"0");

clock.innerText = `크리스마스 이브까지 ${day}d ${hour}h ${minute}m ${second}s 남았습니다.`
}

getDday();

setInterval(getDday, 1000);

개념정리

1. Date

• Date 객체는 생성자 함수이며, 날짜와 시간을 가지는 인스턴스를 생성한다.
• 기본적으로 현재 날짜와 시간을 나타내고, 특정 날짜와 시간을 다루고 싶은 경우 인수로 넣어준다

Date(); // "Wed Aug 04 2021 22:49:13 GMT+0900 (한국 표준시)"

Date 객체 생성

• JS에 Date 객체를 생성하는 방법은 new를 사용하는 것이 유일한 방법이다.

const date = new Date() // 현재 날짜와 시간의 정보를 나타낸다

const xmax = new Date("2021-12-24T00:00:00");
const xMas = new Date(2021, 11, 24, 00, 00, 00)
//xmax와 xMas는 모두 크리스마스 이브 시점의 날짜와 시간의 정보를 나타낸다

Date의 여러가지 Method

• getTime()
  1970년 1월 1일 00:00:00(UTC)를 기점으로 현재 시간까지 경과된 밀리초를 반환한다.
• getDay()
  요일(0 ~ 6)를 나타내는 정수를 반환한다.
  0-일, 1-월, 2-화, 3-수, 4-목, 5-금, 6-토
• getMonth()
  월을 나타내는 0 ~ 11의 정수를 반환한다. 1월은 0, 12월은 11이다.
• getDate
  날짜(1 ~ 31)를 나타내는 정수를 반환한다.
• getHours()
  시간(0 ~ 23)를 나타내는 정수를 반환한다.
• getMinutes()
  분(0 ~ 59)를 나타내는 정수를 반환한다.
• getSeconds()
  초(0 ~ 59)를 나타내는 정수를 반환한다.

남은 시간을 계산할때 %를 쓰는 이유

타이머를 만들 때 가장 생각을 많이 하게 만들었던 부분이다.

distance는 현재 시점으로부터 이브까지 남은 시간을 ms로 계산한 값이므로
hour = ( distance/(60x60x1000) ) % 24 이렇게 계산해주게 되는데
이유는!!!! distance/(60x60x1000) 까지의 결과값은 시간.xxx을 의미한다.
그런데 시간은 24시간이 되면 'hour'가 아닌 'Day'가 되기 때문에 24로 나눈 나머지가
hour로 표현된다. 이것이 % 연산자를 사용하는 이유이다

padStart , padEnd

• 23:12:04 이런식으로 시간을 표시하고 싶을 때 사용.
• padStart를 사용하지 않는다면 23:12:4 이렇게 분, 초가 한자리로 나타나게 될 것이다.
• 이를 2자리로 나타나게 하기 위해 쓰는 Method, 아주 유용하다.
• 이건 String에만 사용할 수 있는 Method 이다

String(Math.floor(distance/(1000) % 60)).padStart(2,"0");

String.padStart(param1, param2);
String.padEnd(param1, param2)

padStart(2,"0") // 2자리로 만들고 , 앞에 0을 붙여준다 23:14:02
padEnd(2, "0") // 2자리로 만들고, 뒤에 0을 붙여준다 23:14:20

• return값이 number라면 String으로 감싸준 후 사용해야 한다.
• param1 에는 몇자리로 만들것인지 넣어주고, param2 에는 '무엇'을 넣을 것인지 넣어준다.
• padStart와 padEnd는 '무엇'이 앞에 붙느냐 뒤에 붙느냐의 차이.

setInterval( function, ms )

window, worker 인터페이스에서 정해놓은 일정 시간 간격으로 함수를 호출하거나 코드를 실행하는 Method.

function setInterval (handler: TimerHandler, 
                       timeout?: number, ...arguments: any[]): number

이와 비슷하지만 조금은 다른

setTimeout ( function, ms )

window, worker 인터페이스에서 정해놓은 시간 후에 함수를 호출하거나 코드를 실행하는 Method.

function setTimeout (handler: TimerHandler, timeout?: number, ...arguments: any[]): number

느낀점.

간단한 작업이지만 새로운 JS의 개념들을 배우게 되서 너무 기쁘다.
이렇게 배운것들을 하나하나 정리해 나가면서 계속해서 공부하고 발전해나가고 싶다.
더 잘하고싶은 동기부여를 받은 하루.