몬그로이

[javascript] D-day 계산하기 본문

과거의 나에게 하는 코드 설명

[javascript] D-day 계산하기

Mon Groy 2024. 4. 19. 00:00

Date객체

JavaScript는 기본적으로 숫자를 0부터 센다

1970년 1월 1일 00:00:00(UTC)를 기준으로 날짜가 카운트 되며

그 시점 이전은 음수로 표시하고, 시점 이후는 양수로 표시한다

 

즉,

new Date(0)은 1970년 1월 1일을 나타내고

new Date(1000)은 1970년 1월 1일 00:00:01을 나타낸다

※ 괄호 안의 숫자의 단위는 1밀리세컨드로 1000분의 1초를 의미한다

 

D-day 계산시 유의 사항

D-day 날짜 에서 new Date() 를 뺀 다음 올림이든 내림이든 해준 후에

Day에 해당하는 수치인 24*60*60*1000 으로 나눠 주어야 한다

 

ceil이나 floor함수를 사용할 때는 날짜가 아니라 밀리세컨드의 누적분으로 산출되기 때문이다

    <script>
      const today = new Date();
      const Dday = new Date("YYYY-MM-DD");
   
      const dayDiff = Math.ceil((Dday - today) / (24 * 60 * 60 * 1000));
      const element = document.getElementById("DdayCounter");
   
      element.textContent = `${dayDiff}`;
    </script>

 


 

참고했던 D-day 카운터

    <script>
        const today = new Date();
        const dDay = new Date(" YYYY-MM-DD");
 
        today.setHours(0, 0, 0, 0);
        dDay.setHours(0, 0, 0, 0);

        const timeDifference = dDay - today;
        const oneDay = 24 * 60 * 60 * 1000;

        const daysLeft = Math.floor(timeDifference / oneDay) + 1;
        const countdownElement = document.getElementById("countdown");
        countdownElement.textContent = `${daysLeft}일`;
    </script>

 

개선점 & 알게 된 점

 

Date()의 의미를 조사하니 Date(1000)의 의미도 자연스레 알게 되었다

그러자 24*60*60*1000의 의미도 알게 되었다

 

따라서 계산된 날짜를 24*60*60*1000로 나누는 이유는

두 날짜의 간격을 하나의 수로 취급하기 때문이라는 것을 깨닫게 되었다

 

floor로 내림을 할 것이므로 굳이 setHours(0,0,0,0)을 할 필요가 없었고

floor 후 +1을 하느니 ceil을 사용하는 게 나을 것이라 여겼다

 

그렇게 식을 더 단순화 한 D-day 카운터 식을 세울 수 있었다