JavaScript / Date로 현재 날짜·시간과 연월일·요일 구하기

JavaScript의 Date 객체는 한 시점을 나타냅니다. new Date()는 현재 시점을 만들고, getFullYear()·getMonth()·getDate() 등으로 실행 환경의 현지 시간 기준 값을 읽을 수 있습니다. 월은 0부터 시작하므로 화면에 표시할 때 1을 더해야 합니다.

Date 객체 만들기

현재 시점은 new Date()로 만듭니다. 같은 값을 재현하려면 new Date(2024, 7, 19, 14, 5, 9, 42)처럼 연도, 월 인덱스, 일, 시, 분, 초, 밀리초를 전달합니다. 여기서 7은 8월이고, 지정한 구성 요소는 실행 환경의 현지 시간대로 해석됩니다. 인자 없이 호출한 Date()는 객체가 아니라 현재 시점의 문자열을 반환하므로 구분하세요.

const now = new Date();
const sample = new Date(2024, 7, 19, 14, 5, 9, 42);
console.log(now.getTime());    // 실행 순간마다 달라집니다.
console.log(sample.getMonth()); // 7: 8월의 인덱스

날짜 문자열을 임의의 형식으로 파싱하면 환경별로 결과가 달라질 수 있습니다. 구성 요소가 정해져 있으면 위처럼 숫자로 생성하거나, 시간대가 포함된 표준 형식의 문자열을 사용하세요. MDN의 Date 생성자 문서를 참고하세요.

연·월·일과 요일 읽기

getFullYear()는 연도, getMonth()는 0~11의 월 인덱스, getDate()는 1~31의 날짜를 반환합니다. getDay()는 날짜가 아니라 요일 번호이며 일요일 0, 토요일 6입니다. 모두 현지 시간 기준입니다.

const date = new Date(2024, 7, 19);
console.log(date.getFullYear()); // 2024
console.log(date.getMonth() + 1); // 8
console.log(date.getDate()); // 19
console.log(date.getDay()); // 1, 월요일

위처럼 테스트 날짜를 고정하면 결과를 확인하기 쉽습니다. 현재 날짜를 표시할 때는 date 대신 new Date()로 만든 객체를 사용하세요. MDN의 getMonth() 문서에서 0부터 시작하는 월 규칙을 확인할 수 있습니다.

시·분·초와 두 자리 표시

getHours()는 0~23, getMinutes()와 getSeconds()는 0~59, getMilliseconds()는 0~999를 반환합니다. 숫자 5를 05로 보이게 하려면 String(value).padStart(2, "0")을 사용합니다. 밀리초는 세 자리로 채웁니다.

const pad = value => String(value).padStart(2, '0');
const date = new Date(2024, 7, 19, 14, 5, 9, 42);
console.log(`${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`);
// 14:05:09

전체 예제와 시간대 확인

아래 코드를 date-example.html로 저장해 브라우저에서 엽니다. 날짜를 고정했으므로 날짜·요일·시각은 2024-08-19, 월요일, 14:05:09.042로 출력됩니다. 타임스탬프는 시간대에 따라 달라집니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Date 객체 살펴보기</title>
</head>
<body>
<h1>Date 객체 살펴보기</h1>
<p>날짜: <output id="calendar"></output></p>
<p>요일: <output id="weekday"></output></p>
<p>시간: <output id="clock"></output></p>
<p>타임스탬프: <output id="timestamp"></output></p>
<script>
const date = new Date(2024, 7, 19, 14, 5, 9, 42);
const pad = value => String(value).padStart(2, '0');
const weekdays = ['일', '월', '화', '수', '목', '금', '토'];

const calendar = `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
const clock = `${pad(date.getHours())}:${pad(date.getMinutes())}:${pad(date.getSeconds())}`;
document.querySelector('#calendar').textContent = calendar;
document.querySelector('#weekday').textContent = `${weekdays[date.getDay()]}요일`;
document.querySelector('#clock').textContent = `${clock}.${String(date.getMilliseconds()).padStart(3, '0')}`;
document.querySelector('#timestamp').textContent = String(date.getTime());
</script>
</body>
</html>

getTime()은 1970년 1월 1일 00:00 UTC부터의 밀리초를 반환합니다. 같은 달력 날짜·시각을 현지 시간으로 생성해도 시간대가 다르면 이 값이 달라집니다. 반대로 toISOString()은 UTC로 표시하므로, 그 문자열의 앞 10글자를 무조건 현지 날짜로 사용하면 자정 근처에서 날짜가 달라질 수 있습니다. UTC가 필요하면 getUTCFullYear() 같은 UTC 메서드를 일관되게 사용하세요. MDN의 toISOString() 문서에 UTC 표시 규칙이 나옵니다.