[vue] plugin 만들기

plugin이란

plugin은 기능들을 전역, 즉 여러 컴포넌트에서 사용할 수 있도록 한다.
자세한 내용은 공식문서를 확인.

사용법

사용하기전 알아야할 것
Vue.prototype.$_를 사용하는데, 이것은 코딩 컨벤션이므로 형식을 지켜야 한다.

1) ExamplePlugin.js

const methods = {
	formatReplaceMassage: (substr, newSubstr) => {
		return substr.replace("A", newSubstr)
	},
}

export default {
	install(Vue) {
		Vue.prototype.$formatReplaceMassage = methods.formatReplaceMassage
	},
}

알아보기 편리하도록 methods라는 변수 안에 사용할 메서드를 정의했다.
main.js에서 ExamplePlugin.js가 사용될 수 있도록 코딩을 해야 사용할 수 있다.

먼저 코드 설명을 하자면,
formatReplaceMassage라는 이름을 사용해 프로토타입을 만들어서, 기능을 편리하게 사용할 수 있도록 선언했다.
methods라는 변수에 메서드를 담았기 때문에 methods.formatReplaceMassage으로 methods 변수 안에 있는 정의한 메서드를 가져온다.

사용법은 3)을 확인해보자.

2) main.js

// 파일 경로는 환경에 따라 다른데, 현재 plugins폴더에 ExamplePlugin.js파일을 둔 상태다.
import ExamplePlugin from "@/plugins/ExamplePlugin.js"

// 글로벌 메소드인 `Vue.use()`로 플러그인을 사용한다.
// 예를 들어, Vue.use(Example)하면 "Example.install(Vue)"가 호출된다.
Vue.use(ExamplePlugin)

main.js에 ExamplePlugin.js를 불러옴으로써 plugin을 사용할 준비가 끝난 것이다.

3) ex.vue

<template>
	<div>{{ $formatReplaceMassage("ABC", "D") }}</div>
</template>

script나 따로 method정의 없이도 ex.vue에서 사용한 것처럼 간편하게 사용할 수 있는 것이 plugin이다.
출력 결과는 DBC로 결과가 도출될 것이다.
왜냐하면, formatReplaceMassage라는 메서드는 substr에 파라미터값으로 ABC라는 문자가 들어왔을 때, A의 값을 newSubstr 값으로 치환해주는 것이기 때문이다.

마치며

plugin은 처음 접했을 때 혁신적이었다.
plugin을 모듈화하면 훨씬 더 가독성이나 사용성이 높아지고, 효율적인 코드를 만들 수 있게 된다.
점점 코딩을 하면서 어떻게 하면 더 효율적인 코드가 되는지 생각해보게 되는 것 같다.