new Date()

new Date()

new Date()는 현재 날짜와 시간, 타임존을 출력해주며 new Date('2020-08-20')과 같이 날짜를 넣으면 그 날짜를 기준으로 알려준다.

new Date('2020-08-02');
Sun Aug 02 2020 22:00:48 GMT+0900 (Korean Standard Time)

이를 이용해 D-Day를 계산할 수 있다.

• new Date()를 연산에 사용하면 날짜 및 시간을 milisecond으로 환산해서 나타내준다. 따라서 이를 일수로 변환할 필요가 있다.
  • /1000 second로 바꾸기 위해 나누기 1000
  • * 60 분으로 바꾸기 위해 곱하기 60
  • * 60 시간으로 바꾸기
  • * 24 일로 바꾸기

	new Date() / (1000 * 60 * 60 *24);

• 하지만 milisecond으로 나타낸 수이기때문에 시간에 따라 딱 떨어지게 나오지않을 수가 있다. 소수점이 나올 수 있다는 뜻이다.
  • 이건 Math.floor() 함수를 사용해 반내림 해주면 쉽게 정수를 얻을 수 있다.

	Math.floor(new Date() / (1000 * 60 * 60 *24));

• 다만 이것은 디데이 계산기와 비교해보니 D-Day일수가 하루 적게 계산되어 나온다. 따라서 +1을 해주면 된다. 아마 Math.ceil을 사용하면 해결될 듯도 싶지만 확인해보지않았다.

	Math.floor(new Date() / (1000 * 60 * 60 *24)) + 1;

• setHours()
  • new Date는 현재 실행한 기준의 시간을 알려주기 때문에 시간에 따라 날짜 계산이 달라질 수 있다.
  • 자정이 지나자마자 8월 2일 새벽 00:30에 계산하는 것과 당일 8월 2일 11:30pm에 계산하는 값이 다르게 나올 수 있다는 뜻이다.
  • setHours() 로 시간을 하나로 모두 고정해놓으면 이 문제를 쉽게 해결할 수 있다.
  • () 안의 숫자는 원하는 값을 항상 일정하게 넣으면 된다. (9)는 오전 9시를 뜻한다

	Math.floor(new Date().setHours(9) / (1000 * 60 * 60 *24)) + 1;

계산하기

data를 넘겨받아 계산을 해보았다. startdate는 일정의 시작을, enddate는 끝을 나타낸다.
startdateLeft와 enddateLeft에 각각 얼만큼 남았는지 넣어준다.

  let startdateLeft = Math.floor((new Date(data.startdate).setHours(9)  new Date().setHours(9)) / (1000 * 60 * 60 * 24)) + 1;
  let enddateLeft = Math.floor((new Date(data.enddate).setHours(9) - new Date().setHours(9)) / (1000 * 60 * 60 * 24)) + 1;

• 이를 따로 계산해주는 이유는 단계를 세 개로 구분하기 위함이다
  • 시작일 전을 기준으로 디데이 표시
  • 시작일과 마감일 사이일 때는 진행중으로 표시
  • 마감일 지나면 마감으로 표시
  • status_content가 디데이, 진행중, 마감을 표현한다

  let status_content;
  if (startdateLeft > 0) {
    status_content = `D-${startdateLeft}`;
  } else if (startdateLeft == 0) {
    status_content = 'D-Day';
  } else if (enddateLeft >= 0) {
    status_content = '진행중';
  } else {
    status_content = '마감';
  }

시작날짜/마감날짜 받아서 기간 표현하기

• 시작날짜와 마감날짜가 다른 경우에는 아래처럼 기간으로 표현하고자한다

  시작날짜: 2020-07-20
  마감날짜: 2020-08-05
  기간: 7.20 ~ 8.05

• 하지만 둘이 같다면 기간이 아닌 날짜를 하나로 보여준다

  시작날짜: 2020-07-20
  마감날짜: 2020-07-20
  기간: 7.20

  let startdate = `${new Date(data.startdate).getMonth() + 1}.${new Date(data.startdate).getDate()}`;
  let enddate = `${new Date(data.enddate).getMonth() + 1}.${new Date(data.enddate).getDate()}`;
  let period;
  if (startdate == enddate) {
    period = startdate;
  } else {
    period = `${startdate} ~ ${enddate}`;
  }

• getMonth()는 월을 0부터 센다. 따라서 7월 날짜의 getMonth()는 6으로 나와 1을 더해주어야한다
• 변수와 문자열을 함께 사용하고싶으면 `를 사용한다
• 문자열${변수}