[JS] Data 객체 활용하기

박시은·2023년 8월 2일

목록 보기

54/58

js 내장 객체 중에서 Data 객체는 날짜와 시간에 대한 정보를 조절할 수 있는 객체이다.

현재 날짜와 시간을 홈페이지에 출력하거나 달력을 표시할 수 있고, 특정까지 얼마나 남았는지 세는 등 여러가지로 응용이 가능하다.

▶ js 객체의 인스턴트 만들기

Data 객체 등 js에 정의된 내장 객체를 사용하려면 js의 Date 객체를 똑같이 만들어서 사용하는데, 이렇게 내장 객체와 똑같은 모양으로 찍어내는 것을 인스턴스라고 한다.

▷ 현재 날짜를 기준으로 인스턴스 만들기

시간을 제어하는 프로그램을 작성하려면 가장 먼저 날짜나 시간 정보를 가지고 있는 Data 객체의 인스턴스를 만들고 변수에 저장해야한다.

기본형 : new Date()

// console
const today = new Date()
console.log(today)

today 변수에는 Date 객체의 인스턴스가 저장되었으므로 이제부터 today 변수는 Date 객체의 프로퍼티와 메서드를 사용할 수 있다.

Date 객체의 오늘 날짜를 확인하는 getDate() 메서드를 사용해보자.

// console
today.getDate()

▷ 특정 날짜를 기준으로 인스턴스 만들기

특정 날짜를 저장한 Date 객체를 만들려면 Date 다음 소괄호에 날짜 정보를 입력하면 딘다.

new Date("2002-05-07") // 2002년 5월 7일
new Date(2002, 5, 7) // 2002년 5월 7일

시간 정보까지 함께 지정하려면 날짜 다음에 대문자 T를 추가한 후 그 뒤에 시간을 입력하면 된다.

new Date("2002-05-07T14:04:15")

▷ js 날짜와 입력방식

날짜와 시간을 지정해 Date 객체를 만들 땐 js가 인식할 수 있는 형식에 맞춰 날짜와 시간 정보를 입력해야 한다.

형식 : YYYY : 연도 / MM : 월 / DD : 일 / HH : 시 / SS : 초

YYYY-MM-DD 형식

new Date("2002-05-07")
new Date("2002-07")
new Date("2002")

YYYY-MM-DDTHH:MM:SS 형식

new Date("2002-05-07T14:04:15")

DD/MM/YYYY

new Date("07-05-2002")

전체형식

new Date("Thu Aug 03 2023 00:24:32 GMT+0900 (한국 표준시)")

▶ Date 객체의 메서드

Date 객체의 인스턴스를 만들었으면 Date 객체의 메서드를 사용해서 날짜/시간 정보를 프로그램에 사용할 수 있다.

Date 객체의 메서드는 get(시간이나 날짜 알아내는 메서드), set(시간과 날짜 원하는대로 설정하는 메서드), to(국제 표준 형식으로 된 날짜 표시를 다른 형식으로 바꿔주는 메서드)로 크게 세 가지로 나눌 수 있다.

▷ 날짜와 시간의 정보를 가져오는 메서드

메서드	설명
getFullYear( )	현재 시간을 기준으로 연도값을 가져온다
getMonth( )	월값을 가져온다. (0~11 (0은 1월, 11은 12월))
getDate( )	일값을 가져온다. (1~31)
getDay( )	요일값을 가져온다. (0~6 (0은 일요일, 6은 토요일))
getTime( )	1970년 1월 1일 00:00 이후의 시간을 밀리초로 표시한다.
getHours( )	시 값을 가져온다. (0~23)
getMinutes( )	분 값을 가져온다. (0~59)
getSeconds( )	초 값을 가져온다. (0~59)
getMilliseconds( )	밀리초 값을 가져온다. (0~999)
setFullYear( )	현지 시간을 기준으로 연도를 설정한다.
setMonth( )	현지 시간을 기준으로 월을 설정한다.
setDate( )	현지 시간을 기준으로 일을 설정한다.
setTime( )	1970년 1월 1일 00:00부터 지난 시간을 밀리초로 표시한다.
setHours( )	현지 시간을 기준으로 시를 설정한다.
setMinutes( )	현지 시간을 기준으로 분을 설정한다.
setSeconds( )	현지 시간을 기준으로 초를 설정한다.
setMilliseconds( )	현지 시간을 기준으로 밀리초를 설정한다.

▷ 날짜와 시간의 형식을 바꾸는 메서드

메서드	설명
toUTCstring( )	"요일 일 월 연도 시:분:초 UTC" 형식으로 표시한다.
toLocaleString( )	"월/일/연도 시:분:초" 형식으로 표시한다.
toString( )	"요일 일 월 연도 시:분:초 UTC+대한민국 표준시" 형식으로 표시한다.
toDateString( )	Date에서 날짜 부분만 표시한다.
toTimeString( )	Date에서 시간 부분만 표시한다.