JavaScript 날짜 포맷 가이드: 예시와 함께 올바르게 날짜를 포맷하는 방법

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introduction: Why Date Formatting Matters in JavaScript

웹 개발에서 JavaScript를 사용할 때, 날짜와 시간을 표시하고 관리하는 것은 필수적입니다. 예를 들어 캘린더 애플리케이션과 로그 관리 시스템은 날짜와 시간 데이터를 올바르게 포맷해야 합니다. 하지만 JavaScript에서 날짜를 다루는 것은 초보자에게 다소 복잡하게 느껴질 수 있습니다.

이 가이드에서는 JavaScript에서 날짜 포맷을 마스터할 수 있도록 실용적인 기법과 코드 예제를 소개합니다. Date 객체의 기본 사용법부터 Intl.DateTimeFormat의 고급 활용, 외부 라이브러리와의 비교까지, 포괄적인 설명을 제공합니다.

Common Scenarios Where Date Formatting Is Required

1. 웹 애플리케이션에서 데이터 표시:

• 다양한 캘린더와 시간대를 사용하는 사용자 지원

1. 로그 관리 및 디버깅:

• 오류 로그와 사용자 행동에 대한 타임스탬프 기록

1. 다국어 지원:

• 국제 사용자를 위한 날짜 표시 형식 조정

Benefits for Readers

이 가이드를 읽으면 다음과 같은 역량을 얻게 됩니다:

• 기본 Date 객체 사용법 이해
• 수동 포맷팅 및 내장 메서드를 활용한 유연한 날짜 표시
• 외부 날짜 라이브러리를 활용한 효율적인 코딩

다음 섹션에서는 JavaScript Date 객체의 기본 개념을 자세히 살펴봅니다. 이를 이해하면 이후 고급 주제로 자연스럽게 넘어갈 수 있습니다.

2. Basics of Date Handling in JavaScript: What Is the Date Object?

JavaScript에서 Date 객체는 날짜와 시간을 관리하는 데 사용됩니다. 이 객체를 이해하는 것이 날짜 포맷을 올바르게 다루는 첫 번째 단계입니다. 이 섹션에서는 Date 객체의 기본 사용법을 설명합니다.

2.1 How to Create a Date Object

Date 객체는 다음과 같은 방법으로 생성할 수 있습니다.

1. 현재 날짜와 시간 가져오기

   const today = new Date();
   console.log(today); // Outputs the current date and time
   

2. 특정 날짜와 시간 설정

   const customDate = new Date(2024, 11, 28); // Year, month (starts from 0), day
   console.log(customDate); // December 28, 2024
   

3. 문자열에서 날짜 생성

   const dateFromString = new Date('2024-12-28');
   console.log(dateFromString); // Date converted from ISO format
   

4. 타임스탬프에서 날짜 생성

   const timestampDate = new Date(1703740800000); // Milliseconds
   console.log(timestampDate); // Date represented by the timestamp
   

2.2 Methods for Retrieving Date and Time Components

Date 객체는 개별 날짜·시간 구성 요소를 반환하는 메서드를 제공합니다.

2.3 Working with Time Zones and UTC

현지 시간 가져오기:

const date = new Date();
console.log(date.toString()); // Local time

UTC 시간 가져오기:

console.log(date.toUTCString()); // UTC-based time

시간대 오프셋 가져오기:

console.log(date.getTimezoneOffset()); // -540 (in minutes, for Japan Standard Time)

Summary

이 섹션에서는 JavaScript의 Date 객체 기본 개념을 다루었으며, 날짜 생성 및 구성 요소를 조회·조작하는 방법을 설명했습니다.

다음 섹션에서는 JavaScript에서 날짜를 포맷하는 구체적인 메서드에 대해 자세히 살펴보겠습니다.

3. Three Ways to Format Dates in JavaScript

JavaScript는 날짜를 다양한 형태로 포맷하는 여러 방법을 제공합니다. 이 섹션에서는 수동 포맷팅, 내장 메서드, 고급 포맷 옵션의 세 가지 접근 방식을 자세히 설명합니다.

3.1 Manual Formatting: From Basics to Practical Use

Simple Custom Format Example

const date = new Date();
const year = date.getFullYear(); // Year
const month = ('0' + (date.getMonth() + 1)).slice(-2); // Month (zero-padded)
const day = ('0' + date.getDate()).slice(-2); // Day (zero-padded)

const formattedDate = `${year}-${month}-${day}`;
console.log(formattedDate); // Example: 2024-12-28

3.2 Locale-Aware Formatting with toLocaleDateString()

Basic Usage

const date = new Date();
console.log(date.toLocaleDateString('ja-JP')); // Example: 2024/12/28

Customization with Options

const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
console.log(date.toLocaleDateString('ja-JP', options)); // Example: 2024/12/28

3.3 Advanced Customization: Using Intl.DateTimeFormat

Basic Usage

const date = new Date();
const formatter = new Intl.DateTimeFormat('ja-JP', { dateStyle: 'full' });
console.log(formatter.format(date)); // Example: Saturday, December 28, 2024

Summary

In this section, we introduced three different ways to format dates in JavaScript. In the next section, we will explain how to improve efficiency by using external libraries for date handling.

4. Using External Libraries: Comparing Moment.js, date-fns, and Day.js

While JavaScript’s built-in date methods are powerful, using external libraries can make complex formatting and processing more concise and efficient.

4.1 Moment.js: A Proven Library for Legacy Systems

Basic Usage

const moment = require('moment'); // Import in a Node.js environment
const now = moment(); // Current date and time
console.log(now.format('YYYY-MM-DD HH:mm:ss')); // Example: 2024-12-28 14:30:45

4.2 date-fns: A Modular Library for Modern Projects

Basic Usage

import { format, addDays } from 'date-fns';

const now = new Date();
console.log(format(now, 'yyyy-MM-dd')); // Example: 2024-12-28

const nextWeek = addDays(now, 7);
console.log(format(nextWeek, 'yyyy-MM-dd')); // Example: 2025-01-04

4.3 Day.js: A Lightweight, Moment-Compatible Modern Library

Basic Usage

const dayjs = require('dayjs');

const now = dayjs();
console.log(now.format('YYYY-MM-DD')); // Example: 2024-12-28

const nextWeek = now.add(7, 'day');
console.log(nextWeek.format('YYYY-MM-DD')); // Example: 2025-01-04

4.4 Library Comparison Table

Summary

In this section, we compared popular external libraries that simplify date handling in JavaScript. In the next section, we will introduce practical application examples using these formatting techniques.

5. Practical Examples: Applications Using Date Formatting

5.1 Displaying Dates in a Calendar Application

Implementation Example

const selectedDate = new Date(); // Date selected by the user

const formattedDate = selectedDate.toLocaleDateString('ja-JP', {
  year: 'numeric',
  month: 'long',
  day: 'numeric',
  weekday: 'long'
});

console.log(`Selected date: ${formattedDate}`); 
// Example: Selected date: Saturday, December 28, 2024

5.2 Managing Timestamps in Log Files

Implementation Example

const logTime = new Date().toISOString(); // Get date and time in ISO format
console.log(`[LOG] ${logTime}: Process started`);
// Example: [LOG] 2024-12-28T05:30:00.000Z: Process started

5.3 Validating and Formatting Form Input Dates

Implementation Example

function formatInputDate(inputDate) {
  const date = new Date(inputDate); // Convert input string to a Date object

  if (isNaN(date)) {
    console.log('Invalid date format.');
    return null;
  }

  return date.toLocaleDateString('ja-JP', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit'
  });
}

console.log(formatInputDate('2024-12-28')); // Example: 2024/12/28

Summary

In this section, we introduced practical examples of using date formatting in JavaScript, including calendar displays, log management, and form validation. In the next section, we address frequently asked questions (FAQ) and provide solutions to common issues.

6. Frequently Asked Questions (FAQ)

Q1: ISO 형식으로 날짜와 시간을 표시하려면 어떻게 해야 하나요?

Answer

ISO 형식은 날짜와 시간 표현을 위한 국제 표준이며 데이터베이스와 API 통신에서 널리 사용됩니다. JavaScript에서는 Date 객체의 toISOString() 메서드를 사용할 수 있습니다.

Sample Code

const date = new Date();
console.log(date.toISOString()); // Example: 2024-12-28T05:30:00.000Z

Q2: UTC 시간과 로컬 시간의 차이를 어떻게 처리해야 하나요?

Answer

기본적으로 JavaScript는 로컬 시간을 사용하지만 UTC와 상호 변환할 수 있는 메서드도 제공합니다.

Sample Code

Convert local time to UTC:

const date = new Date();
console.log(date.toUTCString()); // Example: Sat, 28 Dec 2024 05:30:00 GMT

Convert UTC to local time:

const date = new Date('2024-12-28T05:30:00Z'); 
console.log(date.toString()); 
// Example: Sat Dec 28 2024 14:30:00 GMT+0900 (Japan Standard Time)

Q3: 날짜 포맷팅에서 앞에 0을 채우는 가장 쉬운 방법은 무엇인가요?

Answer

function zeroPad(number) {
  return number.toString().padStart(2, '0');
}

const date = new Date();
const formattedDate = `${date.getFullYear()}-${zeroPad(date.getMonth() + 1)}-${zeroPad(date.getDate())}`;
console.log(formattedDate); // Example: 2024-12-28

Summary

이 섹션에서는 JavaScript 날짜 포맷팅에 대한 자주 묻는 질문들을 다루고 실용적인 해결책을 제공했습니다. 다음 섹션에서는 배운 내용을 적용하기 위한 요약 및 실행 계획과 함께 글을 마무리합니다.

7. Conclusion and Practical Next Steps

7.1 Key Takeaways from This Article

1. JavaScript Date Object Basics: Date 객체를 생성하고 날짜 및 시간 값을 조회·조작하는 메서드 사용 방법을 다루었습니다.
2. Three Date Formatting Approaches: 수동 포맷팅, 내장 메서드, 외부 라이브러리 활용.
3. Practical Use Cases: 캘린더, 로그 관리, 폼 검증 등 실제 예시.
4. FAQ: 날짜 포맷팅에 대한 일반적인 문제와 검증된 해결책.

7.2 Action Plan for Practical Implementation

1. Try the Code Examples: 온라인 편집기나 로컬 개발 환경에서 샘플 코드를 실행해 이해도를 높이세요.
2. Apply to Real Projects: 캘린더 기능이나 로그 관리 기능을 추가해 날짜 포맷팅을 실제 프로젝트에 통합하세요.
3. Compare Libraries: Moment.js, date-fns, Day.js를 테스트해 프로젝트 요구에 가장 적합한 것을 선택하세요.

7.3 Final Thoughts

JavaScript 날짜 포맷팅은 간단한 작업부터 고급 커스터마이징 및 강력한 외부 라이브러리까지 다양합니다. 이 가이드를 참고해 효율적이고 유연하며 유지보수가 쉬운 날짜 처리 기능을 애플리케이션에 구현하세요.