Date 객체와 날짜 디데이 시간 날짜 카운트 계산하기 (자동 날짜 구하기)

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>D-day 계산기</title>
	</head>
	<body>
			<h1>D-day</h1>
			<div id="count">

	
<script>	// D-Day
const dday = new Date("2021-08-30:17:20:00+0900").getTime();

setInterval(function() {
  const today = new Date().getTime();
  const gap = dday - today;
  const day = Math.floor(gap / (1000 * 60 * 60 * 24));
  const hour = Math.floor((gap % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
  const min = Math.floor((gap % (1000 * 60 * 60)) / (1000 * 60));
  const sec = Math.floor((gap % (1000 * 60)) / 1000);

  	document.getElementById("count").innerHTML = "D-DAY까지 " + day + "일 " + hour + "시간 " + min + "분 " + sec + "초 남았습니다.";
}, 1000);
</script>
	</body>
	</html>

Math

Math는 수학적인 상수와 함수를 위한 속성과 메서드를 가진 내장 객체입니다. 함수 객체가 아닙니다.
Math는 Number 자료형만 지원하며 BigInt와는 사용할 수 없습니다.

Math.ceil(x)인수보다 크거나 같은 수 중에서 가장 작은 정수를 반환합니다.( 당일 제외)
Math.floor(x)인수보다 작거나 같은 수 중에서 가장 큰 정수를 반환합니다. (당일 포함)

자바스크립트 날짜 메소드

getFullYear() : 연도 정보를 가져옴
getMonth() : 월 정보를 가져옴(현재 월 -1 , 0 이상 11 이하).
getDate() : 일 정보를 가져옴
getDay() : 요일 정보를 가져옴(일:0~토:6)
getDay/getHours/getMinutes/getSeconds() : 시/분/초 정보를 가져옴
getTime : 1970년 1월 1일부터 경과된 시간을밀리초로 표기함

et now = new Date(); alert( now ); // 현재 날짜 및 시간이 출력됨

new Date (year, month, date, hours, minutes, seconds, ms 'UTC’)

주어진 인수를 조합해 만들 수 있는 날짜가 저장된 객체가 반환됩니다(지역 시간대 기준). 첫 번째와 두 번째 인수만 필수값입니다.

year는 반드시 네 자리 숫자여야 합니다. 2013은 괜찮고 98은 괜찮지 않습니다.
month는 0(1월)부터 11(12월) 사이의 숫자여야 합니다.
date는 일을 나타내는데, 값이 없는 경우엔 1일로 처리됩니다.
hours/minutes/seconds/ms에 값이 없는 경우엔 0으로 처리됩니다.
new Date(2011, 0, 1, 0, 0, 0, 0); // 2011년 1월 1일, 00시 00분 00초 new Date(2011, 0, 1); // hours를 비롯한 인수는 기본값이 0이므로 위와 동일

최소 정밀도는 1밀리초(1/1000초)입니다.

let date = new Date(2011, 0, 1, 2, 3, 4, 567);
alert( date ); // 2011년 1월 1일, 02시 03분 04.567초

getYear()말고 getFullYear()를 사용하세요.

여러 자바스크립트 엔진이 더는 사용되지 않는(deprecated) 비표준 메서드 getYear()을 구현하고 있습니다. 이 메서드는 두 자릿수 연도를 반환하는 경우가 있기 때문에 절대 사용해선 안 됩니다. 연도 정보를 얻고 싶다면 getFullYear()를 사용하세요.

위에서 소개해드린 메서드 모두는 현지 시간 기준 날짜 구성요소를 반환합니다.

위 메서드 이름에 있는 ‘get’ 다음에 'UTC’를 붙여주면 표준시(UTC+0) 기준의 날짜 구성 요소를 반환해주는 메서드 getUTCFullYear(), getUTCMonth(), getUTCDay()를 만들 수 있습니다.

현지 시간대가 UTC 시간대와 다르다면 아래 예시를 실행했을 때 얼럿창엔 다른 값이 출력됩니다.

// 현재 일시
let date = new Date();

// 현지 시간 기준 시
alert( date.getHours() );

// 표준시간대(UTC+0, 일광 절약 시간제를 적용하지 않은 런던 시간) 기준 시
alert( date.getUTCHours() );

날짜 구성요소 설정하기

아래 메서드를 사용하면 날짜 구성요소를 설정할 수 있습니다.

setFullYear(year, [month], [date])
setMonth(month, [date])
setDate(date)
setHours(hour, [min], [sec], [ms])
setMinutes(min, [sec], [ms])
setSeconds(sec, [ms])
setMilliseconds(ms)
setTime(milliseconds) (1970년 1월 1일 00:00:00 UTC부터 밀리초 이후를 나타내는 날짜를 설정)

setTime()을 제외한 모든 메서드는 setUTCHours()같이 표준시에 따라 날짜 구성 요소를 설정해주는 메서드가 있습니다.

setHours와 같은 메서드는 여러 개의 날짜 구성요소를 동시에 설정할 수 있는데, 메서드의 인수에 없는 구성요소는 변경되지 않습니다.

예시:

let today = new Date();

today.setHours(0);
alert(today); // 날짜는 변경되지 않고 시만 0으로 변경됩니다.

today.setHours(0, 0, 0, 0);
alert(today); // 날짜는 변경되지 않고 시, 분, 초가 모두 변경됩니다(00시 00분 00초).

자동 고침

Date 객체엔 자동 고침(autocorrection) 이라는 유용한 기능이 있습니다. 범위를 벗어나는 값을 설정하려고 하면 자동 고침 기능이 활성화되면서 값이 자동으로 수정됩니다.

예시:

let date = new Date(2013, 0, 32); // 2013년 1월 32일은 없습니다.
alert(date); // 2013년 2월 1일이 출력됩니다.

Date 객체를 숫자로 변경해 시간차 측정하기

Date 객체를 숫자형으로 변경하면 타임스탬프(date.getTime()을 호출 시 반환되는 값)가 됩니다.

let date = new Date();
alert(+date); // 타임스탬프(date.getTime()를 호출한 것과 동일함)

이를 응용하면 날짜에 마이너스 연산자를 적용해 밀리초 기준 시차를 구할 수 있습니다.
시차를 측정해 나만의 스톱워치를 만들어봅시다.

let start = new Date(); // 측정 시작

// 원하는 작업을 수행
for (let i = 0; i < 100000; i++) {
  let doSomething = i * i * i;
}

let end = new Date(); // 측정 종료

alert( `반복문을 모두 도는데 ${end - start} 밀리초가 걸렸습니다.` );

Date.now()

Date 객체를 만들지 않고도 시차를 측정할 방법이 있습니다.

현재 타임스탬프를 반환하는 메서드 Date.now()를 응용하면 됩니다.

Date.now()는 new Date().getTime()과 의미론적으로 동일하지만 중간에 Date 객체를 만들지 않는다는 점이 다릅니다. 따라서 new Date().getTime()를 사용하는 것보다 빠르고 가비지 컬렉터의 일을 덜어준다는 장점이 있습니다.

자바스크립트를 사용해 게임을 구현한다던가 전문분야의 애플리케이션을 구현할 때와 같이 성능이 중요한 경우에 Date.now()가 자주 활용됩니다. 물론 편의를 위해 활용되기도 하죠.

위 예시를 Date.now()를 사용해 변경하면 성능이 더 좋습니다.

let start = Date.now(); // 1970년 1월 1일부터 현재까지의 밀리초

// 원하는 작업을 수행
for (let i = 0; i < 100000; i++) {
  let doSomething = i * i * i;
}

let end = Date.now(); // done

alert( `반복문을 모두 도는데 ${end - start} 밀리초가 걸렸습니다.` ); // Date 객체가 아닌 숫자끼리 차감함

Date.parse와 문자열

메서드 Date.parse(str)를 사용하면 문자열에서 날짜를 읽어올 수 있습니다.

단, 문자열의 형식은 YYYY-MM-DDTHH:mm:ss.sssZ처럼 생겨야 합니다.

YYYY-MM-DD – 날짜(연-월-일)
"T" – 구분 기호로 쓰임
HH:mm:ss.sss – 시:분:초.밀리초
'Z'(옵션) – +-hh:mm 형식의 시간대를 나타냄. Z 한 글자인 경우엔 UTC+0을 나타냄

YYYY-MM-DD, YYYY-MM, YYYY같이 더 짧은 문자열 형식도 가능합니다.

위 조건을 만족하는 문자열을 대상으로 Date.parse(str)를 호출하면 문자열과 대응하는 날짜의 타임스탬프가 반환됩니다. 문자열의 형식이 조건에 맞지 않은 경우엔 NaN이 반환됩니다.

예시:

let ms = Date.parse('2012-01-26T13:51:50.417-07:00');

alert(ms); // 1327611110417  (타임스탬프)

Date.parse(str)를 이용하면 타임스탬프만으로도 새로운 Date 객체를 바로 만들 수 있습니다.

let date = new Date( Date.parse('2012-01-26T13:51:50.417-07:00') );

alert(date);

요약

자바스크립트에선 Date 객체를 사용해 날짜와 시간을 나타냅니다. Date 객체엔 ‘날짜만’ 혹은 ‘시간만’ 저장하는 것은 불가능하고, 항상 날짜와 시간이 함께 저장됩니다.
월은 0부터 시작합니다(0은 1월을 나타냅니다).
요일은 getDay()를 사용하면 얻을 수 있는데, 요일 역시 0부터 시작합니다(0은 일요일을 나타냅니다).
범위를 넘어가는 구성요소를 설정하려 할 때 Date 자동 고침이 활성화됩니다. 이를 이용하면 월/일/시간을 쉽게 날짜에 추가하거나 뺄 수 있습니다.
날짜끼리 빼는 것도 가능한데, 이때 두 날짜의 밀리초 차이가 반환됩니다. 이게 가능한 이유는 Date 가 숫자형으로 바뀔 때 타임스탬프가 반환되기 때문입니다.
Date.now()를 사용하면 현재 시각의 타임스탬프를 빠르게 구할 수 있습니다.

자바스크립트의 타임스탬프는 초가 아닌 밀리초 기준이라는 점을 항상 유의하시기 바랍니다.

간혹 밀리초보다 더 정확한 시간 측정이 필요할 때가 있습니다. 자바스크립트는 마이크로초(1/1,000,000초)를 지원하진 않지만 대다수의 호스트 환경은 마이크로초를 지원합니다. 브라우저 환경의 메서드 performance.now()는 페이지 로딩에 걸리는 밀리초를 반환해주는데, 반환되는 숫자는 소수점 아래 세 자리까지 지원합니다.

alert(`페이지 로딩이 ${performance.now()}밀리초 전에 시작되었습니다.`);
// 얼럿 창에 "페이지 로딩이 34731.26000000001밀리초 전에 시작되었습니다."와 유사한 메시지가 뜰 텐데
// 여기서 '.26'은 마이크로초(260마이크로초)를 나타냅니다.
// 소수점 아래 숫자 세 개 이후의 숫자는 정밀도 에러때문에 보이는 숫자이므로 소수점 아래 숫자 세 개만 유효합니다.

'Javascript' 카테고리의 다른 글

[js] new Date().getTime() - IOS 에서 NaN뜨는 현상 해결 (0)	2021.08.28
Javascript 정규표현식, 이렇게 시작하자! (0)	2021.08.21
JavaScript 실습 필기 함수Function (0)	2021.07.13
Javascript 실습 필기 반복문 Loop & 배열 Array (0)	2021.07.13
Javascript 실습 필기 (0)	2021.07.13