플러그인 및 나름의 분석

1. Vue 플러그인 개념.

일반적으로 vue는 단일 컴포넌트의 활동에 중점을 두고 있다. 플러그인의 경우 여러 컴포넌트들이 통합된 기능을 사용해야 할때 쓴다. vuex나 router 처럼. 아니면 통째로 뭔가 만들어진걸 내놓거나.

2. 플러그인 작성법

일단 플러그인을 등록하려면 Vue 인스턴스에다가 install 메서드를 등록해야 한다. 첫번째 매개변수는 Vue 인스턴스이고 두번째 매개변수는 jquery plugin 처럼 옵션들을 넣는 곳이다. 아래 본인이 작성한 코드의 일부분을 예시.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

export default { install(Vue, options) { let dataStore = new Vue({ data: { memo: [], pointer: [0], name: options.name } }); Vue.prototype.$StickyPlugin = new StickyPlugin(Vue, dataStore); Vue.prototype.$StickyPlugin.addDirective(); Vue.prototype.$StickyPlugin.loadData(); Vue.filter("date", function(value) { return value.toISOString ? value.toISOString().slice(0, value.toISOString().indexOf("T")) : value.slice(0, value.indexOf("T")); }); } };

위의 6번을 보면 Vue의 모든 인스턴스들이 플러그인을 참조할 수 있도록 달아놓는 부분을 확인할 수 있다. 이 때 $기호를 앞에다가 붙이는건 전역 프로퍼티이고 서비스로 제공해주는 듯한것은 저렇게 $ 붙였음 좋겠다고 스타일가이드에 쓰여져 있다. (이건 예전 angularJS가 그랬는데 다른 언어 및 프레임워크도 비슷한지는 모르겠다)

이 플러그인 안에는 바닐라스크립트(순수 자바스크립트)로 해당 원하는 내용을 개발하면 된다. 완벽히 분석한건 아니지만 대표적인 플러그인 두 가지의 예시를 들려 한다.

vue-router의 경우는 location.href 에 따라 미리 등록한 <router-link> 들이 어느 컴포넌트의 render 함수를 하기와 같이 바꿔치기(?)할까 정하는 것 같다. 하기의 4번 라인 처럼 바꿔치기가 가능할 것이다.

1 2 3 4 5

window.app = new Vue({ el: "#app", // main.vue 에서 만든 내용을 render 함수에서 덧씌워서 쓰겠단 의미 render: h => h(App) });

vuex의 경우는  추정되는 원리(?)는 이벤트버스와 비슷한데 데이터를 공유할만한 하나의 인스턴스를 만들어 놓고 거기에 있는 data를 편집 할 수 있도록 한 것 같다. 

다만 의문점은 data 안의 프로퍼티들 이 Array가 아니면 Observer 가 붙지 않아 실제 사용하는 쪽이 값이 변경되었을때 리렌더를 하지 않는다. 이건 나중에 Observer 에 대해 더 공부한 후에 관련 포스팅을 해야 할 것 같다. 하기 는 내가 비슷하게 만든 플러그인의 예시이다.

1 2 3 4 5 6 7 8 9

export default { install(Vue, options) { let dataStore = new Vue({ data: { memo: [], pointer: [0], name: options.name } }); Vue.prototype.$StickyPlugin = new StickyPlugin(Vue, dataStore); // 중략... } };

3. 플러그인 사용법

플러그인은 위에 설명했다 시피 Vue 메인 인스턴스에 등록 해주어야 한다. 간단한 예시를 밑에 남긴다.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

import Vue from "vue"; import StickyPlugin from "./../dist/sticky"; import App from "./main.vue"; import "es6-promise/auto"; Vue.use(StickyPlugin.sticky, { // 등록1 name: "Sample" }); window.app = new Vue({ el: "#app", // main.vue 에서 만든 내용을 render 함수에서 덧씌워서 쓰겠단 의미 render: h => h(App), StickyPlugin: StickyPlugin.sticky // 등록2 });