TypeScript - Date Object: A Beginner's Guide

안녕하세요, 미래의 코딩 슈퍼스타 여러분! 오늘 우리는 TypeScript의 날짜 세계로 흥미로운 여정을 떠납니다. 코드를 한 줄도 작성해 본 적이 없더라도 걱정하지 마세요 - 저는 여러분의 친절한 안내자가 되어, 단계별로 함께 나아갈 것입니다. 이 튜토리얼의 끝을 맺을 때, 여러분은 프로처럼 날짜를 조작할 수 있을 것입니다!

Date Object는 무엇인가요?

구체적인 내용에 들어가기 전에, Date object가到底是什么인지 이야기해 보겠습니다. TypeScript(그리고 JavaScript)에서 Date object는 특정 순간을 나타냅니다. 이는 특정 날짜와 시간의 스냅샷처럼 생각할 수 있으며, 이를 통해 우리는 프로그램에서 조작하고 사용할 수 있습니다.

이를 과거, 현재, 미래 중 어느 시간으로 설정할 수 있는 디지털 시계라고 생각해 보세요. 멋진 것 아닙니까?

문법: Date Object 생성

이제 TypeScript에서 Date object를 어떻게 생성하는지 살펴보겠습니다. 여러 가지 방법이 있으며, 저는 각각의 방법을 예제와 함께 설명해 드리겠습니다.

1. 현재 날짜와 시간

현재 날짜와 시간으로 Date object를 생성하려면, new Date() 생성자를 인수 없이 사용합니다.

let currentDate = new Date();
console.log(currentDate);

이 코드를 실행하면 다음과 같은 출력을 볼 수 있습니다:

2023-06-15T12:30:45.678Z

이는 표준 형식으로 현재 날짜와 시간을 보여주는 것입니다.

2. 특정 날짜와 시간

특정 날짜와 시간으로 Date object를 생성할 수도 있습니다. 다음과 같은 여러 가지 방법이 있습니다:

a. 날짜 문자열 사용

let christmas = new Date("December 25, 2023 00:00:00");
console.log(christmas);

이는 다음과 같은 출력을 생성합니다:

2023-12-25T00:00:00.000Z

b. 별도의 파라미터 사용

let newYear = new Date(2024, 0, 1, 0, 0, 0);
console.log(newYear);

이는 다음과 같은 출력을 생성합니다:

2024-01-01T00:00:00.000Z

주의할 점은 월이 0에서 시작한다는 점입니다. JavaScript와 TypeScript에서 월은 0번부터 시작하므로, 1월은 0, 2월은 1 등입니다. 이는 많은 초보자들이 헷갈리는 점이므로 기억하세요!

c. 에포크 이후 밀리초 사용

에포크(1970년 1월 1일) 이후의 밀리초 수를 지정하여 날짜를 생성할 수도 있습니다:

let someDate = new Date(1687012345678);
console.log(someDate);

이는 해당 밀리초 수에 해당하는 날짜와 시간을 출력합니다.

Date Object 사용

이제 Date object를 생성하는 방법을 알고 있으므로, 그것으로 할 수 있는 일들을 살펴보겠습니다.

날짜 구성 요소 얻기

Date object는 날짜의 다양한 구성 요소를 얻는 메서드를 제공합니다:

let today = new Date();

console.log("Full Year:", today.getFullYear());
console.log("Month:", today.getMonth());
console.log("Date:", today.getDate());
console.log("Day:", today.getDay());
console.log("Hours:", today.getHours());
console.log("Minutes:", today.getMinutes());
console.log("Seconds:", today.getSeconds());

이는 다음과 같은 출력을 생성할 수 있습니다:

Full Year: 2023
Month: 5
Date: 15
Day: 4
Hours: 12
Minutes: 45
Seconds: 30

getMonth()은 0번부터 시작하므로, 5는 6월을 의미합니다!

날짜 구성 요소 설정

날짜의 구성 요소를 얻는 것과 마찬가지로, 그것을 설정할 수도 있습니다:

let futureDate = new Date();

futureDate.setFullYear(2025);
futureDate.setMonth(11);  // 12월
futureDate.setDate(31);
futureDate.setHours(23);
futureDate.setMinutes(59);
futureDate.setSeconds(59);

console.log(futureDate);

이는 2025년 12월 31일 23:59:59로 날짜를 설정합니다.

날짜 포맷ting

TypeScript(그리고 JavaScript)는 날짜를 포맷하는 몇 가지 내장 메서드를 제공합니다:

let event = new Date("July 4, 2023 12:00:00");

console.log(event.toDateString());
console.log(event.toTimeString());
console.log(event.toLocaleDateString());
console.log(event.toLocaleTimeString());
console.log(event.toISOString());

이는 다음과 같은 출력을 생성합니다:

Tue Jul 04 2023
12:00:00 GMT+0000 (Coordinated Universal Time)
7/4/2023
12:00:00 PM
2023-07-04T12:00:00.000Z

날짜 연산

Date object의 가장 흥미로운 기능 중 하나는 그것으로 수학을 할 수 있다는 점입니다! 몇 가지 예제를 살펴보겠습니다:

날짜 추가

let today = new Date();
let nextWeek = new Date(today.getTime() + 7 * 24 * 60 * 60 * 1000);

console.log("Today:", today);
console.log("Next week:", nextWeek);

이는 현재 날짜에 7일을 더합니다. 7(일)을 24(시간)에 60(분)에 60(초)에 1000(밀리초)로 곱하여 일주일의 밀리초 수를 얻습니다.

날짜에서 뺄셈

두 날짜 사이의 차이를 구할 수도 있습니다:

let start = new Date("March 1, 2023");
let end = new Date("June 15, 2023");

let difference = end.getTime() - start.getTime();
let days = Math.floor(difference / (24 * 60 * 60 * 1000));

console.log(`There are ${days} days between ${start.toDateString()} and ${end.toDateString()}`);

이는 2023년 3월 1일과 6월 15일 사이의 일수를 계산합니다.

결론

축하합니다! TypeScript의 Date object 세계로 첫 걸음을 뗐습니다. 우리는 날짜 생성, 날짜 구성 요소 가져오기와 설정, 날짜 포맷ting, 그리고 날짜 연산에 대해 다루었습니다.

날짜를 다루는 것은 종종 다양한 시간대나夏令시와 같은 복잡한 문제를 포함할 수 있지만, 연습을 통해 더 익숙해질 것입니다.

이 튜토리얼에서 다루었던 주요 메서드를 요약한 표를 아래에 제공합니다:

메서드	설명
new Date()	새로운 Date object 생성
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()	시간 부분을 인간이 읽을 수 있는 문자열로 반환
toLocaleDateString()	날짜 부분을 로캐 관례로 반환
toLocaleTimeString()	시간 부분을 로캐 관례로 반환
toISOString()	ISO 형식의 날짜 반환

계속 연습하고, 계속 코딩하고, 가장 중요한 것은 즐기세요! 프로그래밍의 세계는 흥미로운 가능성으로 가득 차 있으며, 날짜를 마스터하는 것은 시작에 불과합니다. 행복하게 코딩하세요!

Credits: Image by storyset