날짜와 시간(Date)
프론트앤드 개발을 할 때, 날짜와 시간을 다루는 경우가 많다
회원가입을 한 날짜와 시간
글을 작성한 시간
휴대푠의 현재 시간 등
날짜와 시간을 저장하고 보여줄 때는 날짜 객체를 사용한다
참고자료 : Date MDN
new Date()
new Date()은 날짜 객체를 생성한다
new 연산자 다음에 Date 생성자를 사용한다
let rightNow = new Date();
console.log(rightNow);
// 결과 : 2020-05-28T01:16:27.916Z위의 코드와 같이 현재 연도, 날짜, 시간 등이 반환되어 나온다
위 결과값은 브라우저마다 표기하는 법이 다르므로 어떻게 표현되었는지는 크게 중요하지 않다
new Date()로 반환된 표현이 읽을 수 있는 표현이긴 하지만 그대로 사용하지는 않고,
new Date() 객체를 통해 얻은 데이터를 가공해서 사용한다
일반적으로 보여지는 표현은 아래와 같다
다른 표현들은 다 알겠지만 여기서 모르는 것이 있는데,
GMT란 Greenwich Mean Time의 줄임말이며,
컴퓨터 언어에서는 GMT 기준으로 시간을 알려준다
위의 사진은 GMT 기준으로 6시간 빠르다는 것이고, 한국은 아래와 같이 표시된다
GMT+0900 (한국 표준시)
그래서 new Date() 을 통해 현재 시간을 가져온 후,
디자이너가 요구하는 날짜 포맷으로 웹사이트에 보여줘야 한다
Date 객체를 통해 함수로 날짜, 시간 값 가져오기
new Date()로 Date 객체 생성후
함수를 통해 각 날짜, 시간의 값을 가져올 수 있다
코드
let rightNow = new Date();
let year = rightNow.getFullYear();
let month = rightNow.getMonth() + 1;
let date = rightNow.getDate();
let day = rightNow.getDay();
let currentHour = rightNow.getHours();
let currentMin = rightNow.getMinutes();
let time = rightNow.getTime();
console.log(rightNow);
console.log(year);
console.log(month);
console.log(date);
console.log(day);
console.log(currentHour);
console.log(currentMin);
console.log(time);결과
2020-05-28T01:16:27.916Z
2020
5
28
4
10
16
1590628587916getFullYear()
Date객체.getFullYear()을 사용하면
Date 객체를 통해 생성된 현재 날짜에서, 연도에 해당하는 숫자를 반환한다
(0부터 시작)
현지 시간에 따라, 주어진 날짜의 연도에 해당하는 숫자를 반환한다
코드
let rightNow = new Date();
let year = rightNow.getFullYear();
let month = rightNow.getMonth() + 1;
let date = rightNow.getDate();
let day = rightNow.getDay();
let currentHour = rightNow.getHours();
let currentMin = rightNow.getMinutes();
let currentSec = rightNow.getSeconds();
let time = rightNow.getTime();
console.log(rightNow);
console.log(year);
console.log(month);
console.log(date);
console.log(day);
console.log(currentHour);
console.log(currentMin);
console.log(currentSec);
console.log(time);결과
2020-05-28T02:10:22.946Z
2020
5
28
4
11
10
22
1590631822946getMonth()
Date객체.getMonth()을 사용하면
Date 객체를 통해 생성된 현재 날짜에서, 월에 해당하는 숫자를 반환한다
그런데 0부터 시작하므로 +1을 꼭 더해주어야 한다
현지 시간 기준 월을 나타내는 0 ~ 11 사이의 정수이다
(0은 1월, 1은 2월... 그래서 이 메서드를 사용해서 월을 반환시키려면 +1을 해줘야한다)
getDate();
Date객체.getDate()을 사용하면
Date 객체를 통해 생성된 현재 날짜에서, 일에 해당하는 숫자를 반환한다
현지 시간에 따라, 주어진 날짜의 일에 해당하는 1 이상 31 이하의 정수를 반환한다
getDay();
Date객체.getDay()을 사용하면
Date 객체를 통해 생성된 현재 날짜에서, 요일을 숫자로 변환하여 반환한다
(0 은 일요일, 1은 월요일 ... 5는 금요일)
getHours();
Date객체.getHours()을 사용하면
Date 객체를 통해 생성된 현재 날짜에서, 시간에 해당하는 숫자를 반환한다
0시 ~ 23시
주어진 날짜의 현지 시간 기준의 시를 나타내는 0에서 12사이의 정수이다
getMinutes();
Date객체.getMinutes()을 사용하면
Date 객체를 통해 생성된 현재 날짜에서, 분에 해당하는 숫자를 반환한다
0분 ~ 59분
주어진 날짜의 현지 시간 기준의 분을 나타내는 0에서 59사이의 정수이다
getSeconds();
Date객체.getSeconds()을 사용하면
Date 객체를 통해 생성된 현재 날짜에서, 초에 해당하는 숫자를 반환한다
0초 ~ 59초
주어진 날짜의 현지 시간 기준의 초를 나타내는 0에서 59사이의 정수이다
getTime();
Date객체.getTime()을 사용하면
1970-01-01 00:00:00 UTC로 부터,
Date 객체를 통해 생성된 현재 날짜의 지금의 시간을 밀리초로 표현한 것을 반환한다
기준이 되는 일자는 1970년 1월 1일 00:00:00 UTC 으로부터
주어진 날짜 사이의 경과 시간을 밀리초로 나타내는 숫자이다
getTime 함수로 반환된 숫자를 비교연산을 통해 언제가 더 과거인지 판단할 수 있다
특정 날짜의 Date
특정 날짜를 매개변수로 넘겨주면, 해당 날짜의 Date 객체를 생성할 수 있다
숫자로 입력할때 (연, 월-1, 일, 시, 분, 초, 밀리초 순서로 입력해야 Date 객체 생성 가능)
코드
let date1 = new Date('December 17, 2019 03:24:00');
let date2 = new Date('2019-12-17T03:24:00');
// 월 +1된값 출력
// 원하는 월 출력할려면 -1값 넣기
let date3 = new Date(2019, 5, 1);
let date4 = new Date('2019-03-23');
console.log(date1);
console.log(date2);
console.log(date3);
console.log(date4);결과
2019-12-17T03:24:00.000Z
2019-12-17T03:24:00.000Z
2019-06-01T00:00:00.000Z
2019-03-23T00:00:00.000Z예제
만나이 계산하는 함수
function getWesternAge(birthday) {
let today = new Date();
if((today.getMonth() + 1) >= (birthday.getMonth() + 1) && (today.getDate() >= birthday.getDate())) {
return today.getYear() - birthday.getYear();
} else {
return today.getYear() - birthday.getYear() - 1;
}
}
console.log(getWesternAge(new Date('1992-06-08')))결과
27getMonth는 현재 월보다 -1한 숫자를 출력하므로 정확하게 할라면 +1 해주기
