[Vue.js] moment ํ™œ์šฉ

vue.js์—์„œ์˜ moment ํ™œ์šฉ

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋‚ ์งœํ•จ์ˆ˜์ธ date์˜ new Date() ํ†ตํ•ด ํ˜„์žฌ์‹œ๊ฐ„์„ ๋ฐ›์œผ๋ฉด, ๋‹ค์Œ๊ณผ ๊ฐ™์€ ์ถœ๋ ฅ๊ฐ’์ด ๋‚˜์˜จ๋‹ค.

> var now = new Date()
undefined
> now
2020-01-16T11:32:32.809Z

์›น ์ƒ์˜ ๊ฒŒ์‹œ๊ธ€ ์ž‘์„ฑ ์‹œ๊ฐ„ ๋“ฑ, ์‹ค์ œ๋กœ ์“ฐ์ผ ๋•Œ๋Š” ์œ„์™€ ๊ฐ™์€ ์ถœ๋ ฅ ๊ฐ’๋ณด๋‹จ ์—ฐ/์›”/์ผ๋กœ ๊ฐ„๋‹คํ•˜๊ฒŒ ๋‚˜์˜ค๋Š” ๋ฐฉ์‹์„ ์„ ํ˜ธํ•˜๊ธฐ ๋•Œ๋ฌธ์—, vue.js์—์„  moment๋ฅผ ์ด์šฉํ•˜์—ฌ ์›ํ•˜๋Š” ํ˜•์‹์œผ๋กœ ์ถœ๋ ฅ์„ ๋ฐ”๊ฟ”์ค€๋‹ค.

moment ์„ค์น˜

npm install moment โ€“save ๋ฅผ ์ด์šฉํ•ด moment๋ฅผ ์„ค์น˜ํ•ด์ค€๋‹ค.

์‚ฌ์šฉ ์˜ˆ์ œ

import moment from "moment"; // ์Šคํฌ๋ฆฝํŠธ์—์„œ moment import
post.created_date = moment(post.created_date).format("YYYY/MM/DD HH:MM");
// post.created_date๊ฐ€ ๊ฒŒ์‹œ๋ฌผ์˜ ์ƒ์„ฑ ๋‚ ์งœ๋ฅผ ๊ฐ–๊ณ  ์žˆ๋Š” ๋ณ€์ˆ˜๋ผ๋ฉด ์œ„์™€ ๊ฐ™์€ ์‹์œผ๋กœ moment๋ฅผ ์ด์šฉ

node.js์—์„œ์˜ map

๊ฒŒ์‹œ๊ธ€์˜ ์ƒ์„ฑ ๋‚ ์งœ๋ฅผ vue.js์—์„œ ์ œ๊ณตํ•˜๋Š” data-table์—์„œ ์ด์šฉํ•˜๋ ค๋ฉด, ๊ฒŒ์‹œ๊ธ€์˜ ์ •๋ณด๋ฅผ axiosํ•˜๋ฉด์„œ ๋™์‹œ์— ๋‚ ์งœ์˜ ํฌ๋งท์„ ๋ฐ”๊ฟ”์ฃผ๋Š” ๋ฐฉ๋ฒ•์„ ์„ ํƒํ•ด์•ผ ๋๋‹ค.

์ด๋ฅผ ์œ„ํ•ด, ์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ์˜ ๋ฐฐ์—ด ๋ฉ”์†Œ๋“œ์ธ map์„ ์ด์šฉํ•ด, get๋ฐ›๋Š” ๋ฐ์ดํ„ฐ์˜ post.created_date์„ ๋ชจ๋‘ moment(post.created_date).format(โ€˜YYYY/MM/DD HH:MMโ€™)๋กœ ๋ฐ”๊ฟ”์ฃผ์—ˆ๋‹ค.

this.posts = res.data.posts.map((post) => {
  post.created_date = moment(post.created_date).format("YYYY/MM/DD HH:MM");
  return post;
});