한 입 크기로 잘라먹는 리액트Table Of Contents
Date 객체 생성하기Date 객체와 협정 세계시(UTC)협정 세계시타임스탬프원하는 날짜로 Date 객체 생성하기문자열로 특정 날짜 전달하기숫자로 특정 날짜 전달하기타임 스탬프로 날짜 생성하기Date 객체에서 날짜 요소 얻기getFullYeargetMonthgetDategetDaygetHours, getMinutes, getSeconds, getMillisecondsDate 객체의 날짜 요소 수정하기setFullYearsetMonthsetDatesetHours, setMinutes, setSecondsDate 객체 출력하기toStringtoDateStringtoLocaleString, toLocaleDateStringDate 객체 응용하기n 월씩 이동하기배열에서 이번 달에 해당하는 날짜만 필터링하기
자바스크립트에는 시간을 표현하는 Date 객체가 있습니다. Date는 배열이나 함수처럼 특수한 목적을 수행하기 위해 기능이 추가된 객체입니다. Date 객체는 날짜와 시간을 저장하며 이와 관련한 유용한 메서드도 함께 제공합니다.
Date 객체를 활용하면 특정 게시물의 생성 시간을 저장하거나 오늘의 날짜를 출력하거나 타이머를 만드는 등 시간과 관련된 기능을 쉽게 구현할 수 있습니다. 이번 절에서는 자바스크립트의 Date 객체를 자세히 살펴보겠습니다.
Date 객체 생성하기
1장에서 객체를 알아볼 때, 객체 생성 방법으로 생성자 문법과 리터럴 문법 2가지가 있다고 배웠습니다. 그런데 Date 객체는 리터럴 문법이 아닌 생성자 문법으로만 만들 수 있습니다.
Date 객체는 다음과 같이 new 키워드로 생성합니다
코드를 불러오는 중 입니다 ...생성자인 Date()에 아무런 인수도 전달하지 않으면 생성 당시의 시간, 즉 현재의 날짜와 시간이 저장된 Date 객체를 반환합니다.
생성자란?
자바스크립트의 생성자는 객체를 생성하는 함수입니다. Date 객체는 리터럴이 아닌 생성자로 만듭니다. 생성자로 객체를 만들 때 특정 시간 등의 정보를 인수로 전달하면, 객체를 생성함과 동시에 초기화할 수 있습니다.
Date 객체와 협정 세계시(UTC)
자바스크립트는 전 세계 프로그래머가 공용으로 사용하는 언어이기 때문에, Date 객체는 특정 지역의 시간대에 맞게 동작하지 않고, 협정 세계시라고 부르는 UTC(Universial Time Coordinated)를 기준으로 동작합니다.
협정 세계시
협정 세계시인 UTC는 국제 표준 시간으로 쓰이는 시각입니다. 협정 세계시는 시간의 시작을 1970년 1월 1일 0시 0분 0초를 기준으로 하며, 이 시작 시각을 UTC+0시라고 표현합니다.
자바스크립트의 Date 객체에는 특정 시간을 ‘타임 스탬프’를 기준으로 저장하고 수정하는 기능이 있습니다. 타임 스탬프란 특정 시간이 UTC+0시인 1970년 첫날을 기점으로 흘러간 밀리초(ms)의 시간입니다. 따라서 Date 객체를 생성할 때 생성자에 인수로 0을 전달하면, UTC+0시를 기준으로 0밀리초 후의 시간을 Date 객체로 생성해 반환합니다.
코드를 불러오는 중 입니다 ...변수 Jan01_1970에 저장된 Date 객체를 출력하면, UTC+0시에 해당하는 1970년 1월
1일 0시 0분 0초를 출력합니다. 그런데 출력값을 자세히 살펴보면 1970년 1월 1일 9시 0분 0초로 출력되는 것을 볼 수 있는데, 이는 한국 표준시가 UTC보다 9시간이 빠르기 때문입니다. 따라서 한국 표준시 기준으로는 UTC+09:00로 표현합니다.
타임스탬프
타임 스탬프란 특정 시간이 UTC+0시인 1970년 첫날을 기준으로 흘러간 밀리초(ms)의 시간을 의미한다고 했습니다. 이번에는 UTC+0시로부터 하루 뒤인 1970년 1월 2일을 저장하는 Date 객체를 생성하겠습니다.
Date 객체에는 타임 스탬프를 인수로 전달할 수 있는데, 그러면 UTC+0시부터 인수로 전달된 타임 스탬프 이후의 시간 정보를 갖는 Date 객체를 반환합니다. 쉽게 말하면 Date 객체 생성자에 하루 24시간에 해당하는 밀리초를 인수로 전달하면, UTC+0에서 하루가 지난 값을 반환합니다. 하루에 해당하는 밀리초인 24 * 3600 * 1000을 Date 생성자의 인수로 전달하겠습니다.
코드를 불러오는 중 입니다 ...24 x 3600 x 1000은 무엇인가요?
1초는 1000밀리초, 1시간은 3600×(60×60)초, 하루는 24시간이기 때문에 24 × 3600 ×1000을 계산하면 하루를 의미하는 밀리초가 나옵니다.
UTC+0을 기준으로 하루 뒤인 1970년 1월 2일에, 한국 표준시 9시간이 더해져 값이 출력되었습니다.
생성된 Date 객체에서 역으로 타임 스탬프를 구할 수도 있습니다.
코드를 불러오는 중 입니다 ...Date 객체의 getTime 메서드는 해당 객체에서 시간에 해당하는 타임 스탬프를 반환합니다. 변수 Jan02_1970에는 1970년 1월 1일부터 24 * 3600 * 1000 밀리초 후의 시간을 Date 객체가 저장하고 있으므로, 86400000이라는 타임 스탬프값을 반환합니다.
원하는 날짜로 Date 객체 생성하기
Date 객체 생성자에 밀리초에 해당하는 인수를 전달하면, UTC+0부터 해당 인수만큼
시간을 더한 Date 객체를 반환합니다.
그렇다면 2000년 10월 10일을 저장하는 Date 객체를 생성하려면 어떻게 해야 할까요? 밀리초를 계산해서 인수로 전달해야 할까요? 아닙니다. UTC+0부터 2000년 10월 10일을 밀리초 단위로 계산하여 인수로 전달하는 것은 매우 어렵고 비효율적인 방법입니다.
문자열로 특정 날짜 전달하기
Date 객체 생성자에 문자열로 표현된 날짜를 인수로 전달하면, 해당 날짜를 기준으로 Date 객체를 만들어 반환합니다.
코드를 불러오는 중 입니다 ...이 코드는 2000년 10월 10일이 저장된 4개의 Date 객체를 생성합니다. 4개의 Date 객체 생성자에 인수로 전달하는 날짜는 각각 다른 형식의 문자열입니다.
Date 객체 생성자는 전달 형식이 다른 문자열을 자동으로 분석해 적절한 날짜를 설정합니다. 보통은 ①~④ 형태의 날짜로 많이 작성하는데, 모든 형태의 문자열을 자동으로 분석할 수 있는 것은 아닙니다. 분석 가능한 다른 형태를 더 알고 싶다면 다음 링크를 참고하길 바랍니다.
숫자로 특정 날짜 전달하기
밀리초가 아니라 year, month, date, hours, minutes, seconds, milliseconds 순서로, 날짜와 시간에 해당하는 숫자를 전달해 원하는 Date 객체를 생성할 수도 있습니다.
코드를 불러오는 중 입니다 ...변수 date1은 year는 2000, month는 10, date는 10 그리고 hours, minutes, seconds, milliseconds는 모두 0을 전달해 생성한 Date 객체입니다.
그런데 결과를 보면 월(month)의 출력이 Oct(10월)가 아닌 Nov(11월)입니다. 이는 Date 객체가 해당 월의 시작을 1이 아니라 0부터 시작하기 때문입니다. 따라서 1월은 0, 12월은 11로 전달해야 원하는 출력 결과를 얻을 수 있습니다. 변수 date2에서는 month에 9를 전달한 결과 10월인 Oct를 출력했습니다.
타임 스탬프로 날짜 생성하기
타임 스탬프를 이용해 날짜를 생성하는 것도 가능합니다. 타임 스탬프는 숫자로 표현되어 있기 때문에 문자열이나 객체보다 저장 공간을 훨씬 적게 차지하여 빠른 비교와 탐색이 가능합니다. 따라서 데이터베이스에서 날짜와 시간을 저장할 때는 타임 스탬프 형태로 저장합니다.
코드를 불러오는 중 입니다 ...① Date 객체의 getTime 메서드는 Date 객체에 저장된 날짜를 타임 스탬프로 변환해 반환합니다. ② Date 객체 생성자에 타임 스탬프값을 인수로 전달하면 자동 분석하여 적절한 날짜를 반환합니다.
Date 객체에서 날짜 요소 얻기
날짜 요소란 연, 월, 일, 시간, 분, 초처럼 날짜를 구성하는 개별 요소입니다. 이번에는 Date 객체 메서드로 날짜 요소를 어떻게 얻는지 살펴보겠습니다.
getFullYear
getFullYear 메서드는 Date 객체에서 네 자릿수의 연도(year)를 반환합니다.
코드를 불러오는 중 입니다 ...출력 결과를 보면 네 자릿수 연도 2000을 반환합니다.
getYear 메서드는 왜 사용하지 않나요?
이전에는 연도를 얻기 위해 getYear 메서드를 사용했지만, 해당 메서드는 자바스크립트 엔진이 최신으로 업데이트되면서 더 이상 사용하지 않습니다. 이전에 개발된 프로그램 소스에서는 아직도 이 메서드의 흔적을 찾을 수 있는데, 앞으로는 사용하지 않는 게 좋습니다.
getMonth
getMonth 메서드는 Date 객체에서 0에서 11로 표현되는 월(月)을 반환합니다.
코드를 불러오는 중 입니다 ...자바스크립트의 Date 객체는 월을 0부터 11까지 사이의 숫자로 반환하면서 표기는 1월부터 12월로 하므로 다소 혼란스럽습니다. 월 데이터를 사용할 때는 각별한 주의가 필요합니다.
getDate
getDate 메서드는 Date 객체에서 일(日)을 반환합니다.
코드를 불러오는 중 입니다 ...getDate 메서드가 Date 객체에서 10일을 반환합니다.
getDay
getDay 메서드는 0부터 6으로 표현되는 요일을 반환합니다. 0은 항상 일요일이며, 6은 토요일입니다.
코드를 불러오는 중 입니다 ...getDay 메서드가 2를 반환하고 있습니다. 2는 화요일입니다.
getHours, getMinutes, getSeconds, getMilliseconds
각각 시간, 분, 초, 밀리초를 반환하는 메서드입니다.
코드를 불러오는 중 입니다 ...Date 객체에 시간과 관련해서는 아무런 값도 인수로 전달하지 않았기 때문에 각각의 시간, 분, 초, 밀리초가 반환한 값은 0입니다.
Date 객체의 날짜 요소 수정하기
Date 객체에는 저장된 날짜 요소를 개별적으로 수정할 수 있는 메서드가 있습니다.
예제로 살펴보겠습니다.
setFullYear
setFullYear는 Date 객체의 연도를 수정할 때 사용하는 메서드입니다.
코드를 불러오는 중 입니다 ...연도의 값이 바뀐 것을 알 수 있습니다.
setMonth
setMonth는 Date 객체의 월을 수정할 때 사용하는 메서드입니다.
코드를 불러오는 중 입니다 ...setDate
setDate는 Date 객체의 일을 수정할 때 사용하는 메서드입니다.
코드를 불러오는 중 입니다 ...setHours, setMinutes, setSeconds
각각 시, 분, 초를 수정할 때 사용하는 메서드입니다.
코드를 불러오는 중 입니다 ...시, 분, 초의 값이 변경되었습니다.
Date 객체 출력하기
Date 객체에는 현재 저장된 시간을 다양한 형태의 문자열로 반환하는 메서드가 있습니다. 이 메서드를 이용해 Date 객체에 저장된 시간을 콘솔에 출력하겠습니다.
toString
Date 객체의 toString 메서드는 현재 저장된 시간을 문자열로 반환합니다. 이 메서드를 사용하면 Date 객체를 콘솔에 출력했을 때와 동일한 형태의 문자열을 얻을 수 있습니다. 이것은 자바스크립트 엔진이 Date 객체를 출력할 때, 자동으로 해당 객체의 toString 메서드를 호출하기 때문입니다.
코드를 불러오는 중 입니다 ...toDateString
toDateString은 시간을 제외하고 현재의 날짜만 출력하는 메서드입니다.
코드를 불러오는 중 입니다 ...toLocaleString, toLocaleDateString
toLocaleString과 toLocaleDateString은 ‘현지화’된 날짜와 시간을 반환합니다. ‘현
지화’란 Date 객체에 있는 날짜와 시간을, 현재 우리가 속한 시간대에 맞게 변환한다는 뜻입니다.
코드를 불러오는 중 입니다 ...toLocaleString 메서드는 날짜와 시간 모두 반환하지만, toLocaleDateString은 날
짜만 반환합니다. 한국은 Asia/Seoul 시간대에 속하기 때문에 ‘오후’처럼 현지화 된 반환값을 볼 수 있습니다. 해외에서 이 책을 실습하고 있다면 속한 시간대에 맞게 현지화된 날짜와 시간을 만나게 됩니다.
Date 객체 응용하기
Date 객체는 실무에서 다양하게 이용합니다. 따라서 여러 상황에 맞게 사용할 수 있도록 충분하게 연습해 둘 필요가 있습니다. 지금까지 배운 Date 객체의 사용법과 메서드를 이용해 실무에서 자주 활용하는 몇 가지 기능을 추가로 알아보겠습니다
n 월씩 이동하기
오늘날 캘린더 또는 일정 예약과 관련한 웹 서비스에서는 월 단위로 달력을 이동할 수 있는 기능을 제공합니다. Date 객체를 응용해 날짜를 n 월씩 이동하는 기능을 구현하겠습니다.
코드를 불러오는 중 입니다 ...① 함수 moveMonth에는 Date 객체와 이동할 월(month)인 moveMonth, 두개의 매개변수가 있습니다. ② 매개변수 date에 저장된 Date 객체의 타임 스탬프를 변수 curTimestamp에 저장합니다. ③ 매개변수 date에 저장된 Date 객체에서 월을 구해 변수 curMonth에 저장합니다. ④ 변수 resDate를 만들고 새로운 Date 객체를 생성합니다. Date 객체를 만들면서 ②에서 구한 타 임 스탬프값(curTimestamp)을 인수로 전달합니다. 결과적으로 변수 resDate에는 date 객체와 동일한 타임 스탬프값이 들어 있는 Date 객체가 저장됩니다. ⑤ 변수 resDate에 저장된 Date 객체에서 setMonth 메서드를 호출해 기존 월에 moveMonth만큼 더 한 월을 새로운 월로 저장합니다. 결론적으로 이 함수를 호출하면 moveMonth만큼 월을 앞으로 또는 뒤로 이동시킵니다.
배열에서 이번 달에 해당하는 날짜만 필터링하기
이번에는 여러 개의 Date 객체를 저장하고 있는 배열에서 이번 달에 해당하는 Date 객체만 필터링해 새 배열로 만들겠습니다.
코드를 불러오는 중 입니다 ...① 함수 filterThisMonth에는 인수로 전달된 두 개의 매개변수가 있습니다. dateArray는 코드에 서 작성한 Date 객체 배열이며, pivotDate는 필터링할 월이 있는 Date 객체입니다. ② 이번 달의 가장 빠른 시간은 1일 0시 0분 0초로 설정하여 구합니다. ③ 이번 달의 가장 늦은 시간은 다음 달 0일의 23시 59분 59초(이번 달의 가장 마지막 날을 의미)로 설정해 구합니다. ④ filter 메서드를 이용해 dateArray에서 이번 달에 속하는 요소만 필터링합니다. 서로 다른 Date 객체를 비교할 때는 getTime 메서드로 타임 스탬프를 기준으로 비교합니다. 특정 Date 객체가 더 크다는 것은 이 객체가 더 미래에 있는 시간이라는 뜻입니다.
이번 달에 해당하는 날짜가 있는 Date 객체를 필터링하기 위해서는 다음과 같이 2가지 작업이 필요합니다.
- 이번 달에서 가장 빠른 시간, 가장 늦은 시간 구하기
- 1번에서 구한 시간 내에 포함되는 Date 객체를 필터링하기
출력 결과를 보면 2000년 10월 1일에서 10월 31일 사이에 있는 배열 요소만 출력됩니다.
왜 이달의 가장 늦은 시간이 다음 달 0일 23시 59분 59초인가요?
자바스크립트의 Date 객체에서 date 즉 일을 0으로 설정하면 해당 월 바로 이전 월의 마지막 날을 의미합니다. 즉 2000년 10월 0일은 2000년 9월의 마지막 날입니다.