logologo
시작
가이드
개발
플러그인
API
English
简体中文
日本語
한국어
Deutsch
Français
Español
Português
Русский
Italiano
Türkçe
Українська
Tiếng Việt
Bahasa Indonesia
ไทย
Polski
Nederlands
Čeština
العربية
עברית
हिन्दी
Svenska
시작
가이드
개발
플러그인
API
logologo

빠른 시작

플러그인 개발 개요
첫 플러그인 작성
프로젝트 디렉토리 구조

서버사이드 개발

개요
Plugin 플러그인
Collections 데이터 테이블
Database 데이터베이스 작업
DataSourceManager 데이터 소스 관리
ResourceManager 리소스 관리
ACL 권한 제어
Middleware 미들웨어
Cache 캐시
Event 이벤트
Context 요청 컨텍스트
Migration 업그레이드 스크립트
Logger 로그
I18n 국제화
Command 커맨드 라인
CronJobManager 예약 작업 관리
Test 테스트

클라이언트사이드 개발

개요
Plugin 플러그인
Context 컨텍스트
Router 라우터
ACL 권한 제어
DataSourceManager 데이터 소스 관리
Resource 리소스
Request 요청
Styles & Themes 스타일 & 테마
Logger 로그
I18n 국제화
Test 테스트

기타

플러그인 업그레이드 가이드
언어 목록
의존성 관리
빌드
Previous Page개요
Next PageContext 컨텍스트
TIP

이 문서는 AI로 번역되었습니다. 부정확한 내용이 있을 경우 영어 버전을 참조하세요

#플러그인

NocoBase에서 **클라이언트 플러그인(Client Plugin)**은 프런트엔드 기능을 확장하고 사용자 정의하는 주요 방법입니다. @nocobase/client에서 제공하는 Plugin 기본 클래스를 상속받아, 개발자는 다양한 생명주기 단계에서 로직을 등록하고, 페이지 컴포넌트를 추가하며, 메뉴를 확장하거나 서드파티 기능을 통합할 수 있습니다.

#플러그인 클래스 구조

가장 기본적인 클라이언트 플러그인 구조는 다음과 같습니다.

import { Plugin } from '@nocobase/client';

export class PluginHelloClient extends Plugin {
  async afterAdd() {
    // 플러그인이 추가된 후 실행됩니다.
    console.log('Plugin added');
  }

  async beforeLoad() {
    // 플러그인 로드 전에 실행됩니다.
    console.log('Before plugin load');
  }

  async load() {
    // 플러그인이 로드될 때 실행되며, 라우트, UI 컴포넌트 등을 등록합니다.
    console.log('Plugin loaded');
  }
}

export default PluginHelloClient;

#생명주기 설명

각 플러그인은 브라우저 새로고침 또는 애플리케이션 초기화 시 다음 생명주기를 순서대로 거칩니다.

생명주기 메서드실행 시점설명
afterAdd()플러그인이 플러그인 관리자에 추가된 직후 실행됩니다.이때 플러그인 인스턴스는 생성되었지만, 모든 플러그인이 초기화를 완료한 것은 아닙니다. 설정 읽기 또는 기본 이벤트 바인딩과 같은 경량 초기화에 적합합니다.
beforeLoad()모든 플러그인의 load() 메서드 실행 전에 실행됩니다.모든 활성화된 플러그인 인스턴스(this.app.pm.get())에 접근할 수 있습니다. 다른 플러그인에 의존하는 준비 로직을 실행하는 데 적합합니다.
load()플러그인이 로드될 때 실행됩니다.모든 플러그인의 beforeLoad() 메서드가 완료된 후 이 메서드가 실행됩니다. 프런트엔드 라우트, UI 컴포넌트 등 핵심 로직을 등록하는 데 적합합니다.

#실행 순서

브라우저를 새로고침할 때마다 afterAdd() → beforeLoad() → load() 순서로 실행됩니다.

#플러그인 컨텍스트 및 FlowEngine

NocoBase 2.0부터 클라이언트 측 확장 API는 주로 FlowEngine에 집중되어 있습니다. 플러그인 클래스에서는 this.engine을 통해 엔진 인스턴스를 가져올 수 있습니다.

// load() 메서드에서 엔진 컨텍스트에 접근합니다.
async load() {
  const { app, router, apiClient } = this.engine.context;
  console.log('Current app:', app);
}

더 자세한 내용은 다음을 참조하세요:

  • FlowEngine
  • 컨텍스트