[JavaScript] moment.js로 쉽게 날짜, 시간 사용 및 기간 설정

📌 Moment.js란?

- JavaScript 날짜 및 시간을 쉽게 다룰 수 있게 해주는 라이브러리

- 기존의 Date 객체와 다르게 간결하고 다양한 포맷 지원, 날짜 계산까지 쉽게 해결할 수 있습니다

📍moment CDN, 설치(React, Vue)

// CDN
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.4/min/moment.min.js"></script>

// React, Vue
npm install moment

 

📍 moment 기능

📂 분류	🧩 기능	💻 예시 코드	📌 설명
기본	현재 날짜/시간	moment()	현재 시각을 Moment 객체로 가져옴
	특정 날짜 생성	moment('2025-05-15')	지정된 날짜를 Moment 객체로 생성
포맷팅	기본 포맷	moment().format('YYYY-MM-DD')	'YYYY-MM-DD' 형식으로 날짜 출력
	시간 포함 포맷	moment().format('YYYY-MM-DD HH:mm:ss')	시간까지 포함해 출력
	로컬 포맷	moment().format('YYYY년 MM월 DD일')	지역화된 날짜 형식 출력
	요일 출력	moment().format('dddd')	요일명 출력 (예: '월요일')
	시간대 표시	moment().format('A h:mm')	오전/오후 및 시간 출력 (예: '오후 3:30')
날짜 비교	이전 날짜 확인	moment().isBefore('2025-06-28')	특정 날짜보다 이전인지 확인
	이후 날짜 확인	moment().isAfter('2023-01-01')	특정 날짜보다 이후인지 확인
	동일 날짜 확인	moment().isSame('2025-04-10')	특정 날짜와 같은지 확인
	범위 내 확인	moment().isBetween('2025-01-01', '2025-12-31')	두 날짜 사이인지 확인
날짜 계산	날짜 더하기	moment().add(7, 'days')	7일 뒤 날짜 계산
	날짜 빼기	moment().subtract(3, 'months')	3개월 전 날짜 계산
	차이 계산	moment('2025-12-25').diff(moment('2025-01-01'), 'days')	일(day) 기준 차이 계산
	시작/끝 설정	moment().startOf('month')	월의 시작 날짜 설정
날짜 검증	유효 날짜 확인	moment('2025-02-30').isValid()	날짜 유효성 검증 (false)
날짜 속성	월 획득	moment().month()	현재 월 정보 (0~11)
	날짜 설정	moment().set('year', 2026)	특정 속성(year 등) 설정
국제화	언어 설정	moment.locale('ko')	한국어 로케일 설정
상대 시간	상대 표현	moment('2025-01-01').fromNow()	현재 기준 상대 시간 (예: ‘3개월 전’)
달력 시간	맥락 표현	moment('2025-04-15').calendar()	'내일 오후 3:30' 식 표현
기타	날짜 파싱	moment('04/10/2025', 'MM/DD/YYYY')	포맷 지정해서 날짜 문자열 파싱
	클론 생성	moment().clone()	현재 객체 복사
	UTC 시간	moment.utc()	UTC 기준 시간 사용
	타임존 변환	moment().tz('America/New_York')	타임존 변환 (※ moment-timezone 필요)

반응형

📍 사용

const dateNow = moment().format('YYYY-MM-DD HH:mm:ss');
console.log(dateNow); // 2025-04-10 11:00:39
// 날짜 비교
const test1 = moment('2025-1-1');
const test2 = moment('2025-12-31');
const test3 = moment('2026-1-1')
// isBefore : 특정 날짜보다 이전
test1.isBefore(test2) // true
moment().isBefore('2025-4-31') // true
moment('2026-1-1').isBefore('2025-4-31') // false
// isAfter : 특정 날짜보다 이후
test2.isAfter(test1) //true
moment().isAfter('2025-4-31') // false
moment('2026-1-1').isAfter('2025-4-31') // true
// isSame: 특정 날짜와 같은지
test1.isSame(test1) // true
moment().isSame('2025-4-31') // false
moment('2026-1-1').isSame('2026-1-1') // true
// isBetween : 두 날짜 사이인지
moment().isBetween('2025-01-01', '2025-12-31') // true
moment().isBetween('2026-01-01', '2026-12-31') // false

// 시간 포함 현재 시간 11:16분 기준
moment().isBetween('2025-04-10 10:00:00', '2025-04-10 11:00:00') // false
moment().isBetween('2025-04-10 10:00:00', '2025-04-10 11:20:00') // true

 

📍 날짜 더하기

// 날짜 더하기
moment().add(7, 'days').format('YYYY-MM-DD'); // q {_isAMomentObject: true, _isUTC: false, _pf: {…}, _locale: K, _d: Thu Apr 17 2025 11:20:52 GMT+0900 (한국 표준시), …}
moment().add(2, 'months'); // 동일
// 🔽 아래와 같이 포멧
moment().add(7, 'days').format('YYYY-MM-DD'); // 2025-04-17
moment().add(2, 'months').format('YYYY-MM-DD'); // 2025-06-10

 

 

📍 기간 계산 days, months, 

- d-day 계산

// 일
const startDay = moment().diff(moment('2025-01-01'), 'days');
const endDay = moment().diff(moment('2025-12-01'), 'days');
console.log(startDay) // 99
console.log(endDay) // -234
// 월
const startMonths = moment().diff(moment('2025-01-10'), 'months');
console.log(startMonths) // 3
const endMonths = moment('2025-01-01').diff(moment('2025-12-01'), 'months');
console.log(endMonths) // -11
// 연
const yearYears = moment().diff(moment('2050-01-01'), 'years');
console.log(yearYears); // -24
const endYears = moment().diff(moment('2000-01-01'), 'years');
console.log(endYears); // 25

 

📍 특정 날짜와 날짜 시간

// 25/04/10/11:00 기준
const endDate1 = moment().isBefore(moment('2025-06-28 23:59', 'YYYY-MM-DD HH:mm')) // true
const endDate2 = moment().isBefore(moment('2025-04-10 10:59', 'YYYY-MM-DD HH:mm')) // false
console.log(endDate1)
console.log(endDate2)

 

 

📖 포맷 참고

 

'YYYY-MM-DD'	2025-04-10
'YYYY-MM-DD HH:mm:ss'	2025-04-10 13:20:45
'dddd'	목요일 (요일)
'YYYY년 M월 D일'	2025년 4월 10일 (로컬 형식)

 

📍 시간 사용하기

moment().format('HH:mm');       // → 13:32
moment().format('hh:mm A');     // → 01:32 PM
moment().locale('ko').format('A h:mm');      // → PM 1:32
moment().format('HH시 mm분');    // → 13시 32분

🌟
moment().locale('ko').format('A h:mm');      // → PM 1:32
// PM을 한글로 자동 표현되게 사용하기 위해선 CDN 아래와 같이 변경 
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment-with-locales.min.js"></script>
moment().locale('ko').format('A h:mm');  // 오후 1:35

// React, vue
import 'moment/locale/ko';

 

📍 시간 기준 정하기

// ✅ 참고 { hour: 0, minute: 0, second: 0, millisecond: 0 }

// 10시
const endTime1 = moment().set({ hour: 10, minute: 0 });
moment().isBefore(endTime1) // false
// 15시 30분
const endTime2 = moment().set({ hour: 15, minute: 30 });
moment().isBefore(endTime2) // true
// 자정(00:00)
const endTime13 = moment().startOf('day');
moment().isBefore(endTime13) // false

※ moment().set(); //👈 오늘 날짜 기준으로 하기에 날짜가 다른 경우 false

 

📖 시간만 포맷 참고

'HH:mm'	14:30	24시간제 (시:분)
'HH:mm:ss'	14:30:15	24시간제 (시:분:초)
'hh:mm A'	02:30 PM	12시간제 + 오전/오후 표시
'h:mm A'	2:30 PM	12시간제 (0 안 붙음)
'A h:mm'	오후 2:30	로케일에 따른 오전/오후 표시 (locale이 ko일 경우)
'mm:ss'	05:12	분:초 (예: 타이머처럼)
'HH시 mm분'	14시 30분	한글 표기
'a h시 m분'	오후 2시 30분	오전/오후 포함 한글

 

📍 moment-timezone

- moment.js 확장 기능으로 전 세계의 다양한 시간대를 처리할 수 있도록 도와주는 라이브러리

- 특정 지역의 현재 시간 구하기

- 시간대가 다른 사용자에게 정확한 시간 정보 제공

- 나라별 예약, 이벤트 등에 타임존 시간 사용

// CDN 로케일 + 타임존 포함
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.43/moment-timezone-with-data.min.js"></script>

--------------------------------------------
// React, Vue 타임존 추가!
npm install moment-timezone

// 한번에 설치
npm install moment moment-timezone

import moment from 'moment-timezone';
import 'moment/locale/ko';

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.4/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment-timezone/0.5.43/moment-timezone-with-data.min.js"></script>
<script>
  const ko = moment().tz('Asia/Seoul').format('YYYY년 M월 D일 A h:mm');
  const ny = moment().tz('America/New_York').format('YYYY-MM-DD HH:mm');
  const tyo = moment().tz('Asia/Tokyo').format('YYYY-MM-DD HH:mm');
  console.log('서울 시간:', ko); // 서울 시간: 2025년 4월 10일 PM 2:39
  console.log('뉴욕 시간:', ny); // 뉴욕 시간: 2025-04-10 01:39
  console.log('도쿄 시간:', tyo); // 도쿄 시간: 2025-04-10 14:41
</script>

 

 

 

✍️ 기록

 

감사합니다. 😁