[JavaScript] 날짜를 생성하는 New Date

Date 생성자는 시간의 특정 지점을 나타내는 Date 객체를 플랫폼에 종속되지 않는 형태로 생성한다.
Date 객체는 1970년 1월 1일 UTC(국제표준시) 자정으로부터 지난 시간을 밀리초로 나타내는 UNIX 타임스탬프를 담는다.

구문은 아래와 같이 기입하여 사용한다.

new Date();
new Date(value);
new Date(dateString);

new Date(year, monthIndex);
new Date(year, monthIndex, day);
new Date(year, monthIndex, day, hours);
new Date(year, monthIndex, day, hours, minutes);
new Date(year, monthIndex, day, hours, minutes, seconds);
new Date(year, monthIndex, day, hours, minutes, seconds, milliseconds);

새로운 Date 객체를 생성하는 방법은 new 연산자를 사용하는 것이 유일하다. 
now = Date()처럼 Date를 직접 호출하면 새로운 Date객체가 아니라 문자열을 반환합니다.

UNIX 타임스탬프 값이란?

1970년 1월 1일 00:00:00 UTC(UNIX 시간)부터의 시간을 밀리초 단위로 표현하되 윤초는 무시한 정수 값이다.
대부분의 UNIX 타임스탬프 함수는 초 단위까지만 정확함으로 이 부분을 유의해야 한다.

타임스탬프 문자열

Date.parse() 메서드가 인식할 수 있는 형태로 나타낸 날짜 문자열이다. IETF 호환 RFC 2822 타임스탬프와, ISO8601의 특정 버전을 인식한다.
※ Date생성자(및 동일한 동작의Date.parse())를 사용한 날짜 파싱은 동작이 일관적이지 못하고 브라우저끼리 차이가 존재하므로 사용하지 않는 것이 좋다.

---

개별 날짜 및 시간 구성 요소

최소한 연도와 월이 주어졌을 때, Date()의 이 형태는 Date 객체를 생성할 때 모든 구성 요소(연, 월, 일, 시, 분, 초, 밀리초)를 모두 매개변수에서 가져온다. 누락한 요소에는 가장 낮은 값(day는 1, 나머지는 0)을 사용합니다. 모든 매개변수 값은 UTC가 아닌 현지 시간으로 취급한다.

year

연도를 나타내는 정수 값이다.0부터 99까지는 1900부터 1999로 처리합니다. 다른 모든 값은 그대로 사용한다.

monthIndex

월을 나타내는 정수 값으로 1월을 나타내는 0부터 12월을 나타내는 11까지 사용할 수 있다.

day

일을 나타내는 정수 값으로. 기본값은 1이다.

hours

시를 나타내는 정수 값으로 기본 값은 자정을 나타내는 0이다.

minutes

분을 나타내는 정수 값으로 기본 값은 정각을 나타내는 0이다.

seconds

초를 나타내는 정수 값으로 기본 값은 0초이다.

milliseconds

밀리초를 나타내는 정수 값으로. 기본 값은 0밀리초이다.

---

실제로 new Date() 생성자를 사용하기 위해서는 아래와 같이 사용해야 한다.

const nowDate = new Date();

위와 같이 생성자를 생성한 이후 nowDate를 출력하게 되면 Tue Jun 11 2024 00:30:00 GMT+0900 (한국 표준시) 이런 식으로 출력되는 것을 확인할 수 있다. 

이때 이 값을 이용해 목표로 하는 값(target)과 현재 값(now date) 간의 차이를 아래와 같이 구할 수 있다.

D-Day 구하기

하루는 24시간이고 한시간은 60분이고, 60분은 3600초로 이루어지고 있다.

위와 같은 사항을 기억하는 것이 좋은 것이 현재 목표로 하는 날짜와 현재 날짜의 차이를 계산할 경우 우리가 원하는 정보인 "몇 월" "몇 일" "몇 초"에 대한 편한 정보를 제공하지 않고, 그 두 날짜에 대한 밀리초단위의 차이만을 제공하기 때문에 
그 정보를 다시 계산을 하여 우리가 원하는 값으로 출력해줘야 한다.

const nowDate = new Date();
const targetDate = new Date('2024-08-15');

위와 같이 2024년 08월 15일을 예로 들어본다.
2024년 08월 15일은 현재 2024년 06월 11일 기준으로 약 2달 4일 가량의 차이가 있다.
하지만 이를 아래와 같이 두 날짜의 차이를 빼주게 되면 아래와 같은 값을 얻을 수 있다.

const nowDate = new Date();
const targetDate = new Date('2024-08-15');
const remaining = (targetDate - nowDate);

5646266401 이라는 밀리초 단위의 차이 값을 제공한다.
이를 초 단위로 출력하기 위해서 우리는 1초는 1000 밀리초이기 때문에 차이 값에서 1000을 나눠주어 초 단위의 값을 구할 수 있다.

const remaining = (targetDate - nowDate) / 1000;

위에서 1시간을 초로 환산하면 3600초라는 결과가 나온다고 했다. 위의 초 단위의 값에 3600을 나누어 시간을 구한다.

const nowDate = new Date();
const targetDate = new Date('2024-08-15');
const remaining = (targetDate - nowDate) / 1000;
const remainingDate = remaining / 3600;

결과 값이 1567시간이라는 값을 얻을 수 있다. 위에서 부터 순서대로 생각을 하면 
목표로 생각하는 날짜(TargetDate)에서 현재 날짜(new Date)의 값을 빼주면 밀리초 단위의 차이 값을 제공받는다.
그 값은 1000으로 나누어 초 단위의 차이 값을 만들고, 다시 3600으로 나누어 시간 단위의 차이 값을 만든다.
그리고 그 값을 24시간으로 나누어 일 단위의 차이 값을 만들 수 있다.

const remainingDate = remaining / 3600 / 24 ;

위와 같은 목표 날짜에서 현재 날짜를 뺀 일 단위의 결과값을 찾을 수 있다.
하지만 위와 같이 날짜를 구하게 되면 소수점이 붙어 지저분한 결과값이 나오므로 

Math.floor()

함수를 사용하여 소수점을 제거해준다.

const remainingDate = Math.floor(remaining / 3600 / 24) ;

해당 함수를 사용하여 깔끔한 결과값을 얻을 수 있다.
목표한 일자와 현재 날짜의 D-DAY는 65일이라는 결과 값을 얻을 수 있는데, 그 값은 아래와 같이 구해준다.

시간 구하기

시간은 remaining이라는 초단위의 결과 값에서 일과 3600초를 나누어 시간 단위의 차이를 구해주는데,
여기서 24를 나누면 위에서 설명한 것과 같이 일 단위의 차이 값을 얻을 수 있고, 나머지 값을 구하면 시간에 대해 값을 구할 수 있다.

const remainingHours = Math.floor(remaining / 3600) % 24;

분 구하기

위에서 remaing 초 단위의 결과에서 우리는 1시간(3600초)를 나누어 일 단위를 구할 수 있었다.
분 단위를 구하기 위해서는 1시간이 60분이라는 사실을 기억하고, remaing에서 60을 먼저 나눠준다.
그렇게 하면 분 단위의 차이 전체 값을 구할 수 있는데 여기서 60의 나머지 값을 찾으면 분이 된다.

const remainingMin = Math.floor(remaining / 60) % 60;

초 구하기

맨 처음 remaing의 값은 초 단위였고, 우리는 그 값을 가공해 일, 시간, 분 단위의 값을 구할 수 있었다.
그럼 초를 구하기 위해서는 기본적인 초 단위의 값을 60초로 나눈 나머지 값만 구하면 쉽게 구할 수 있다.

const remainingSec = Math.floor(remaining) % 60;

---

위와 같은 작업을 통해 오늘 D-day 값의 일, 시간, 분, 초 모두의 값을 구할 수 있었다.
결과를 아래와 같이 확인해볼 수 있다.

const nowDate = new Date();
const targetDate = new Date('2024-08-15');

const remaining = (targetDate - nowDate) / 1000;

const remainingDate = Math.floor(remaining / 3600 / 24) ;
const remainingHours = Math.floor(remaining / 3600) % 24;
const remainingMin = Math.floor(remaining / 60) % 60;
const remainingSec = Math.floor(remaining) % 60;


console.log(remainingDate, remainingHours, remainingMin, remainingSec);

현재 날짜 2024년 06월 11일 / 목표 날짜 2024년 08월 15일까지

65일 7시간 3분 26초가 남은 것을 확인할 수 있었다.

---

여기서 이제 응용시켜 Input으로 받아온 값의 D-day를 구하는 소스코드를 쉽게 구현할 수 있다.

const dateFormMaker = function(){

    const inputYear = document.querySelector('#target-year-input').value;
    const inputMonth = document.querySelector('#target-month-input').value;
    const inputDate = document.querySelector('#target-date-input').value;

    const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`;

    return dateFormat;    
};

const counterMake = function(){
    const targetDateInput = dateFormMaker();

    const nowDate = new Date();
    const targetDate = new Date(targetDateInput);

    const remaining = (targetDate - nowDate) / 1000;

    const remainingDate = Math.floor(remaining / 3600 / 24) ;
    const remainingHours = Math.floor(remaining / 3600) % 24;
    const remainingMin = Math.floor(remaining / 60) % 60;
    const remainingSec = Math.floor(remaining) % 60;


    console.log(remainingDate, remainingHours, remainingMin, remainingSec);       
}

1. 날짜를 입력할 수 있는 Input 태그를 받아올 수 있다. text형식으로 위와 같이 각 각 따로 입력해 받아 올 수 있고,
date 타입으로 날짜를 그대로 받아 사용할 수도 있다.

2. D-day를 사용하는 함수에 각 각의 날짜가 입력되어 있는 함수를 가져와, 이전에 만들어둔 targetDate의 new Date의 매개변수로 사용한다.

3. 그러면 아래와 같이 자연스럽게 들어가게 되고, 현재 나는 테스트를 위해 2024년 12월 12일을 입력하며 아래와 같은 결과값을 얻을 수 있다.

이 값을 console.log로 찍어내 확인하였지만 변수에 담아서 사용자 화면에 표출하도록 응용할 수도 있다.