자바스크립트에서 날짜 및 시간 포맷팅하는 간단한 방법

-

 

-

안녕하세요! 오늘은 JavaScript에서 날짜와 시간을 원하는 형식으로 포맷하는 방법을 소개하려고 해요.

웹 개발을 하다 보면, 자주 현재 시간을 특정 포맷으로 변환해야 할 때가 있죠.

예를 들어, **"2024년 10월 28일 09시 05분 03초"**를 **"20241028090503"**와 같은 형식으로 변환하고 싶을 때요.

그렇다면 어떻게 해야 할까요?

 

1. 기본적인 방법

 

우리는 Date 객체를 사용하여 현재 날짜와 시간을 가져올 수 있어요.

그리고 이를 문자열로 변환하고 포맷을 맞추는 작업을 해야겠죠. 먼저 기존의 코드를 살펴볼까요?

var today = new Date();

var year = today.getFullYear();
var month = today.getMonth() + 1;  // getMonth()는 0부터 시작하니까 +1 필요
var date = today.getDate();
var hour = today.getHours();
var minute = today.getMinutes();
var second = today.getSeconds();

// 1자리 수일 경우 0을 추가해서 두 자릿수로 만들기
month = month < 10 ? '0' + month : month;
minute = minute < 10 ? '0' + minute : minute;
second = second < 10 ? '0' + second : second;

var now = year + "" + month + "" + date + "" + hour + "" + minute + "" + second;

console.log(now);  // 예: "20241028090503"

여기서 우리는 날짜와 시간을 두 자릿수로 맞추는 작업을 해주고, 문자열로 결합하여 하나의 고유한 값인 now를 생성합니다.

이 방법도 잘 동작하지만, 더 간결하고 깔끔하게 작성할 수 있는 방법이 있어요!

 

2. padStart() 메서드를 사용한 개선 방법

JavaScript에는 **padStart()**라는 편리한 메서드가 있어요.

이 메서드는 문자열의 길이를 원하는 길이로 맞춰주고, 부족한 자리를 특정 문자로 채워주는 기능을 제공합니다.

날짜나 시간을 두 자릿수로 맞출 때 유용하게 사용할 수 있죠.

var today = new Date();

// 각 값들을 2자리로 포맷하기 위해 padStart 사용
var year = today.getFullYear();
var month = (today.getMonth() + 1).toString().padStart(2, '0');  // 01~12
var date = today.getDate().toString().padStart(2, '0');           // 01~31
var hour = today.getHours().toString().padStart(2, '0');          // 00~23
var minute = today.getMinutes().toString().padStart(2, '0');      // 00~59
var second = today.getSeconds().toString().padStart(2, '0');      // 00~59

var now = `${year}${month}${date}${hour}${minute}${second}`;

console.log(now);  // 예: "20241028090503"

 

3. 날짜 포맷을 더 쉽게 처리하기

만약 날짜와 시간을 자주 포맷해야 한다면, **Intl.DateTimeFormat**을 활용할 수 있어요.

이 방법은 날짜 형식을 로케일에 맞게 자동으로 처리할 수 있기 때문에 매우 유용합니다.

var today = new Date();

// 날짜 및 시간 포맷 정의 (yyyyMMddHHmmss)
var now = new Intl.DateTimeFormat('ko-KR', {
  year: 'numeric',
  month: '2-digit',
  day: '2-digit',
  hour: '2-digit',
  minute: '2-digit',
  second: '2-digit',
  hour12: false
}).format(today).replace(/[^\d]/g, '');  // 구분자 제거하고 숫자만 반환

console.log(now);  // 예: "20241028090503"

여기서 **Intl.DateTimeFormat**은 날짜를 매우 직관적으로 포맷할 수 있는 방법인데요, 위 코드에서는 ko-KR(한국어) 로케일을 사용하여 연도, 월, 일, 시, 분, 초를 두 자릿수로 자동으로 변환하고 있습니다.

 

4. 라이브러리 활용 (옵션: dayjs)

그리고 더 복잡한 날짜/시간 작업을 자주 한다면, **dayjs**와 같은 날짜 라이브러리를 사용하는 것도 좋은 방법이에요.

이 라이브러리는 날짜를 다루는 데 매우 직관적이고, 코드가 간결해지기 때문에 자주 사용됩니다.

// dayjs 라이브러리 사용 예시
const dayjs = require('dayjs');

var now = dayjs().format('YYYYMMDDHHmmss');

console.log(now);  // 예: "20241028090503"

우리가 지금까지 다룬 방법들은 각기 다른 상황에서 유용하게 사용할 수 있습니다.

간단한 날짜 포맷팅부터, 국제화까지 다양한 요구에 맞는 방법들을 소개해드렸어요.

이제 여러분도 JavaScript로 날짜와 시간을 간편하고 깔끔하게 포맷할 수 있겠죠?

 

 

그럼 오늘도 멋진 하루 되세요!