Frontend Academy · 강의

플러그인 시스템: app.use()

install 메서드를 포함한 객체로 Vue 플러그인을 만들고, 전역 컴포넌트와 디렉티브를 등록하며, 전체 애플리케이션에 값을 제공합니다.

플러그인 시스템: app.use()은(는) CoddyKit의 무료 Frontend Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 Frontend Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

Vue 플러그인이란 무엇인가요

플러그인은 Vue 앱에 설치하는 재사용 가능한 기능입니다. 전역 컴포넌트와 지시문을 등록하거나, 값을 제공하거나, 프로토타입 방식의 도우미(router, i18n, pinia)를 추가할 수 있습니다. 라이브러리는 플러그인을 통해 Vue와 통합됩니다.

플러그인 형태

플러그인은 install(app, options) 메서드를 가진 객체이거나, 설치 메서드처럼 동작하는 함수입니다.

// MyPlugin.ts
export default {
  install(app, options) {
    // Configure things here
  }
};

플러그인 설치

Vue 앱 인스턴스에서 app.use(plugin, options)을 호출하십시오.

import { createApp } from 'vue';
import App from './App.vue';
import MyPlugin from './plugins/MyPlugin';

const app = createApp(App);
app.use(MyPlugin, { theme: 'dark' });
app.mount('#app');

플러그인 사용 사례: 전역 컴포넌트

작은 컴포넌트를 여러 개 전역으로 등록하면 사용하는 쪽에서 각각 가져오지 않아도 됩니다.

// plugins/iconPack.ts
import IconChevron from './IconChevron.vue';
import IconClose from './IconClose.vue';
import IconUser from './IconUser.vue';

export default {
  install(app) {
    app.component('IconChevron', IconChevron);
    app.component('IconClose', IconClose);
    app.component('IconUser', IconUser);
  }
};

// main.ts
app.use(iconPack);

플러그인 사용 사례: 전역 지시문

사용자 지정 지시문을 한 번 등록하면 앱 전체에서 사용할 수 있습니다.

export default {
  install(app) {
    app.directive('focus', { mounted: (el) => el.focus() });
    app.directive('click-outside', clickOutsideDirective);
  }
};

플러그인 사용 사례: provide()

모든 컴포넌트가 주입할 수 있는 앱 전체의 값을 제공합니다. API 클라이언트와 구성에 흔히 사용됩니다.

import type { InjectionKey } from 'vue';
import { ApiClient } from './ApiClient';

export const ApiKey: InjectionKey<ApiClient> = Symbol('api');

export default {
  install(app, { baseURL }) {
    const api = new ApiClient({ baseURL });
    app.provide(ApiKey, api);
  }
};

// Anywhere:
const api = inject(ApiKey)!;

실제 플러그인: Pinia, Vue Router, i18n

Vue 생태계의 주요 라이브러리는 플러그인입니다.

import { createPinia } from 'pinia';
import router from './router';
import { createI18n } from 'vue-i18n';

const app = createApp(App);
app.use(createPinia());
app.use(router);
app.use(createI18n({ /* ... */ }));

플러그인 옵션

플러그인은 설치할 때 동작을 구성할 수 있도록 옵션을 받습니다.

app.use(MyPlugin, {
  apiUrl: 'https://api.example.com',
  enableLogs: true,
  theme: 'dark'
});

// Inside the plugin:
install(app, options) {
  if (options.enableLogs) console.log('plugin installed');
}

TypeScript 타입 확장

globalProperties나 주입 도우미를 사용할 때는 Vue의 타입을 확장하여 사용하는 쪽에서 자동 완성을 사용할 수 있게 하십시오.

// types.d.ts
declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $api: ApiClient;
  }
}

// In plugin:
install(app) {
  app.config.globalProperties.$api = new ApiClient();
}

globalProperties — 이전 방식

app.config.globalProperties.$foo는 Options API 컴포넌트와 템플릿에서 값을 this.$foo로 노출합니다. Composition API에서는 inject()를 권장합니다.

멱등적 설치

두 번 설치해도 오류가 발생하지 않도록 플래그를 확인하거나, 자연스럽게 중복을 제거하는 Symbol 기반 provide 키를 사용하십시오.

직접 플러그인 작성하기

여러 앱에서 동일한 구성(인증 래퍼, 원격 측정 설정, 디자인 토큰)을 재사용한다면 플러그인으로 묶으십시오. 깔끔한 install(app, options) 서명으로 npm에 게시하는 것이 재사용 가능한 기능을 제공하는 Vue 방식입니다.

빠른 확인

플러그인을 설치하려면 Vue 앱 인스턴스에서 어떤 메서드를 호출하나요?

복습: Vue 플러그인

플러그인은 install(app, options)을 가진 객체입니다. app.use(plugin, options)으로 설치합니다. 전역 컴포넌트와 지시문을 등록하고, 값을 제공하며, 라이브러리를 구성할 때 사용합니다. Pinia, Vue Router, i18n은 모두 플러그인입니다. $ 접두사 속성을 위해 ComponentCustomProperties를 확장하십시오. install은 멱등적으로 유지하십시오.

자주 묻는 질문

“플러그인 시스템: app.use()” 강의는 무료인가요?

네 — “플러그인 시스템: app.use()” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 Frontend Academy 강의 전체를 잠금 해제할 수 있습니다. Frontend Academy 강의에는 총 4개의 강의가 포함되어 있습니다.

“플러그인 시스템: app.use()”에서 뭘 배우나요?

install 메서드를 포함한 객체로 Vue 플러그인을 만들고, 전역 컴포넌트와 디렉티브를 등록하며, 전체 애플리케이션에 값을 제공합니다. 브라우저에서 직접 실행하는 실습 코드로 Frontend Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.

Frontend Academy을(를) 시작하는 데 경험이 필요한가요?

사전 경험은 필요하지 않습니다. CoddyKit의 Frontend Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.

“플러그인 시스템: app.use()” 강의는 얼마나 걸리나요?

대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.

이 Frontend Academy 강의에서 코드를 작성하고 실행할 수 있나요?

네. 모든 Frontend Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.

이 강의의 모든 강의

← Frontend Academy(으)로 돌아가기