언어/Typescript, Javascript

[TypeScript] Date 사용방법 총 정리(응용까지)

실제 개발을 하다보면 날짜 관련 처리를 해주어야 할때가 많이 발생합니다.
관련해서 내장된 객체인 Date 객체를 주로 사용합니다.
현재 이를 대체하기 위한 Temporal 이 작업되고 있다고는 하지만 Production 환경에서 사용하기에는 어렵다고 합니다.
그러면 실제 많이 사용할 만한 내용들 위주로 빠르게 정리해보겠습니다!!

Date 객체란?

간단히 설명하자면 Date 객체는 19070년 1월 1일 UTC 자정과의 시간차이를 밀리초로 나타내는 정수 값을 담고 있습니다

Date 객체 생성

아래와 같이 여러 방법으로 Date 객체를 생성하고
객체의 메소드를 이용해 날짜 정보를 관리할 수 있습니다

const date1: Date = new Date(1919, 2, 1)  // 1919-03-01 00:00:00
const date2: Date = new Date(1919, 2, 1, 19, 24, 51); // 1919-03-01 19:24:51
const date3: Date = new Date('1919-03-01 19:24:51')

현재 시간 반환 (get)

// Thu Jan 05 2023 23:10:06 GMT+0900 (대한민국 표준시)
console.log(Date());

const today = new Date();
// Thu Jan 05 2023 23:10:06 GMT+0900 (대한민국 표준시)
console.log(today.toString());

위 처럼 함수를 호출하여 현재 날짜를 반환할 수도 있고
객체를 생성하여 반환할 수도 있으며
위 두 방법으로 모두 현재 날짜를 얻을 수 있습니다

Date의 인스턴스 메소드

오늘 날짜만 딱 출력해서는 쓸 곳이 없습니다
로깅 모듈을 만들 때 날짜 정보가 필요할텐데
그러면 년도, 월, 일 등의 정보를 얻어서 문자열을 구성할 필요가 있습니다

년, 월, 일

const today: Date = new Date();
const year: number = today.getFullYear();
const month: number = today.getMonth() + 1;
const date: number = today.getDate();
console.log(`${year}-${month}-${date}`)

코드를 보면 month만 1을 더해주었습니다
getMonth() 함수가 0-11의 값을 반환하기 때문입니다. 이는 좀 주의해서 써야 합니다.
여기서 get 뒤에 UTC를 붙이면 현지 시간이 아닌 국제시간을 기준으로 시간을 반환하여 사용할 수 있습니다

응용: 00-31 두자리 날짜형식 표시, 0 넣기 (javascript, typescript)

위 코드를 실행해보면 뭔가 예쁘게 나오지 않습니다.
2023-1-5 이런식으로 나오기 때문입니다.
그래서 이를 예쁘게 두자리로 맞춰보겠습니다

function getFullDate(delimiter: string, year: number, month: number, date: number): string {
    return  `${year}${delimiter}${month.toString().padStart(2, '0')}${delimiter}${date.toString().padStart(2, '0')}`
}

// 2023-01-05
console.log(getFullDate("-", year, month, date));

padStart 라는 메소드를 이용해서 두자리 날짜형식으로 맞추대 빈 부분은 0으로 채워넣도록 하였습니다 :)

요일

요일 정보를 얻어서 사용해야할 때도 있습니다.

enum DAY {
    SUNDAY,
    MONDAY,
    TUESDAY,
    WEDNESDAY,
    THURSDAY,
    FRIDAY,
    SATURDAY
};

const day: number = today.getDay();
if (day === DAY.SUNDAY || day === DAY.SATURDAY)  {
    console.log("쉬는 날");
} else {
    console.log("출근 하는 날 ㅠㅠ")
}

getDay() 함수를 이용해서 요일을 반환 후(0-6 반환하며 0이 일요일)
위와 같은 방식으로 enum을 정의해서 사용할 수 있습니다

날짜 정보 변경 (set)

get이 아닌 set이 붙은 메소드를 이용해서 날짜를 조작할 수 있습니다

년, 월, 일, 시, 분, 초 변경

today.setFullYear(1919); // 1919년으로 변경
today.setMonth(2);    // 3월로 변경
today.setDate(29);    // 29일로 변경
today.setHours(19);    // 19시로 변경
today.setMinute(13); // 13분으로 변경
today.setSeconds(1);    // 1초로 변경

이전 날짜 구하기(javascript, typescript)

위에서 알아본 setDate 함수를 이용해서 이전 날짜를 구할 수 있습니다
이전 달이나 다음 달로 넘어간 경우 (4월 1일의 이틀 전은 3월 30일)
일수를 자동으로 계산해주기 때문에 편하게 사용할 수 있습니다

const today: Date = new Date(2023, 3, 1);
today.setDate(today.getDate() - 2);

// twoDaysago: Thu Mar 30 2023 00:00:00 GMT+0900 (대한민국 표준시)
console.log(`twoDaysago: ${today.toString()}`);

위 처럼 getDate로 날짜를 얻어와서 +, -를 통해 이후, 이전 날짜를 얻을 수 있습니다
짱이죠!??

월의 마지막 날짜 구하기 (javascript, typescript)

위 방식대로 한다면 월의 마지막날을 몰라도 알아서 게산해줘서 알 필요가 없을 수도 있지만
사람일이라는게 언제 또 월의 마지막날이 필요할지 모르잖아요!??
해당 정보도 setDate함수를 통해서 알아볼 수 있습니다

const date1: Date = new Date(2023, 3, 1);
date1.setDate(0);    // 전 달의 마지막 일
console.log(date1.toString());    // Fri Mar 31 2023 00:00:00 GMT+0900 (대한민국 표준시)

const date2: Date = new Date(2023, 3, 1);
date2.setDate(-1);    // 마지막일 에서 하루 전
console.log(date2.toString());    // Thu Mar 30 2023 00:00:00 GMT+0900 (대한민국 표준시)

월에 0일은 없으므로 전 달로 넘어가면서 전 달의 마지막 일이 몇일인지 알 수 있습니다
반복해서 0으로 set 해주면 모든 달의 마지막 일을 알 수 있겠죠??

이 정도면 어느정도 자주 사용하는 것들은 정리가 된 것 같다.
enum을 제외하고는 javascript에서 똑같이 사용 가능합니다.

참고

MDN -Date

Contents

새소식

인기 검색어