[Vue.js] Day.js 모듈로 날짜와 시간 구현하기

이전에 moment.js에서를 많이 사용했는데 요즘은 day.js로 많이 사용한다고 한다.

이전 배경

날짜 시간 계산을 하는 라이브러리는 moment.js를 사용한다. 발표한지 오래 지났다. 안정성의 이유로 더 이상의 업데이트가 없다고 밝혔다. 그러니, moment.js 사용시에는 문제가 없겠지만, 유지보수등의 문제가 생길 것으로 생각된다.

현재(day.js)

현재 많은 moment.js를 쓰던 사용자들은 day.js를 사용한다. 그래서 이에 대해 서술해보고자 한다.

1) 설치

npm i dayjs --save

→ 위를 쳐서 모듈을 설치하면 된다.

2) 현재 시간 가져오기

<template>
    <div>
        현재시간 : {{today}}
    </div>
</template>
<script>
    import dayjs from 'dayjs'

    export default {
        component: {
            dayjs
        },
        data() {
            return {
                today: dayjs().format("YYYY-MM-DD HH:mm:ss"),
            }
        },
    }
</script>

현재시간 출력한 결과

3)활용

<template>
    <div>
        <p>현재시간 : {{today}}</p>
        <p>연 :  {{year}}</p>
        <p>월 : {{month}}</p>
        <p>일 : {{day}}</p>
        <p>시 : {{hour}}</p>
        <p>분 : {{min}}</p>
        <p>초 : {{sec}}</p>
    </div>
</template>
<script>
    import dayjs from 'dayjs'

    export default {
        component: {
            dayjs
        },
        data() {
            return {
                today: dayjs().format("YYYY-MM-DD HH:mm:ss"),
                year:'',
                month:'',
                day:'',
                hour:'',
                min: '',
                sec:'',
            }
        },
        mounted() {
            this.dateSplit();
        },
        methods: {
            dateSplit: function() {
                this.year = dayjs(this.today).year();
                this.month = dayjs(this.today).month();
                this.day = dayjs(this.today).day();
                this.hour = dayjs(this.today).hour();
                this.min = dayjs(this.today).minute();
                this.sec = dayjs(this.today).second();
            }
        }
    }
</script>

🔗 참고

https://ordinary-code.tistory.com/60