조건에 따른 메시지 출력 강의

7:49 부분에 강사님은 NaN이 한 번만 출력되는데 저는 NaN NaN NaN NaN 총 네 번이 출력되는데 괜찮나요...?
<!DOCTYPE html>
<html lang="ko">
  <head>
    <title>D-Day</title>
    <link rel="stylesheet" href="./style.css" />

    <script>
      const dateForMaker = function () {
        // HTML에서 입력된 연도 값을 가져와서 inputYear 변수에 저장
        const inputYear = document.querySelector("#target-year-input").value;
        // HTML에서 입력된 월 값을 가져와서 inputMonth 변수에 저장
        const inputMonth = document.querySelector("#target-month-input").value;
        // HTML에서 입력된 날짜 값을 가져와서 inputDate 변수에 저장
        const inputDate = document.querySelector("#target-date-input").value;

        // 연도, 월, 날짜를 하이픈으로 연결하여 날짜 형식 문자열 생성
        // const dateFormat = inputYear + "-" + inputMonth + "-" + inputDate;
        const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`;
        // 생성된 날짜 형식 문자열을 반환
        return dateFormat;
        // console.log(inputYear, inputMonth, inputDate);
      };

      const counterMaker = function () {
        const targeDateInput = dateForMaker();
        // 현재 시간
        const nowDate = new Date();
        // 대상 날짜를 생성하고 시, 분, 초, 밀리초를 0으로 설정
        const targetDate = new Date(targeDateInput).setHours(0, 0, 0, 0);
        // emaining = 남은 시간을 초로 환산
        // 밀리초를 초로 변환하기 위해 1000을 나눔
        const remaining = (targetDate - nowDate) / 1000;
        console.log(targetDate);
        // remaining이 0보다 작으면 즉, 타이머가 종료된다면
        if (remaining <= 0) {
          // "타이머가 종료되었습니다." 출력
          console.log("타이머가 종료되었습니다.");
          // 만약 잘못된 날짜가 들어왔다면 "유효한 시간대가 아닙니다." 출력
        } else if (remaining === NaN) {
          console.log("유효한 시간대가 아닙니다.");
        }

        // 'remaining' 값을 3600(초당 시간)과 24(시간당 일)로 나눈 후 정수 부분을 남은 일수로 저장
        const remainingDate = Math.floor(remaining / 3600 / 24);
        // 'remaining' 값을 3600(초당 시간)으로 나눈 후 24(시간)로 나눈 나머지를 남은 시간(시)으로 저장
        const remainingHours = Math.floor(remaining / 3600) % 24;
        // 'remaining' 값을 60(초당 분)으로 나눈 후 60(분)으로 나눈 나머지를 남은 분으로 저장
        const remainingMin = Math.floor(remaining / 60) % 60;
        // 'remaining' 값을 60(초)으로 나눈 후 60(초)으로 나눈 나머지를 남은 초로 저장
        const remainingSec = Math.floor(remaining) % 60;
        // 남은 일, 시간, 분, 초를 콘솔에 출력
        console.log(remainingDate, remainingHours, remainingMin, remainingSec);
      };
    </script>
  </head>
  <body>
    <h1>D-Day</h1>
    <div id="d-day-container">
      <div class="d-day-child-container">
        <span id="days">0</span>
        <span>일</span>
      </div>
      <div class="d-day-child-container">
        <span id="hours">0</span>
        <span>시간</span>
      </div>
      <div class="d-day-child-container">
        <span id="min">0</span>
        <span>분</span>
      </div>
      <div class="d-day-child-container">
        <span id="sec">0</span>
        <span>초</span>
      </div>
    </div>
    <div id="target-selector">
      <!-- 연도를 입력받는 입력란. 'id'는 "target-year-input"이며 CSS 클래스는 "target-input"입니다. -->
      <input id="target-year-input" class="target-input" size="5" /> -
      <!-- 월을 입력받는 입력란. 'id'는 "target-month-input"이며 CSS 클래스는 "target-input"입니다. -->
      <input id="target-month-input" class="target-input" size="5" /> -
      <!-- 날짜를 입력받는 입력란. 'id'는 "target-date-input"이며 CSS 클래스는 "target-input"입니다. -->
      <input id="target-date-input" class="target-input" size="5" />
    </div>
    <button onclick="counterMaker()" id="start-btn">카운트다운 시작</button>
  </body>
</html>
인프런 커뮤니티 질문&답변
