자바스크립트로 D-DAY 계산기 만들기

사실 해야겠다고는 옛저녁부터 생각했는데 일에 치여서 퇴사하고 나서야 하고있는 게 함정.

---

일단… 보통 날짜 계산을 하게 되면 두 가지가 있다.

 

1. 오늘로부터 n일째(예: 50일, 100일, 200일, 300일)
2. 오늘로부터 특정 날짜까지 며칠 남았나?

 

당연한 소리지만 둘 다 할거다. 솔직히 100일 200일 이런건 커플이나 계산하지 우리는 딱히 게산할 일 없잖아요?

 

Reference

https://www.cckn.dev/js-ts/20210520-clac-date/

(JS) 시간 계산하기 (년/월/일/시/분/초 더하기, 빼기)

https://hong6v6.tistory.com/entry/javascript-D-Day-%EA%B3%84%EC%82%B0%EA%B8%B0-%EB%A7%8C%EB%93%A4%EA%B8%B0

[javascript] D-Day 계산기 만들기

 

---

n일째 계산하기

const currentTime = document.querySelector('.currenttime');
let today = new Date();
let todayYear = today.getFullYear();
let todayMonth = today.getMonth() + 1;
let todayDate = today.getDate();
currentTime.innerText = `현재 날짜는 ${todayYear}년 ${todayMonth}월 ${todayDate}일 입니다. `

일단 이렇게 오늘 날짜를 불러왔는데… 그러면 todayDate에 걍 n 더하면 되겠다 싶었던 사람?

괄호 위치만 뻑나도 버그나는 언어에서 그런거 기대하지 말자. 일단 정답에 근접했는데 더하는걸 저기다 하는 게 아니다.

 

var date = new Date();
date.setDate(date.getDate() + 50);
after50.innerText = `현재 날짜에서 50일 후의 날짜는 ${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 입니다. `;

var date = new Date()
date.setDate(date.getDate() + 100)
after100.innerText = `현재 날짜에서 100일 후의 날짜는 ${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 입니다. `;

var date = new Date()
date.setDate(date.getDate() + 200)
after200.innerText = `현재 날짜에서 100일 후의 날짜는 ${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 입니다. `;

var date = new Date()
date.setDate(date.getDate() + 300)
after300.innerText = `현재 날짜에서 100일 후의 날짜는 ${date.getFullYear()}년 ${date.getMonth() + 1}월 ${date.getDate()}일 입니다. `;

date = new Date()로 오늘 날짜를 만들고, date.setDate()로 오늘 날짜의 일수(getDate() 쓰면 일 가져온다)를 가져와서 거기다가 n을 더해야 한다.

 

그러니까 인제 여러분이 오늘 애인이 생겼으면 100일 200일 300일은 저기 있는 날짜 적어뒀다가 챙기십셔. 난 없음.

 

특정 날짜까지 며칠 남았나 계산하기

D-DAY 계산기의 존재의의이자 정수. 이거는 그렇게 어려운 건 아닌데 자꾸 날짜 오차나서 고생했다.

 

const ddayCal = document.querySelector('.ddaycal');
const dDay = document.querySelector('.dday');
const ddayButton = document.querySelector('ddaybutton');

일단 입력창, 디데이 출력할 p태그 하나랑 버튼을 만들고

ddayButton.addEventListener('click',(e)=>{
    dDay.innerText = `${ddayCal.value}까지 D-n입니다. `
});

이벤트 리스너만 추가했다.

 

이제 우리는 저 n을 알맞게 바꿀것이다.

 

let gap = endDate - today;

이것도 그럼 걍 빼면 되나요?

 

나도 모르는 사이에 블랙홀같은데 빠진건가 아니면 지구가 자전을 천천히 하는건가 동공지진이 왔다면 당황하지 말자. 저거 밀리초다. 그래서 그냥 빼면 안되고 빼고나서 나누기를 또 해줘야 한다.

 

ddayButton.addEventListener('click',(e)=>{
    let endDate = new Date(ddayCal.value);
    let gap = endDate - today;
    dDay.innerText = `${ddayCal.value}까지 D-${Math.floor(gap / (1000 * 60 * 60 * 24))}입니다. `
});

저기 보면 Math.floor가 보일텐데 밀리초기때문에 나눠주는거다. 아무튼 이런 절차를 거치면

 

뭐가 불만인지 하루씩 오차가 나는 것을 볼 수 있다. (오늘 17일이니까 말일까지는 13일 남는 게 맞다)

 

ddayButton.addEventListener('click',(e)=>{
    let endDate = new Date(ddayCal.value);
    let gap = endDate - today;
    gap = Math.floor(gap / (1000 * 60 * 60 * 24));
    console.log(gap)

    if (gap > 0) { //디데이 계산할 날짜가 현재 날짜보다 뒤에 있음
        dDay.innerText = `${ddayCal.value}까지 D-${gap + 1}입니다. `
    }
    else if (endDate.getFullYear() == todayYear && endDate.getMonth() + 1 == todayMonth && endDate.getDate() == todayDate) { //어머 오늘이네
        dDay.innerText = `오늘이 D-day입니다. `
    }
    else { //디데이 계산할 날짜가 현재 날짜보다 앞에 있음
        dDay.innerText = `${ddayCal.value}로부터 D+${(gap + 1) * -1}입니다. `
    }
});

오차는 해결 안돼서 걍 1 더했음… 자 근데 D-DAY 계산하는거 간단한데 왜 if문이 있나요? if문은 디데이를 계산하는 데 세 가지 케이스가 있다는 얘기이다. 현재 날짜보다 디데이를 계산할 날짜가 앞에 있거나(else), 현재 날짜가 딱 디데이이거나(else if), 현재 날짜보다 디데이를 계산할 날짜가 뒤에 있거나(if) 세 가지.

 

디데이를 구할 날짜가 올해 신정이라 현재 날짜(2024년 6월 17일)보다 앞에 있다.

 

입력한 날짜가 현재 날짜와 동일하다. (오늘이 디데이)

 

입력한 날짜가 현재 날짜보다 뒤에 있다.