자바스크립트로 날짜와 시간 포맷하기

-

 

-

안녕하세요! 오늘은 자바스크립트에서 날짜와 시간을 어떻게 포맷하는지에 대해 알아볼게요.
웹 개발을 하다 보면 종종 날짜와 시간을 특정 형식으로 보여줘야 할 때가 많죠.
자바스크립트에서는 날짜를 다루기 위한 여러 가지 방법을 제공하는데요, 그 중 하나가 Date 객체입니다.

이 글을 통해 Date 객체를 사용해서 날짜와 시간을 원하는 형식으로 포맷하는 방법을 쉽게 알아보겠습니다.

 

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

우선, 자바스크립트에서 현재 날짜와 시간을 가져오려면 Date 객체를 사용하면 됩니다.

var today = new Date();

이 코드 한 줄로 today라는 변수에 현재 날짜와 시간 정보를 담을 수 있어요.
이제 today 객체에서 날짜와 시간 정보를 하나씩 꺼내볼게요.

 

2. 날짜와 시간 값 추출하기

Date 객체에서 다양한 날짜/시간 관련 정보를 얻을 수 있습니다.
예를 들어, 현재 연도, 월, 일, 시, 분, 초를 아래와 같이 추출할 수 있습니다.

var year = today.getFullYear();  // 연도 (예: 2024)
var month = today.getMonth() + 1;  // 월 (0부터 시작하므로 +1 해줘야 1~12월로 나옴)
var date = today.getDate();  // 일
var hour = today.getHours();  // 시간 (0부터 23까지)
var minute = today.getMinutes();  // 분
var second = today.getSeconds();  // 초

잠깐!
getMonth() 메서드는 0부터 11까지의 값을 반환하는데요, 0이 1월, 11이 12월을 의미합니다.
그래서 월을 표시할 때는 항상 1을 더해주어야 합니다.

 

3. 두 자릿수로 포맷하기

자, 이제 날짜와 시간 값을 잘라서 각각 00, 01, 02 처럼 두 자릿수로 만들어줄 차례입니다.
왜냐하면, 한 자릿수로 나오면 날짜나 시간이 9일 경우 "9"와 같이 불편하게 표시되기 때문이죠.

month = month < 10 ? '0' + month : month;
minute = minute < 10 ? '0' + minute : minute;
second = second < 10 ? '0' + second : second;

위 코드는 월, 분, 초가 한 자릿수일 경우 앞에 0을 추가해주는 역할을 합니다.
예를 들어, 9월이라면 "09"로, 5분이라면 "05"로 표시할 수 있게 되는 거죠.

 

4. 날짜와 시간 문자열 합치기

이제 우리가 필요한 형식으로 날짜와 시간을 결합해보겠습니다.
예를 들어, 2024-12-03 14:05:09와 같은 형식을 만들고 싶다면 이렇게 할 수 있습니다:

var now = year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second;
console.log(now);  // 예: 2024-12-03 14:05:09

이렇게 하면 현재 날짜와 시간이 2024-12-03 14:05:09 형식으로 출력됩니다.
필요한 포맷에 맞춰서 결합할 수 있겠죠?

 

5. 출력 예시

자, 그럼 예시를 출력해볼까요?
여러분이 위 코드를 실행하면 결과는 이렇게 나옵니다:

2024-12-03 14:05:09

이 값은 지금 기준으로 날짜와 시간이 어떻게 되어 있는지를 알 수 있게 해줍니다.
날짜를 다른 형식으로 바꾸고 싶다면, 조합 방법만 바꾸면 되겠죠?

 

6. 자주 쓰는 날짜 메서드들

Date 객체에서 날짜나 시간을 다루는 다른 유용한 메서드들도 몇 가지 알아두면 좋습니다.
예를 들어,

• getDay(): 요일을 숫자로 반환합니다. (0 = 일요일, 6 = 토요일)
• getTime(): 현재 시간을 밀리초로 반환합니다. (1970년 1월 1일을 기준으로 경과한 시간)
• toISOString(): ISO 8601 형식의 문자열로 날짜를 반환합니다. (예: 2024-12-03T05:05:09.000Z)
• toLocaleDateString(): 지역화된 날짜 문자열을 반환합니다. (예: 한국에서는 2024/12/03처럼 나오죠)
•  

7. 날짜 수정하기

또한, Date 객체에서는 날짜 값을 수정할 수도 있습니다.
예를 들어, 날짜를 1일 뒤로 설정하거나 시간을 변경할 수도 있어요:

• setFullYear(year): 연도를 수정합니다.
• setMonth(month): 월을 수정합니다.
• setDate(date): 일을 수정합니다.
• setHours(hour): 시간을 수정합니다.
• setMinutes(minute): 분을 수정합니다.
• setSeconds(second): 초를 수정합니다.

이 메서드들을 사용하면 원하는 날짜나 시간을 쉽게 수정할 수 있습니다.

오늘은 자바스크립트에서 날짜와 시간을 어떻게 포맷할 수 있는지 알아봤어요.
날짜 포맷을 원하는 형식으로 출력할 수 있으면 웹 애플리케이션이나 사이트에서 날짜와 시간을 더 유용하게 활용할 수 있습니다.

여러분도 자바스크립트를 사용해서 멋진 날짜/시간 포맷을 만들어보세요!
혹시 궁금한 점이 있으면 댓글로 남겨주세요. 😊