Javascript - Date 사용법 알아보기

 맨 처음 자바스크립트를 통해 만난 Date는 생각보다 사용하기도 어렵고 어?라고 할 정도로 모호하고 쓰기 불편한 점이 많습니다. Java의 Date, Calendar 만큼 개발을 하는데에 편의성이나 활용도가 떨어집니다. 그래서 Javascript 같은 경우 내장하고 있는 Date보다는 Moment와 Date-fns와 같은 별도의 라이브러리를 통해 Date(날짜 및 시간)를 사용합니다.

 

 오늘은 어렵지만 알아두면 좋은 Javascript의 Date를 전반에 걸쳐 살펴보도록 하겠습니다.

Date의 Timezone

 자바스크립트 Date는 2개의 시간대를 고려하고 만들어졌습니다.

 

- Local time: 현재 실행되고 있는 환경을 기반으로 한 시간대입니다.

- UTC(Coordinated Universal Time): GMT를 기반으로 하는 협정 세계시 시간대입니다.

 

 별도의 설정을 하지 않는 이상 자바스크립트의 시간대는 사용되고 있는 환경의 현지 시간(Local time)을 기반으로 동작합니다.

Date 만들어보기

 기본적으로 Date는 생성자 함수를 통해 사용하고, 활용하는 방법으로는 크게 4가지가 있습니다.

기본 생성자 함수로 날짜 만들기

new Date();

 new 키워드를 사용해서 Date 객체를 생성합니다. 별다른 옵션 없이 사용하는 방법으로 Local time을 기반으로 날짜 및 시간 데이터를 가져와 Date 객체를 만듭니다.

new Date()

인자로 날짜 만들기

new Date(2021, 3, 1);

 Date 생성자 함수에 인자를 전달해 원하는 날짜 및 시간 데이터를 가지고 있는 Date 객체를 생성합니다. 최대 7개의 인자를 전달할 수 있습니다. 년도, 월, 일, 시간, 분, 초, 밀리초 순서로 Date 객체를 만들 때 값을 전달할 수 있습니다. 인자로 전달 할 수 있는 값과 범위는 다음과 같습니다.

인자를 사용한 new Date()

- 연도: 4 자리 연도.
- 월: (0 ~ 11). 월의 기준 값은 1이 아니라 0입니다. 기본값은 0입니다.
- 일: (1 ~ 31). 생략 시 기본값은 1입니다.
- 시간: (0 ~ 23). 생략 시 기본값은 0입니다.
- 분: (0 ~ 59). 생략 시 기본값은 0입니다.
- 초: (0 ~ 59). 생략 시 기본값은 0입니다.
- 밀리 초: (0 ~ 999). 생략 시 기본값은 0입니다.

// 2021년 1월 1일 Local Time.
new Date(2021, 0, 1)

// 2021년 1월 1일 8시 Local Time.
new Date(2021, 0, 1, 8)

// 2021년 1월 1일 8시 20분 Local Time.
new Date(2021, 0, 1, 8, 20)

// 2021년 1월 1일 8시 20분 59초 Local Time.
new Date(2021, 0, 1, 8, 20, 59)

 인수를 사용해 Date 객체를 생성하면 가장 문제가 많은 부분은 월에 해당하는 부분입니다. 월에 해당하는 인자는 zero-indexed 기반으로 되어 있어 1 대신 0부터 시작합니다. 즉 0이 전달되는 경우 반환되는 날짜 및 시간은 1월입니다. 1은 2월입니다.

 

 월의 인자 값의 시작 기준이 0부터인 이유는 자바와 밀접한 관련이 있으나, 사용에 있어 중요한 부분은 0부터 시작이라는 부분이니 이 부분을 인지해주고 사용해주세요.

UTC를 사용한 날짜 만들기

new Date(Date.UTC(2021, 1, 1))

 인수를 사용해 Date 객체를 만드는 경우, UTC를 기준으로 날짜 및 시간 데이터를 가진 Date 객체를 생성할 수 있습니다.

 

 

문자값으로 날짜 만들기

new Date('2021-01-01');

 문자값을 기준으로 Date 객체를 생성하는 방법입니다. 문자를 사용해 날짜 및 시간 데이터를 가진 Date 객체를 만든 방법은 개발을 할 때 주로 사용하는 방법이나 권장되는 방법은 아닙니다. 전달하는 문자값은 ISO-8601 확장 포맷 문자 형식을 따릅니다

문자값을 사용한 new Date()

- YYYY: 4 자리 연도
- MM:(0 ~ 11) 2 자리 월 [ 여기서 1월은 01이고 12월은 12이다 ]
- DD: (0 ~ 31). 2 자리 날짜
- '-': 날짜 구분 기호
- T: 시작 시간을 나타냅니다.
- HH: (0 ~ 23). 24 자리 시간
- mm: (0 ~ 59). 분
- ss: (0 ~ 59). 초 
- sss: (0 ~ 999). 밀리 초
- ':': 시간 구분 기호

 

 다만 문자값을 사용해 Date 객체를 생성하는 것을 권장하지 않으며, 그 이유는 다음과 같습니다.

문자값 new Date() VS 인자값 new Date()

문자값 new Date() VS UTC new Date()

 문자값을 사용해 Date() 객체를 만들면 UTC를 기반으로 날짜 및 시간 데이터를 가진 Date 객체를 만듭니다. UTC를 기준으로 만드는 이유는 는 문자값을 전달해준다고 해서 Date 생성자 함수는 어떤 Timezone을 기준으로 만들어진 날짜 및 시간인지 인지를 할 수 없기 때문에 UTC를 기준으로 Date 객체를 만듭니다. 더불어 브라우저마다 문자값을 해석하는 차이가 있을 수도 있습니다.

 

 이 말은 개발자가 생각한 결과와 Date 생성자 함수가 판단하는 날짜 및 시간은 다르다는 것을 말합니다. 결론적으로 문자값을 사용해서 Date 객체를 만드는 경우 예상하지 않은 시간을 기준으로 Date 객체를 만들고 이는 시스템에서 치명적인 오류를 발생시킬 수 있습니다.

 

 한국을 기준으로는 UTC 기준으로 +9시간이 추가됩니다. 만약 게시판에 등록한 글의 등록 날짜가 실제 등록한 시간과 다른 문제가 있다면 자바스크립트에 설정한 Date를 의심해보세요. 

 

 문자값을 사용하면서도 Local time을 기준으로 Date 객체를 생성하고 싶다면 시간과 분 값을 입력해주면 됩니다.

new Date('2021-01-01T00:00:01.000');

문자값 new Date with 시간, 분

타임스탬프로 날짜 만들기

 JavaScript에서 사용하는 타임스탬프는 1970년 1월 1일(Unix epoch 시간) 이후 경과된 시간 (밀리 초)입니다. 주로 날짜와 시간을 비교할 때 사용하는 편이지만 자주 쓰이지는 않습니다.

타임스탬프를 사용한 new Date

정리하기

 Date 객체를 만드는 방법은 4가지가 있습니다.

- 기본 생성자 함수로 날짜 만들기
- 인자로 날짜 만들기
- 문자값으로 날짜 만들기
- 타임스탬프로 날짜 만들기

 문자값으로 날짜를 만들면 사용하기는 편하지만 시간과 관련된 문제(시간 오차)가 어떻게 발생할지 예측하기가 어려우니 되도록이면 인자를 활용해서 Date 객체를 사용하는 게 가장 좋습니다. 다만 인자를 사용하면 월은 0을 기준으로 생성한다는 점을 기억해주세요.

 

-. 같이 읽으면 좋은 글들

Javascript - Date 심화 배우기 get과 set [날짜 설정 - 더하기/빼기]

Javascript - Date 심화 배우기 format(yyyy-MM-dd) 과 toString [날짜 형식 및 출력]

Javascript - Date 심화 배우기 compare [날짜 비교/날짜 차이/날짜 계산]

Javascript - Date 활용편 [간단한 문자 시계(Text Clock) 만들기]