[JavaScript] D-day 계산.

React개발도중 D-day계산을 Javascript로 구현하였다.
구현하면서 공부한 내용을 옮겨본다.

아래코드로 바로 설명하겠습니다.
react 컴포넌트 내부에서 haveDday라는 D-day계산 function을 선언해주었다.

let haveDday = () => { 
    let Dday = document.querySelector('.dday');
    let openDay = new Date('2022-07-27T00:00:00+0900');   // 영하 한산 개봉날짜.
    let now = new Date();   // 현재날짜
    let dateGap = openDay.getTime() - now.getTime();
    // D-Day 날짜에서 현재 날짜의 차이를 getTime 메서드를 사용해서 밀리초의 값으로 가져온다.


    // Math.floor 함수를 이용해서 근접한 정수값을 가져온다.
    // 밀리초 값이기 때문에 1000을 곱한다. 
    // 1000*60 => 60초(1분)*60 => 60분(1시간)*24 = 24시간(하루)
    // 나머지 연산자(%)를 이용해서 시/분/초를 구한다.
    let day = Math.floor(dateGap / (1000*60*60*24));   
    let hours = Math.floor((dateGap % (1000*60*60*24)) / (1000*60*60));   // 하루단위로 나누고 나온 나머지는 시,분,초가 나온다.
    let minutes = Math.floor((dateGap % (1000*60*60)) / (1000*60));   // 마찬가지로 시간단위로 나누고 나온 나머지는 분,초가 나온다.
    let seconds = Math.floor(dateGap % (1000*60) / 1000);   // 분단위로 나누고 나온 나머지는 초 가 나온다.
    
    Dday.innerHTML = `${day}<span>일</span> ${hours}<span>시간</span> : ${minutes}<span>분</span> : ${seconds}<span>초</span> 남았습니다.`;
  };

  let countTime = () => {  // countTime함수 생성해서
      setInterval(haveDday, 1000);    // setInterval 메서드에서 haveDday함수를 1초(1000밀리초)마다 실행(호출)한다.
  };


  useEffect(() => {  
     countTime();
     // 이렇게 useEffect 안에서 countTime()함수를 load되고 딱한번만 호출하게되면, 
     // 함수내부의 setInterval 메서드가 1초마다 D-day함수를 실행하고, 계산해준다!.
  }, []);  

이렇게 코드를 작성하면 아래처럼
D-day가 구현된다.

참고사이트 : https://velog.io/@dev-hannahk/js-d-day