▶ JavaScript Tutorial

JavaScript Date Formats

JavaScript Date Formats: 날짜 형식의 이해와 활용

JavaScript에서 **날짜 형식(Date Formats)**을 다루는 것은 다양한 작업에서 매우 중요합니다. 사용자의 지역에 따라 날짜 형식을 다르게 표현하거나, 서버와의 데이터 교환을 위해 표준화된 형식으로 날짜를 처리해야 하는 경우가 많습니다. JavaScript에서는 날짜를 다양한 형식으로 변환하고 표시할 수 있는 여러 방법을 제공합니다.

이 가이드는 JavaScript에서 날짜를 다양한 형식으로 변환하고 사용하는 방법을 설명합니다.

1. 기본 날짜 형식

JavaScript에서 날짜는 Date 객체를 사용해 다룹니다. 기본적으로 Date 객체를 생성하면 시스템의 현지 시간대에 따라 날짜와 시간을 처리합니다.

1.1. 기본 날짜 형식

Date 객체는 날짜를 문자열로 변환할 때 자동으로 기본 형식으로 변환합니다.

const date = new Date();
console.log(date); // 예시 출력: Fri Oct 13 2023 10:30:45 GMT+0900 (KST)

이 기본 형식은 요일, 월, 일, 연도, 시간, 시간대를 포함합니다.

2. 날짜 형식을 변환하는 메서드

JavaScript는 날짜를 다양한 형식으로 변환하기 위한 메서드를 제공합니다.

2.1. `toDateString()`

날짜만을 문자열로 반환합니다. 시간 정보는 포함되지 않습니다.

const date = new Date();
console.log(date.toDateString()); // 예시 출력: Fri Oct 13 2023

2.2. `toTimeString()`

시간만을 문자열로 반환합니다. 날짜 정보는 포함되지 않습니다.

console.log(date.toTimeString()); // 예시 출력: 10:30:45 GMT+0900 (KST)

2.3. `toLocaleDateString()`

사용자의 지역 설정에 맞춘 날짜 형식을 반환합니다. 브라우저나 시스템의 설정에 따라 다른 형식이 반환됩니다.

console.log(date.toLocaleDateString()); // 예시 출력: 2023. 10. 13. (한국)
console.log(date.toLocaleDateString("en-US")); // 예시 출력: 10/13/2023 (미국)
console.log(date.toLocaleDateString("fr-FR")); // 예시 출력: 13/10/2023 (프랑스)

2.4. `toLocaleTimeString()`

사용자의 지역 설정에 맞춘 시간 형식을 반환합니다.

console.log(date.toLocaleTimeString()); // 예시 출력: 10:30:45 (한국)
console.log(date.toLocaleTimeString("en-US")); // 예시 출력: 10:30:45 AM (미국)

2.5. `toISOString()`

ISO 8601 형식으로 날짜와 시간을 UTC 시간 기준으로 반환합니다. 이 형식은 주로 서버와 데이터를 교환할 때 사용됩니다.

console.log(date.toISOString()); // 예시 출력: 2023-10-13T01:30:45.123Z

2.6. `toUTCString()`

날짜를 UTC 시간에 맞춘 문자열로 반환합니다.

console.log(date.toUTCString()); // 예시 출력: Fri, 13 Oct 2023 01:30:45 GMT

3. 날짜 형식을 사용자 정의하기

JavaScript에서는 기본 제공 메서드 외에도 직접 포맷을 정의하여 날짜를 원하는 형식으로 변환할 수 있습니다.

3.1. 날짜의 구성 요소 추출

Date 객체의 메서드를 사용해 연도, 월, 일, 시간 등의 개별 요소를 추출할 수 있습니다.

const date = new Date();
const year = date.getFullYear();
const month = (date.getMonth() + 1).toString().padStart(2, '0'); // 월은 0부터 시작하므로 1을 더함
const day = date.getDate().toString().padStart(2, '0');
const hours = date.getHours().toString().padStart(2, '0');
const minutes = date.getMinutes().toString().padStart(2, '0');
const seconds = date.getSeconds().toString().padStart(2, '0');

const customFormat = `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
console.log(customFormat); // 예시 출력: 2023-10-13 10:30:45

4. `Intl.DateTimeFormat`을 사용한 날짜 포맷팅

JavaScript의 Intl.DateTimeFormat 객체를 사용하면, 다양한 지역 및 옵션을 사용하여 날짜와 시간을 더욱 정교하게 포맷할 수 있습니다.

4.1. 기본 사용법

const date = new Date();
const formatter = new Intl.DateTimeFormat("en-US", {
    year: "numeric",
    month: "long",
    day: "numeric",
    weekday: "long",
    hour: "numeric",
    minute: "numeric",
    second: "numeric",
    timeZoneName: "short"
});

console.log(formatter.format(date)); // 예시 출력: Friday, October 13, 2023, 10:30:45 AM GMT+9

4.2. 다양한 옵션 사용

Intl.DateTimeFormat은 다양한 옵션을 지원하며, 아래는 그 중 일부입니다:

year: "numeric" (2023), "2-digit" (23)
month: "numeric" (10), "2-digit" (10), "long" (October), "short" (Oct)
day: "numeric" (13), "2-digit" (13)
weekday: "long" (Friday), "short" (Fri)
hour, minute, second: "numeric", "2-digit"
timeZone: 특정 시간대를 지정할 수 있습니다 (예: "America/New_York")

const formatter2 = new Intl.DateTimeFormat("fr-FR", {
    year: "numeric",
    month: "short",
    day: "numeric",
    hour: "2-digit",
    minute: "2-digit",
    second: "2-digit",
    timeZone: "Europe/Paris"
});

console.log(formatter2.format(date)); // 예시 출력: 13 oct. 2023, 10:30:45

5. 다양한 날짜 형식의 예시

5.1. 미국식 형식 (MM/DD/YYYY)

const usDate = `${month}/${day}/${year}`;
console.log(usDate); // 출력: 10/13/2023

5.2. 유럽식 형식 (DD/MM/YYYY)

const euDate = `${day}/${month}/${year}`;
console.log(euDate); // 출력: 13/10/2023

5.3. 일본식 형식 (YYYY年MM月DD日)

const jpDate = `${year}年${month}月${day}日`;
console.log(jpDate); // 출력: 2023年10月13日

요약

기본 날짜 형식: Date 객체는 다양한 기본 메서드를 제공하며, toDateString(), toLocaleDateString() 등을 통해 날짜를 다양한 형식으로 표현할 수 있습니다.
ISO 8601: toISOString() 메서드를 통해 날짜를 ISO 8601 형식으로 변환하여 서버 간 데이터 교환에 사용됩니다.
사용자 정의 포맷: 날짜의 개별 구성 요소(연도, 월, 일 등)를 추출하여 직접 포맷을 정의할 수 있습니다.
Intl.DateTimeFormat: 더욱 정교하고 다양한 옵션을 사용하여 날짜와 시간을 포맷할 수 있습니다.

JavaScript에서 날짜 형식을 적절히 처리하면, 다양한 상황에서 유연하게 날짜와 시간을 다룰 수 있습니다. 이를 통해 웹 애플리케이션에서 날짜 관련 데이터를 보다 효과적으로 표시하고 관리할 수 있습니다.

코딩 스쿨 JavaScript