Vue 공통 함수 세팅 및 사용법

프론트 개발을 하면 필수적으로 많이 사용하는 함수들을 모아서 공통 js 파일을 만든다.

Vue에서는 어떻게 사용하는지 정리하도록 하겠다.

 

우선 공통 js를 만들기 전에 플러그인이라는 개념에 대해 알아야한다.(전역 수준으로 함수 만들어서 사용할거니까...) 따로 정리하진 않겠다.

https://kr.vuejs.org/v2/guide/plugins.html

플러그인 — Vue.js

플러그인으로 사용할 공통 js 파일을 plugins이나 assets이나 본인이 선호하는 곳에 아래와 같이 만들어준다.

import Vue from 'vue'

export default{
	install(Vue) {
    	const pt = Vue.prototype;
        prototype.$isNull = common.isNull
    }
}

export const common = {
	isNull: (value) => {
    	-- null 체크 로직 --
    }
}

그리고 main.js에서 해당 플러그인을 추가해준다.

import Vue from 'vue'
import common from '경로/common.js'

Vue.use(common)

꽤 간단하게 설정이 가능하다.

 

혹시나 다른 js 파일에서 공통 메서드를 사용해야 한다면 import 해서 사용하면 된다.

 

* 프로토타입에 해당 함수를 정의하면서 ' $ ' 를 붙였는데 그 이유는 뭘까?

' $ '는 모든 인스턴스에서 사용 가능한 프로퍼티라고 알려주는 뷰에서 사용하는 방법이다! 다른 요소들과 충돌을 예방한다~!

만약 원하는 기호나 문자가 있다면 그렇게 사용하면 된다. ( 공식 문서나 레퍼런스가 ' $ '로 주로 되어 있다. )