[JS] moment.js - JavaScript 날짜 관련 라이브러리

1. Moment.js

 

 moment.js는 자바스크립트에서 날짜와 관련된 작업을 할 수 있게 모아둔 라이브러리이다.

 자바스크립트의 내장 객체인 Date()의 복잡성을 단순화하고, 다양하게 사용할 수 있도록 만들어둔 라이브러리다.

 다운로드는 아래 사이트에서 할 수 있다.

https://momentjs.com/

Moment.js | Home

 

 파일이 두 가지가 있는데 이 중에서 아래 것을 다운받았다.

 차이가 있다면 아래 작업이 한글 작업하는 것에 더 용이한 부분이 있다.

 (용량도 더 크다)

 

 파일을 다운받은 후 링크까지 해두었다.

<script src="moment-with-locales.min.js"></script>

 

 

2. Moment.js 사용하기

 

 moment.js를 사용하는 방법은 홈페이지에 친절하게 잘 나와있다.

 이 중에서 어떤 기능을 어떻게 사용하는 지가 바로 개발자의 몫.

 

1) 자바스크립트 Date 객체 사용하기

 우선 moment 라이브러리를 사용하기 전에 Date 객체로 날짜와 시간을 호출해보자.

 

<script>

    // 1) 자바스크립트
    let now = new Date();

    let year = now.getFullYear();
    let month = now.getMonth()+1;
    let date = now.getDate();

    let hour = now.getHours();
    let min = now.getMinutes();
    let sec = now.getSeconds();

    let fullDate="";
    fullDate += year + "년" + month + "월" + date + "일";
    fullDate += hour + "시" + min + "분" + sec + "초";

    $("#time").text(fullDate);
</script>

잘 출력되었다

 

 

2) moment.js 사용하기

 다음은 moment.js를 사용해보자.

 우선 moment에서 제공하는 날짜들을 찍어보자.

let now = moment();
alert(now.year());
alert(now.month()+1);
alert(now.date());
alert(now.day());

 

 알람창으로 잘 뜨는 것을 확인한 뒤 moment에서 제공하는 기능으로 날짜를 출력해보고자 한다.

 이 때 아래의 코드를 작성하여 한글 날짜를 출력할 수 있도록 지정해준다.

moment.locale("ko");

 

 코드까지 입력했다면 다음은 .format() 메서드를 활용해보고자 한다.

 필요한 날짜와 시간 데이터만 명령어로 작성하면 알아서 날짜 데이터로 변환해준다.

 

moment.js 홈페이지에서 제공하는 format 메서드에 대한 설명

 

 

var fullDate = now.format("YYYY년MM월DD일 HH시mm분ss초");
$("#time").text(fullDate);

 위와 같이 간단하게 코드를 작성하면 아래와 같은 출력이 가능해진다.