JavaScript - Date

치맨·2023년 1월 11일

JavaScript

javascript

목록 보기

5/25

Date란

날짜와 시간(연, 월, 일, 시, 분, 초, 밀리초)을 위한 메서드를 제공하는 빌트인 객체이면서 생성자 함수 입니다.
Date 객체를 통해 날짜, 시간 등을 얻을 수 있습니다.
모든 날짜와 시간은 1970년 1월 1일 0시를 기점으로 현재시간 또는 직접 지정한 시간까지 경과한 값을 반환합니다.
이때 기준은 UTC(또는 GMT)이며, 한국시간은 UTC보다 9시간 빠릅니다.
한국시간은 UTC에 9시간을 더한 시간입니다.
즉 시간, 날짜 등을 필요로 할때 Date를 통해 구할 수 있습니다.

객체의 중심을 구성하는 시간 값은 UTC 기준이지만, 날짜와 시간 등 구성 요소를 가져오는 메서드는 모두 현지(호스트 시스템의 위치)의 시간대를 사용한다는 것을 기억해야 합니다.
Javascript MDN

Date 메소드

Date 메소드는 연,월,일,시,분,초,밀리초 등 시간,날짜의 모든것을 가져올 수 있는 메소드입니다.
지극히 주관적으로 제 기준 헷갈렸던것 or 몰랐던것 몇개를 예시를 들어보겠습니다. 더 많은 메소드가 궁금하시다면 Javascript MDN ← 참고

많은 기본이 되는 초, 분, 일, 년 계산 값을 먼저 알아보겠습니다.


1s = 1,000ms
1m = 60s * 1,000ms  => 60,000ms
1h = 60m * 60s * 1,000ms => 3,600,000ms
1d = 24h * 60m * 60s * 1,000ms => 86,400,000ms

new Date()를 호출 하면 Date객체를 생성하지만, new 연산자 없이 Date()를 호출 한다면 날짜와 시간 정보를 나타내는 문자열을 반환합니다.


console.log(typeof new Date(), new Date()); // type = object,   2023-01-11T10:29:34.900Z
console.log(typeof Date(), Date()); // type = string ,          Wed Jan 11 2023 19:29:34 GMT+0900 (Korean Standard Time)

특정 날짜 지정


console.log(new Date('2023/1/3/19:00:00:00')); // 2023-01-03T10:00:00.000Z // 한국시간이 9시간 빠르기 때문에 10:00로 나타난다.

현재 시간정보 가져오기

console.log(new Date()); //  2023-01-11T10:41:59.708Z  메소드를 사용한 것이 아니기 때문에 UTC기준으로 나타나며 한국시간은 여기서 9시간을 더한 19:41분이 된다.

Date를 활용한 시계 구현

const clock = document.querySelector('#clock'); // HTML의 00:00:00을 가져온다. 

function handleClock() {
  const today = new Date(); //현재 시간, 날짜를 가진 객체를 생성한다.

  const hour = String(today.getHours()).padStart(2, '0'); // 시간을 가져오고, padStart를 통해 1자리 일 경우 0을 추가해준다. Ex) 02시 
  const minute = String(today.getMinutes()).padStart(2, '0'); // 분 을 가져오고, padStart를 통해 1자리 일 경우 0을 추가 Ex) 08분
  const seconds = String(today.getSeconds()).padStart(2, '0');// 초를 가져오고, padStart를 통해 1자리 일 경우 0을 추가 Ex) 08초

  // 삼항 연산자를 통해 12시가 넘을 경우 12를 빼주고 PM, 12시가 안넘을 경우 그냥 시간에 AM 추가
  hour > 12
    ? (clock.innerText = `${hour - 12}:${minute}:${seconds} PM`)
    : (clock.innerHTML = `${hour} : ${minute} : ${seconds} AM`);
}

// clock함수를 즉시실행 먼저 해주고, setInterval을 통해 1000ms 즉 1초마다 실행 시켜준다.
handleClock();
setInterval(handleClock, 1000);

setInterval과 비슷한 setTimeout이 있다. 무슨 차이일까?
- setInterval은 주기적으로 지정한 시간을 무한 반복한다.
- setInterval은 실행중 다른 setInterval로 인해 함수가 호출되면 기존에 실행되던 함수는 종료된다.
- setTimeout은 지정한 시간뒤에 한번 실행 시킨다.
- setTimeout은 실행중 다른 setTimeout로 인해 함수가 호출되도 기존에 실행된 함수에 영향을 주지 않는다.