[TIL] Date 객체에 대해 알아보자

제가 요즘 진행하고 있는 프로젝트에서 스탑워치를 만들어야 하는 일이 생겼습니다. 그래서 그 방법을 공부하던 중 자바스크립트의 Date 객체를 알게 되어 이에 대해 정리할 겸 이번 포스팅을 작성하게 되었습니다(후에 스탑워치 코드에 대해 서 포스팅 할 예정입니다). 

 

1. Date 객체 

 

Date 생성자는 시간의 특정 지점을 나타내는 Date 객체를 생성합니다. 
Date 객체는 1970년 1월 1일 UTC(국제표준시) 00:00으로부터 지난 시간을 밀리초로 나타내는 
유닉스 타임스탬프를 사용합니다.

// 출처: MDN(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date)

 

Date 객체는 위의 설명처럼 시간의 특정 지점을 나타내는 객체를 생성하는 자바스크립트 내장 객체입니다. 이 객체는 1970년 1월 1일 국제 표준시를 기준으로 현재 기준 얼마만큼의 밀리초가 지났는지를 알려주는 타임스탬프 기능을 가지고 있습니다. 

 

const date1 = new Date('December 17, 1995 03:24:00');
// Sun Dec 17 1995 03:24:00 GMT...

const date2 = new Date('1995-12-17T03:24:00');
// Sun Dec 17 1995 03:24:00 GMT...

console.log(date1 === date2);
// expected output: false;

console.log(date1 - date2);
// expected output: 0


// 출처: MDN(https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date)

 

위의 예시처럼 Date 객체를 사용할 수 있습니다. 이때 유의해야 할 점은 반환 값이 문자열로 반환된 것 처럼 보여도 해당 리턴 값에 대한 type을 찍어보면 객체로 리턴되고 있다는 것입니다. 

 

 

때문에 이런 객체로서의 특성을 활용하여 Date 객체의 다양한 값을 별도로 활용할 수 있습니다.

 

2. Date 객체 생성 방법

 

Date 객체를 생성하는 방법은 new라는 연산자를 활용하는 것이 유일합니다. 다만 Date 객체를 생성할 때 어떤 인자를 넣어주는지에 따라 그 리턴 값이 조금은 변화합니다.

 

1) new Date()

 

const today = new Date();

//Sun Nov 29 2020 14:59:55 GMT+0900 (대한민국 표준시)

 

2) new Date(milliseconds) 

 

인수로 숫자 타입의 밀리초를 전달하면 1970년 1월 1일 00:00(UTC)을 기점으로 인수로 전달된 밀리초만큼 경과한 날짜와 시간을 가지는 리턴값을 반환하게 됩니다.

 

new Date(1000)

//Thu Jan 01 1970 09:00:01 GMT+0900 (대한민국 표준시)


new Date(0)

//Thu Jan 01 1970 09:00:00 GMT+0900 (대한민국 표준시)

 

 

3) new Date(dateString)

 

인수로 날짜와 시간을 나타내는 문자열을 전달하면 지정된 날짜와 시간을 가지는 리턴값을 반환합니다. 이때 인수로 전달한 문자열은 Date.parse 메소드에 의해 해석 가능한 형식이어야 합니다.

 

new Date('Nov 29, 2020 15:05:10');

//Sun Nov 29 2020 15:05:10 GMT+0900 (대한민국 표준시)

new Date('2020/11/29/15:05:10')

//Sun Nov 29 2020 15:05:10 GMT+0900 (대한민국 표준시)

 

* Date 생성자 함수를 new 연산자없이 호출하면 리턴 값은 객체형태가 아닌 문자열로 반환됩니다. 

 

3. Date 객체 메소드

 

Date 객체에는 다양한 메소드들이 존재합니다. 오늘 포스팅에서는 그 중 몇 가지 메소드에 대해서만 다뤄보도록 하겠습니다.

 

1) Date.now()

 

1970년 1월 1일 00:00:00(UTC)을 기점으로 현재 시간까지 경과한 밀리초를 숫자로 반환합니다. 

 

let timeInMs = Date.now();
//출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/now

 

2) Date.parse()

 

1970년 1월 1일 00:00:00(UTC)을 기점으로 인수로 전달된 지정 시간(new Date(dateString)의 인수와 동일한 형식)까지의 밀리초를 숫자로 반환합니다.

 

Date.parse(dateString)

//출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/parse

 

3) Date.prototype.getFullYear()

 

getFullYear() 메서드는 주어진 날짜의 현지 시간 기준 연도를 반환합니다.

 

const moonLanding = new Date('July 20, 69 00:20:18');

console.log(moonLanding.getFullYear());
// expected output: 1969

//출처:  https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getFullYear

 

4) Date.prototype.getMonth()

 

getMonth() 메서드는 Date 객체의 월 값을 현지 시간에 맞춰 반환합니다. 월은 0부터 시작합니다.

 

const moonLanding = new Date('July 20, 69 00:20:18');

console.log(moonLanding.getMonth()); // (January gives 0)
// expected output: 6

// 출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getMonth

 

5) Date.prototype.getDate()

 

getDate() 메서드는 주어진 날짜의 현지 시간 기준 일을 반환합니다.

 

const birthday = new Date('August 19, 1975 23:15:30');
const date1 = birthday.getDate();

console.log(date1);
// expected output: 19

//출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getDate

 

6) Date.prototype.getDay()

 

getDay() 메서드는 주어진 날짜의 현지 시간 기준 요일을 반환합니다. 0은 일요일을 나타냅니다.

 

const birthday = new Date('August 19, 1975 23:15:30');
const day1 = birthday.getDay();
// Sunday - Saturday : 0 - 6

console.log(day1);
// expected output: 2


//출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getDay

 

7) Date.prototype.getHours()

 

getHours() 메서드는 주어진 날짜의 현지 시간 기준 시를 반환합니다.

 

const birthday = new Date('March 13, 08 04:20');

console.log(birthday.getHours());
// expected output: 4

//출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getHours

 

8) Date.prototype.getMinutes()

 

getMinutes() 메서드는 Date 인스턴스의 분을 현지 시간 기준으로 반환합니다.

 

const birthday = new Date('March 13, 08 04:20');

console.log(birthday.getMinutes());
// expected output: 20

//출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getMinutes

 

9) Date.prototype.getSeconds()

 

getSeconds() 메서드는 Date 객체의 초 값을 현지 시간에 맞춰 반환합니다.

 

const moonLanding = new Date('July 20, 69 00:20:18');

console.log(moonLanding.getSeconds());
// expected output: 18


//출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date/getSeconds

 

4. 마무리

 

이번 프로젝트에서 진행하고 있는 스탑워치 기능은 이러한 메소드들을 잘 활용하면 쉽게 만들 수도 있을 것 같습니다만, 일시정지 기능이나 리셋하는 기능에 아직 어려움을 겪고 있어서 어떻게 해야 좋은 스탑워치를 만들 수 있을지 고민이 되네요. 그래도 제가 고민한만큼 좋은 결과물이 나올 것이라 기대하며 오늘 포스팅 마치도록 하겠습니다. 글 봐주셔서 감사합니다.^^