FrontEnd/Vue.js

[javascript/Vue] moment.js ์ง€์› ์ค‘๋‹จ์œผ๋กœ dayjs๋กœ ๋ณ€๊ฒฝํ•˜๊ธฐ

๊น€ํ‰๋ฒ”๋‹˜ 2021. 3. 24. 20:58
๋ฐ˜์‘ํ˜•

 

moment.js ์ง€์›์ค‘๋‹จ! dayjs๋กœ๋ณ€๊ฒฝํ•˜๊ธฐ

๐Ÿ™…‍โ™€๏ธmoment.js

๋‚˜์˜ ํ”„๋กœ์ ํŠธ์˜ ๋‚ ์งœ ์‹œ๊ฐ„ ๊ณ„์‚ฐ์„ ํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋Š” moment.js๋ฅผ ์‚ฌ์šฉํ–ˆ๋‹ค.

์˜ค๋Š˜ ๊ธฐ์ค€ ๋‹ค์šด๋กœ๋“œ ์ˆ˜๊ฐ€ 18,204,885 ๋งŽ์€ ๊ฐœ๋ฐœ์ž๋“ค์—๊ฒŒ ์‚ฌ๋ž‘๋ฐ›์€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜€๋‹ค.

๋‚˜ ์—ญ์‹œ ํ”„๋กœ์ ํŠธ๋งˆ๋‹ค ๋‚ ์งœ๋ฅผ ๊ณ„์‚ฐํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์˜€๋‹ค.

 

2011๋…„ ์ฒซ ๊ณต๊ฐœ๋œ moment.js๋Š” ์ด์ œ๋Š” ์ด๋ฏธ ๋ฐœํ‘œ๊ฐ€ ๋œ ์ง€ 9๋…„์ด ์ง€๋‚ฌ๊ณ , 

์ง€๊ธˆ์˜ ์›น์€ ์ด moment๊ฐ€ ๋ฐœํ‘œ๋˜์—ˆ์„ ๋•Œ์™€ ๋งŽ์€ ๋ถ€๋ถ„์ด ๋ณ€ํ–ˆ๋‹ค.

 

 

moment ์ œ์ž‘์ง„๋“ค์€ ์ด์ œ ์ƒˆ๋กœ์šด ๊ธฐ๋Šฅ ๋Œ€์‹  ์•ˆ์ •์„ฑ์„ ์šฐ์„ ์œผ๋กœ ํ•˜์—ฌ

moment๋ฅผ ์ด์ œ ๋” ์ด์ƒ์˜ ์—…๋ฐ์ดํŠธ๊ฐ€ ์—†๋‹ค๊ณ  ๋ฐœํ‘œ๋ฅผ ํ–ˆ๊ณ ,

๋‹ค๋ฅธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ์‚ฌ์šฉํ•˜๋ผ๋Š” ๋ง์„ ๋‚จ๊ฒผ๋‹ค.

 

์ด์ œ๋ถ€ํ„ฐ moment.js๋Š” ๋” ์ด์ƒ ์ง€์›์ด ์—†์–ด์ง„๋‹ค๋Š” ์ ์„ ๋ฐํžŒ ๊ฒƒ์ด๋‹ค.

 

npm moment.js

๋ฌผ๋ก  ์ง€๊ธˆ ์‚ฌ์šฉํ•˜๋Š” ๊ณณ์— ๋ฌธ์ œ๊ฐ€ ์—†๋‹ค๋ฉด ๋‹น์žฅ์€ ๋ฌธ์ œ๊ฐ€ ์—†๊ฒ ์ง€๋งŒ,

์•ž์œผ๋กœ์˜ ์œ ์ง€๋ณด์ˆ˜๋‚˜ ๋ฏธ๋ž˜๋ฅผ ์œ„ํ•ด์„œ๋Š” ์Šฌ์Šฌ Moment.js๋ฅผ ํ”„๋กœ์ ํŠธ์—์„œ ๊ฑท์–ด๋‚ด์•ผ ํ•  ๊ฒƒ์ด๋‹ค.

๋‚˜๋Š” Moment.js ๋ฅผ ๊ฑท์–ด๋‚ด๊ณ  dayjs๋กœ ๋„˜์–ด๊ฐ€๊ธฐ๋กœ ๊ฒฐ์ •ํ–ˆ๋‹ค.


 

๐Ÿ‘dayjs

dayjs๋Š” ๋ฒŒ์จ 4,755,226 ๋‹ค์šด๋กœ๋“œ๊ฐ€ ๋œ ์ƒˆ๋กœ ๋ถ€ํฅํ•˜๊ณ  ์žˆ๋Š” ๋‚ ์งœ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ์ด๋‹ค.

์‚ฌ์šฉ๋ฒ•์€ moment์™€ ๊ฑฐ์˜ ๋น„์Šทํ•˜๊ธฐ ๋•Œ๋ฌธ์— moment๋ฅผ ์ด๋ฏธ ์‚ฌ์šฉํ•˜์…จ๋˜ ๋ถ„์ด๋ผ๋ฉด 

๊ธˆ๋ฐฉ ์‚ฌ์šฉ๋ฒ•์„ ์ตํž ์ˆ˜ ์žˆ์„ ๊ฒƒ์ด๋‹ค.

ํ•œ๊ตญ์–ด๋กœ ๋ฒˆ์—ญ๋œ git ํŽ˜์ด์ง€ ๊นŒ์ง€ ์ œ๊ณต๋˜๊ณ  ์žˆ๋‹ค.

 

github.com/iamkun/dayjs/blob/HEAD/docs/ko/README-ko.md

 

iamkun/dayjs

โฐ Day.js 2KB immutable date-time library alternative to Moment.js with the same modern API - iamkun/dayjs

github.com

 

 

์„ค์น˜ ๋ฐฉ๋ฒ•

๋จผ์ € ๋‚ด๊ฐ€ ์‚ฌ์šฉํ•  ํ”„๋กœ์ ํŠธ์— dayjs๋ฅผ ์„ค์น˜ํ•œ๋‹ค.

์ €๋Š” ๊ธฐ๋ณธ์ ์œผ๋กœ vue.js ๋ฅผ ์‚ฌ์šฉํ•ด์„œ vue ํ”„๋กœ์ ํŠธ์— ์„ค์น˜ํ•ด์„œ ์‚ฌ์šฉํ•ด๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค.

npm install dayjs --save

 

ํ˜„์žฌ ์‹œ๊ฐ„ ๊ฐ€์ ธ์˜ค๊ธฐ

๊ฐ€์žฅ ๊ฐ„๋‹จํ•œ ํ˜„์žฌ ์‹œ๊ฐ„์„ moment์™€ ๋™์ผํ•˜๊ฒŒ ๋ณด์ด๋„๋ก ์ฝ”๋“œ๋ฅผ ์งœ ๋ณด๋„๋ก ํ•˜๊ฒ ๋‹ค.

๊ธฐ์กด moment์—์„œ๋Š” ํ˜„์žฌ ์‹œ๊ฐ„์„ ํ‘œ์‹œํ•˜๋ ค๋ฉด

moment(new Date()).format('YYYY-MM-DD') ๋กœ ํ‘œ์‹œํ–ˆ๋‹ค๋ฉด, dayjs์—์„œ๋Š” new Date() ๋ถ€๋ถ„์„ ๋นผ๊ณ  

dayjs(). format("YYYY-MM-DD")๋กœ ์ž‘์„ฑํ•ด ์ฃผ๋ฉด ๋œ๋‹ค.

 

์ƒ˜ํ”Œ ์ฝ”๋“œ

<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>

 

ํ˜„์žฌ ์‹œ๊ฐ„ ๊ฒฐ๊ณผํ™”๋ฉด

 

 

ํŠน์ • ๋‚ ์งœ ๊ฐ’ ๊ฐ€์ ธ์˜ค๊ธฐ

dayjs๋ฅผ ์ด์šฉํ•ด์„œ ํŠน์ • ๋‚ ์งœ ๊ฐ’์„ ๊ฐ€์ ธ์˜ค๋Š” ๋ฐฉ๋ฒ•์€ ์•„๋ž˜์™€ ๊ฐ™๋‹ค.

<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>

dayjs๋กœ ๊ฐ ์›ํ•˜๋Š” ๋‚ ์งœ๋ฅผ ๊ฐ€์ ธ์˜ค๋Š” ๊ฒฐ๊ณผํ™”๋ฉด

 

๋‚ ์งœ ๋”ํ•˜๊ณ  ๋นผ๋Š” ๋ฐฉ๋ฒ•

๊ฐ€์žฅ ์ž์ฃผ ์“ฐ๋Š” ๋‚ ์งœ๋ฅผ ๋นผ๊ณ  ๋”ํ•˜๋Š” ๊ธฐ๋Šฅ๋„ ๋‹น์—ฐํžˆ ์ œ๊ณตํ•ด์ค€๋‹ค.

 

์ƒ˜ํ”Œ ์ฝ”๋“œ

<template>
    <div>
        <p>ํ˜„์žฌ์‹œ๊ฐ„ : {{today}}</p>
        <p>์–ด์ œ:  {{yesterday}}</p>
        <p>๋‚ด์ผ : {{tommorrow}}</p>
    </div>
</template>
<script>
    import dayjs from 'dayjs'

    export default {
        component: {
            dayjs
        },
        data() {
            return {
                today: dayjs().format("YYYY-MM-DD HH:mm:ss"),
                yesterday:'',
                tommorrow:'',
            }
        },
        mounted() {
            this.calcDate();
        },
        methods: {
            calcDate: function() {
                this.tommorrow = dayjs(this.today).add(1, 'day').format('YYYY-MM-DD');
                this.yesterday = dayjs(this.today).subtract(1, 'day').format('YYYY-MM-DD');
            }
        }
    }
</script>

dayjs ๋‚ ์งœ ๊ณ„์‚ฐ ๊ฒฐ๊ณผ ํ™”๋ฉด

 

 

 

 

 

 ๋‚ด๊ฐ€ ๋งŒ๋“  ์˜ˆ์‹œ ์™ธ ์ข€ ๋” ๋งŽ์€ ์‚ฌ์šฉ ๋ฒ•์„ ์•Œ๊ณ  ์‹ถ๋‹ค๋ฉด ์•„๋ž˜ ์‚ฌ์ดํŠธ๋ฅผ ์ฐธ๊ณ ํ•˜๋ฉด ๋œ๋‹ค.

day.js.org/en/

 

Day.js · 2kB JavaScript date utility library

2kB JavaScript date utility library

day.js.org

 

 

๋ฐ˜์‘ํ˜•