일전에 쇼핑몰에 타이머 기능 구현이 필요하여 코드 찾는데만 며칠 걸렸던 기억이 있다. 근데 최근에 자바스크립트를 배우면서 알게 된 점은 자바스크립트로 현재 날짜와 시간을 구하는 방법은 생각보다 간단했다. 그럼 어떻게 구하는지 알아보자.
현재시간과 현재 날짜 구하기
현재시간과 현재시간을 구하려면 자바스크립트의 Date 객체를 사용하면 쉽게 구할 수 있다.
Date 객체의 시간 값은 UTC기준지만, 날짜와 시간등 구성요소를 가져오는 메서드는 모두 현지(로스트 시스템의 위치)의 시간대를 사용한다.
const date = new Date(); // 현재날짜와 시간
console.log(date); // output : Tue Feb 22 2022 23:20:01 GMT+0900 (한국 표준시)
new Date()를 호출하면 새로운 Date 객체를 만들어진다. 여기서 인수 없이 호출하면 현재날짜와 현재시간을 출력하게 된다. 만약 ()안에 인수를 추가한다면 결괏값이 달라질 수 있다.
만약 날짜와 시간들을 따로 구하고 싶다면 Date 객체의 메서드를 사용하면 구할 수 있다.
getDate() : 일(1~31)을 반환
getMonth() : 월(0~11)을 반환
getDay() : 요일 (0~6)을 반환 ( 월[0]~일 [6] )
getFullYear() : 연도(4자리수)를 반환
getHours() : 시 (0~23)을 반환
getMilliseconds() : 밀리초(0~999)를 반환
getMinutes() : 분 (0~59)을 반환
getSeconds() : 초 (0~59)를 반환
실시간 타이머 기능 구현
위 메서드들을 활용하면 아래와 같이 시간과 날짜를 구할 수 있다.
See the Pen Untitled by Brian (@sshft) on CodePen.
위 코드에서 실시간으로 타이머를 구현하기 위해 setInterval 함수를 사용했다.
그리고 요일은 숫자로 불러와져서 배열을 사용하여 구현했고, 월은 0~11로 표현되어 +1을 해주었다.
이상 끝!
참고사이트
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Date
https://developer.mozilla.org/en-US/docs/Web/API/setInterval
