[vue3 공식문서 번역]Reusability.3.Plugins

Introduction

플로그인들은 뷰에 일반적으로 앱레벨의 기능을 추가하는 자체-포함 코드 이다. 다음은 플로그인을 인스톨하는 방법이다:

import { createApp } from 'vue'

const app = createApp({})

app.use(myPlugin, {
  // 선택적인 옵션들
})

플러그인은 install() 메소드를 노출하는 객체나, 단순히 인스톨 함수로 동작하는 함수로 정의된다. 인스톨 함수는 app.use() (있다면) 로 넘겨진 추가접인 옵션들과 함께 앱 인스턴스를 받는다:

const myPlugin = {
  install(app, options) {
    // 앱을 설정
  }
}

플러그인을 위한 엄격하게 정의된 범위는 없지만, 플러그인이 유용한 일번적인 시나리오는 다음과 같다:

1. app.component() 나 app.derective()로 커스텀 지시어나 더 글로벌한 컴포넌트들이나 하나를 등록한다.
2. app.provide()를 호출해서 앱 전체에 걸쳐 리소스를 주입가능하도록 만든다.
3. 메소드나 일부 전역 인스턴스 프로퍼티들을 app.config.globalProperties에 첨부해서 더한다.
4. 위 조합을 수행하는 라이브러리(예: vue-router).

Writing a Plugin

더 이해하기 위해 어떻게 vue.js 플러그인들을 만드는지 알아보자, i18n( Internationalization의 약어) 문자열을 보여주는 아주 간단한 버전의 플로그인을 만들어보자. 

 

플러그인 객체를 세팅하는것 부터 시작해보자. 로직을 담고 분리하기 위해 아래 보이는 것처럼 분리된 파일을 만들고 export 하는 것이 추천된다.

// plugins/i18n.js
export default {
  install: (app, opitions) => {
    // Plugin code goes here
  }
}

전체 애플리케이션에서 사용가능한 키들을 번역하는 함수를 만들기 원해서, 이것을 app.config.globalProperties를 사용해서 노출할 것이다. 이 함수는 유저 제공 옵션에서 번영된 문자열을 찾는 일에 사용하는 점으로 구분된 키 문자열을 받는다.

// plugins/i18n.js
export default {
  install: (app, options) => {
    // 전역으로 사용가능한 $translate() 메소드를 주입
    app.config.globalProperties.$translate = (key) => {
      // 'options'에 중접된 프로퍼티를 되찾음
      // 'key'를 path로 사용함
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
  }
}

플러그인은 그들이 플러그인을 사용할 때 옵션을 통해 유저들이 번역된 키들이 담겨있는 객체를 넘기는 것을 기대한다. 그래서 다음과 같이 사용된다:

import i18nPlugin from './plugins/i18n'

app.use(i18nPlugin, {
  greetings: {
    hello: 'Bonjour!'
  }
})

$translate 함수는 greetings.hello 같은 문자열을 받는다. 유저가 제공한 설정을 보고, 번역된 값을 리턴한다 - 이 경우에는 Bonjour! :

<h1>{{ $translate9'greetings.hello') }}</h1>

See also: Augmenting Global Properties

TIP
앱전체에 걸쳐 사용되는 다른 플러그인들에 의해, 너무 많은 전역 프로퍼티들이 삽입된다면, 혼란을 초래할 수 있으므로, 전역 프로퍼티들은 거의 사용하지 마라. 

Provide / Inject with Plugins

 플러그인들은 플러그인의 유저에게 어트리뷰트나 함수를 제공하는 inject를 사용하는 것을 허락한다. 예를들면, 애플리케이션이 번역 객체를 사용할 수 있는 options 파라미터로 접근할 수 있게 허락한다.

// plugins/i18n.js
export defualt {
  install: (app, options) => {
    app.config.globalProperties.$translate = (key) => {
      return key.split('.').reduce((o, i) => {
        if (o) return o[i]
      }, options)
    }
    
    app.provide('i18n', options)
  }
}

플러그인 유저는 i18n key를 사용하는 컴포넌트로 플로그인 옵션을 삽입할 수 있다:

<script setup>
import { inject } from 'vue'

const i18n = inject('i18n')

console.log(i18n.greetings.hello)
</script>