JavaScript - Date Object: Mastering Time in Your Code

안녕하세요, 야심 찬 프로그래머 여러분! 오늘 우리는 JavaScript에서 날짜의 fascinaiting 세상으로 뛰어들어 보겠습니다. 여러분의 친절한 이웃 컴퓨터 과학 교사로서 저는 Date 객체의 ins and outs를 안내해 드리겠습니다. 믿으세요, 이 수업이 끝나면 여러분은 경험 많은 사 cirque 공연자처럼 날짜를 다루게 될 것입니다!

Date Object는 무엇인가요?

자, 구체적인 내용으로 넘어가기 전에 Date 객체에 대해 이해해 보겠습니다. JavaScript에서 Date 객체는 날짜와 시간을 다루는 데 사용되는 가장 중요한 도구입니다. 코드 안에 super-smart 시계를 갖는 것과 같은 거죠!

이렇게 생각해 보세요: 프로그램이 현재 시간을 알아야 하거나, 이벤트를 예약하거나, 무언가가 얼마나 오래 걸렸는지 계산해야 한다면, Date 객체는 여러분의 최고의 친구입니다. 이렇게 다재다능해서, 1776년 7월 4일이 무슨 요일이었는지도 알려줄 수 있습니다! (그날은 목요일이었어요.)

문법: Date 객체 생성

기본적인 내용부터 시작해 보겠습니다. Date 객체를 어떻게 생성할까요? 생각보다 간단합니다!

// 현재 날짜와 시간으로 새로운 Date 객체 생성
let currentDate = new Date();
console.log(currentDate);
// 출력: 예를 들어 "Fri May 14 2023 15:30:45 GMT+0000 (Coordinated Universal Time)"

// 특정 날짜와 시간으로 Date 객체 생성
let specificDate = new Date("2023-05-14T15:30:45");
console.log(specificDate);
// 출력: "Sun May 14 2023 15:30:45 GMT+0000 (Coordinated Universal Time)"

// 개별 구성 요소를 사용하여 Date 객체 생성
let customDate = new Date(2023, 4, 14, 15, 30, 45);
console.log(customDate);
// 출력: "Sun May 14 2023 15:30:45 GMT+0000 (Coordinated Universal Time)"

이 예제들에서 우리는 Date 객체를 다양한 방법으로 생성하고 있습니다. 첫 번째는 현재 날짜와 시간을 주고, 두 번째는 문자열로 날짜를 만들고, 세 번째는 날짜의 각 부분을 별도로 지정합니다.

기억하세요, JavaScript의 월은 zero-indexed입니다. 즉, 1월은 0, 2월은 1, 그리고 이런 식입니다. 프로그래머들 사이의 내부 유머 같아요!

Date 프로퍼티

믿을 수 없을 만큼, Date 객체는 공개된 프로퍼티가 없습니다. 마치 친구가 정보를 공유하기 위해 요청할 때만 정보를 공유하는 것처럼, 메서드를 사용하여 정보를 얻어야 합니다. 하지만 걱정하지 마세요, 곧 메서드에 대해 이야기하겠습니다!

Date 메서드: 정보 추출

이제 Date 객체에서 정보를 추출하는 데 도움이 되는 메서드를 살펴보겠습니다. 이 메서드들은 마치 시간 여행자처럼, 특정 정보를 우리에게 가져다줍니다.

let myDate = new Date("2023-05-14T15:30:45");

console.log(myDate.getFullYear()); // 출력: 2023
console.log(myDate.getMonth()); // 출력: 4 (5월은 5번째 월이지만 인덱스는 4입니다)
console.log(myDate.getDate()); // 출력: 14
console.log(myDate.getDay()); // 출력: 0 (0은 일요일, 1은 월요일 등)
console.log(myDate.getHours()); // 출력: 15
console.log(myDate.getMinutes()); // 출력: 30
console.log(myDate.getSeconds()); // 출력: 45

이 각 메서드는 날짜의 특정 부분을 추출합니다. 마치 친구에게 "이 år은 무엇이냐?" 또는 "오늘은 무슨 요일이냐?"고 물어보고 정확한 답을 얻는 것과 같습니다.

Date 메서드: 정보 설정

정보를 얻는 것과 마찬가지로, 정보를 설정할 수도 있습니다. 이 메서드들은 우리가 Date 객체를 수정할 수 있게 해줍니다.

let myDate = new Date("2023-05-14T15:30:45");

myDate.setFullYear(2024);
console.log(myDate); // 출력: Tue May 14 2024 15:30:45 GMT+0000 (Coordinated Universal Time)

myDate.setMonth(11); // 12월
console.log(myDate); // 출력: Sat Dec 14 2024 15:30:45 GMT+0000 (Coordinated Universal Time)

myDate.setDate(25);
console.log(myDate); // 출력: Wed Dec 25 2024 15:30:45 GMT+0000 (Coordinated Universal Time)

이 메서드들은 마치 시간 기계처럼, 우리가 다른 연도, 월, 또는 날짜로 이동할 수 있게 해줍니다.

Date 정적 메서드

정적 메서드는 Date 객체 자체에 속하는 메서드로, 개별 Date 인스턴스에 속하지 않습니다. 마치 Date 족의 지혜로운 노인처럼, 모든 이에게 귀중한 서비스를 제공합니다.

console.log(Date.now()); // 출력: 현재 타임스탬프(밀리초)
console.log(Date.parse("2023-05-14")); // 출력: 2023년 5월 14일의 타임스탬프

Date.now()는 현재 타임스탬프를 주고, Date.parse()는 날짜 문자열을 타임스탬프로 변환합니다. 이들은 계산과 비교에 매우 유용합니다.

모든 것을 통합한 예제

이제 Date 객체의 다양한 측면을 배운 만큼, 실제 상황에서 어떻게 사용할 수 있는지 보겠습니다.

예제 1: 나이 계산기

function calculateAge(birthDate) {
let today = new Date();
let birthDateObj = new Date(birthDate);
let age = today.getFullYear() - birthDateObj.getFullYear();
let monthDiff = today.getMonth() - birthDateObj.getMonth();

if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDateObj.getDate())) {
age--;
}

return age;
}

console.log(calculateAge("1990-05-14")); // 출력은 현재 날짜에 따라 달라집니다

이 함수는 사람의 생일을 기반으로 나이를 계산합니다. 월과 일을 고려하여 정확성을 유지합니다.

예제 2: 다운타임 타이머

function countdown(targetDate) {
let now = new Date().getTime();
let target = new Date(targetDate).getTime();
let difference = target - now;

let days = Math.floor(difference / (1000 * 60 * 60 * 24));
let hours = Math.floor((difference % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
let minutes = Math.floor((difference % (1000 * 60 * 60)) / (1000 * 60));
let seconds = Math.floor((difference % (1000 * 60)) / 1000);

console.log(`${days} 일, ${hours} 시간, ${minutes} 분, ${seconds} 초`);
}

countdown("2023-12-31"); // 새해 전야로의 다운타임

이 함수는 특정 날짜까지의 남은 시간을 계산하여 일, 시간, 분, 초로 출력합니다.

Date 메서드 표

여기서 몇 가지 흔히 사용되는 Date 메서드 표를 제공합니다:

메서드	설명
getFullYear()	연도(4자리) 가져오기
getMonth()	월(0-11) 가져오기
getDate()	월의 날짜(1-31) 가져오기
getDay()	주의 요일(0-6) 가져오기
getHours()	시간(0-23) 가져오기
getMinutes()	분(0-59) 가져오기
getSeconds()	초(0-59) 가져오기
setFullYear()	연도 설정
setMonth()	월 설정
setDate()	월의 날짜 설정
setHours()	시간 설정
setMinutes()	분 설정
setSeconds()	초 설정
toDateString()	날짜를 읽기 쉬운 문자열로 변환
toTimeString()	시간을 읽기 쉬운 문자열로 변환

이제 여러분은 JavaScript에서 날짜를 다루는 첫 걸음을 냈어요. 연습이 완벽을 만드는 것을 기억하며, 이 메서드들을 실험하고 자신만의 날짜 기반 프로젝트를 만들어 보세요. 누가 다음 큰 캘린더 앱을 만들까요!

이제 마무리하며, 날짜와 시간을 다루는 것은 종종 시간대와夏令시간으로 인해 어려울 수 있지만, 오늘 배운 지식으로 이러한 도전에 대비할 수 있습니다. 계속 코딩하고, 계속 배우고, 가장 중요한 것은 즐겁게 코드를 작성하세요!

Credits: Image by storyset