📌 코드

    // html의 h2태그 안에 d-day 넣기
    const title = document.querySelector("h2");

    const getDDay = () => {
      // D-Day 날짜 지정
      const setDate = new Date("2022-01-01T00:00:00+0900");
      // D-day 날짜의 연,월,일 구하기
      const setDateYear = setDate.getFullYear();
      // getMonth 메서드는 0부터 세기 때문에 +1 해준다.
      const setDateMonth = setDate.getMonth() + 1;
      const setDateDay = setDate.getDate();

      // 현재 날짜를 new 연산자를 사용해서 Date 객체를 생성
      const now = new Date();

      // D-Day 날짜에서 현재 날짜의 차이를 getTime 메서드를 사용해서 밀리초의 값으로 가져온다. 
      const distance = setDate.getTime() - now.getTime();
      
      // Math.floor 함수를 이용해서 근접한 정수값을 가져온다.
      // 밀리초 값이기 때문에 1000을 곱한다. 
      // 1000*60 => 60초(1분)*60 => 60분(1시간)*24 = 24시간(하루)
      // 나머지 연산자(%)를 이용해서 시/분/초를 구한다.
      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);

      // D-Day 날짜를 가져오고,
      // 삼항 연산자를 사용해서 값이 10보다 작을 경우에 대해 조건부 렌더링을 해준다.
      title.innerText = 
        `${setDateYear}년 ${setDateMonth}월 ${setDateDay}일까지 
          ${day}일 
          ${hours < 10 ? `0${hours}` : hours}시간 
          ${minutes < 10 ? `0${minutes}` : minutes}분 
          ${seconds < 10 ? `0${seconds}` : seconds}초 남았습니다.`;
      }

    const init = () => {
      // init 함수 생성해서 getDDay함수 호출하고,
      getDDay();
      // setInterval 메서드에서 getDDay함수를 1초(1000밀리초)마다 호출한다.
      setInterval(getDDay, 1000);
    }

    init();

1. Date

• Date 생성자

  • 시간의 특정 지점을 나타내는 Date 객체 생성

  • Date 객체

    1970년 1월 1일 UTC(국제 표준 시) 00:00으로부터 지난 시간을 밀리 초로 나타내는 유닉스 타임 스탬프를 사용

• Date 객체 초기화

  • 자바 스크립트 Date 객체 생성 법= new 연산자 사용

        const now = new Date();

• getTime() 메서드
  • 표준 시에 따라 지정된 날짜의 시간에 해당하는 숫자 값 반환

        dateObj.getTime();

• getMonth() 메서드
  • Date 객체의 월 값을 현지 시간에 맞춰 반환
  • 월은 0부터 시작
    • ex. 0은 1월, 1은 2월...

    dateObj.getMonth();

2. Math

• Math.floor() 함수

  • 주어진 숫자와 같거나 작은 정수 중에서 가장 큰 수를 반환

  • floor()⇒ Math의 정적 메서드

    → 사용자가 생성한 Math 객체의 메서드로 호출 불가

    → 항상 Math.floor() 사용
    

3. 연산자

• 나머지 연산자 (%)
  • 피제수가 제수에 의해 나누어진 후, 그 나머지를 반환
  • 항상 피제수의 부호를 따름

4. Window Or WorkerGlobalScope

• setInterval() 메소드
  • window, worker 인터페이스에서 주기적으로 함수 호출 or 코드 실행 메서드

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

5. 기타

• 브라우저마다 다른 출력 값

  • ISO 8601(날짜와 시간과 관련된 데이터 교환을 다루는 국제 표준)처리가 다르기 때문

    • D-Day 날짜를 지정 시
      - "2022-01-01:00:00:00+0900" → 결과: NaN
      - "2022-01-01T00:00:00+0900" → 결과: 출력 완료

• UTC/GMT +0900 (대한민국 표준시)

  • 세계협정시(세계표준시)+ 9시간 = 한국시간

    1. UTC (협정 세계표준시)
    - 평균시(GMT)에 기반
    → GMT로도 불리기도 함
    → GMT와의 차이: 초의 소숫점 단위만
    → 일상에서는 혼용

    2. GMT
    - 그리니치 평균시(평균시)(Greenwich Mean Time, GMT)
    - 런던 - 기점, 웰링턴 - 종점인, 협정 세계시의 기준시간대

참고: 희진님 벨로그