ํ”Œ๋Ÿฌ๊ทธ์ธ

ํ”Œ๋Ÿฌ๊ทธ์ธ์€ ์• ํ”Œ๋ฆฌ์ผ€์ด์…˜์—์„œ ์ž์ฃผ ์‚ฌ์šฉ๋ ๋งŒํ•œ ์†์„ฑ, ํ•จ์ˆ˜, ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋“ฑ์˜ ์‚ฌ์šฉ์„ฑ์„ ๋†’์—ฌ์ฃผ๋Š” ๊ธฐ๋Šฅ์ž…๋‹ˆ๋‹ค. ๋ทฐ ๋ผ์šฐํ„ฐ, ๋ทฐ์—‘์Šค ๋“ฑ์˜ ์ฝ”์–ด ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๊ฐ€ ์ด๋ฏธ ๋ทฐ ํ”Œ๋Ÿฌ๊ทธ์ธ ํ˜•ํƒœ๋กœ ์ œ๊ณต๋˜๊ณ  ์žˆ์Šต๋‹ˆ๋‹ค.

ํ”Œ๋Ÿฌ๊ทธ์ธ ์‚ฌ์šฉ ๋ฐฉ๋ฒ•

๋ทฐ๋กœ ๊ฐœ๋ฐœํ•˜๊ธฐ ์œ„ํ•œ ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋“ค์„ ๊ฒ€์ƒ‰ํ•˜๋‹ค ๋ณด๋ฉด ์•„๋ž˜์™€ ๊ฐ™์€ ์ฝ”๋“œ๋ฅผ ๋งˆ์ฃผ์นœ ์ ์ด ์žˆ์„ ๊ฒ๋‹ˆ๋‹ค.

Vue.use(VueRouter);
Vue.use(Vuex);

์—ฌ๊ธฐ์„œ Vue.use() ์ฝ”๋“œ๊ฐ€ ๋ฐ”๋กœ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์„ค์น˜ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ํ•œ๋ฒˆ ์„ค์น˜ํ•˜๊ณ  ๋‚˜๋ฉด ๋ทฐ ์ธ์Šคํ„ด์Šค์˜ ๋‚ด๋ถ€์— ํ”Œ๋Ÿฌ๊ทธ์ธ์— ์ •์˜ํ•œ ๊ธฐ๋Šฅ์ด ์ถ”๊ฐ€๋ฉ๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๊ณ  ๋‚˜๋ฉด ์ปดํฌ๋„ŒํŠธ ๋‚ด๋ถ€์—์„œ this๋กœ ํ•ด๋‹น ๊ธฐ๋Šฅ์„ ํŽธํ•˜๊ฒŒ ์ ‘๊ทผํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ์ด๋Ÿฐ ์ด์œ ๋กœ ์ž์ฃผ ์‚ฌ์šฉ๋˜๋Š” ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋‚˜ ๊ธฐ๋Šฅ๋“ค์€ ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ ์ •์˜ํ•˜์—ฌ ์‚ฌ์šฉํ•˜๋Š” ๊ฒƒ์ด ์ข‹์Šต๋‹ˆ๋‹ค.

ํ”Œ๋Ÿฌ๊ทธ์ธ ๊ตฌํ˜„ ๋ฐฉ๋ฒ•

๊ทธ๋Ÿผ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์–ด๋–ป๊ฒŒ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š”์ง€ ์‚ดํŽด๋ณด๊ฒ ์Šต๋‹ˆ๋‹ค. ์•„๋ž˜๋Š” ๊ฐ„๋‹จํ•œ ํ”Œ๋Ÿฌ๊ทธ์ธ ์ œ์ž‘ ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค.

// ChartPlugin.js
import Chart from 'chartjs';

export default {
  install(Vue, options) {
    Vue.prototype.ChartJS = Chart;
  }
}

์œ„ ์ฝ”๋“œ๋Š” chartjs๋ผ๋Š” ์™ธ๋ถ€ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ npm ๋ฐฉ์‹์œผ๋กœ ํ”„๋กœ์ ํŠธ์— ์„ค์น˜ํ•œ ํ›„ ํ•ด๋‹น ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ํ”Œ๋Ÿฌ๊ทธ์ธ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ์ฐจํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋ถˆ๋Ÿฌ์™€ Chart๋ผ๋Š” ๋ณ€์ˆ˜์— ๋‹ด์•˜๊ณ  ๋ทฐ ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์„ค์น˜(install)ํ•  ๋•Œ ๋ทฐ์˜ ํ”„๋กœํ† ํƒ€์ž… ์†์„ฑ์œผ๋กœ ํ•ด๋‹น ๋ณ€์ˆ˜๋ฅผ ์—ฐ๊ฒฐํ•˜๋Š” ์ฝ”๋“œ์ž…๋‹ˆ๋‹ค. ๋”ฐ๋ผ์„œ ์•„๋ž˜์™€ ๊ฐ™์ด ๋ทฐ ์ธ์Šคํ„ด์Šค๋ฅผ ์ •์˜ํ•˜๊ธฐ ์ „์— ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์„ค์น˜ํ•˜๋ฉด ์ปดํฌ๋„ŒํŠธ์—์„œ ๋งค๋ฒˆ ์ฐจํŠธ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ๋ฅผ ๋ถˆ๋Ÿฌ์˜ค์ง€ ์•Š๊ณ ๋„ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

import ChartPlugin from './ChartPlugin.js';

Vue.use(ChartPlugin);

new Vue({
  // ...
});

ํŠน์ • ์ปดํฌ๋„ŒํŠธ์—์„œ ์ฐจํŠธ๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์‹ถ์„ ๋•Œ ์•„๋ž˜์™€ ๊ฐ™์ด this.ChartJS๋กœ ์ฐจํŠธ๋ฅผ ํ˜ธ์ถœํ•ฉ๋‹ˆ๋‹ค.





ย 






<!-- Home.vue -->
<script>
export default {
  mounted() {
    new this.ChartJS(this.$refs.myChart, {
      // ...
    })
  }
}
</script>

ํ”Œ๋Ÿฌ๊ทธ์ธ ๋ณ€์ˆ˜๋ช…์€ $_๊ฐ€ ์ข‹์Šต๋‹ˆ๋‹ค. ๋ทฐ ๋ผ์ด๋ธŒ๋Ÿฌ๋ฆฌ ๋‚ด๋ถ€์ ์œผ๋กœ ์‚ฌ์šฉํ•˜๋Š” private ๋ณ€์ˆ˜๋Š” _๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๊ณ , ์‚ฌ์šฉ์ž์—๊ฒŒ ๋…ธ์ถœ์‹œํ‚ค๋Š” ์ธ์Šคํ„ด์Šค ๊ด€๋ จ ์†์„ฑ์€ $๋ฅผ ์‚ฌ์šฉํ•˜๊ณ  ์žˆ๊ธฐ ๋•Œ๋ฌธ์ž…๋‹ˆ๋‹ค. ์ด ๋‚ด์šฉ์€ ๋ทฐ ๊ณต์‹ ๋ฌธ์„œ์˜ ์Šคํƒ€์ผ ๊ฐ€์ด๋“œ๋ฅผ ๋”ฐ๋ž์Šต๋‹ˆ๋‹ค.