플러그인 개발
레거시 문서
출처: 문서
본문
레거시 문서
이 페이지는 @backstage/core-plugin-api의 createPlugin, createRoutableExtension, RouteRef를 포함한 이전 프론트엔드 시스템의 플러그인 개발 패턴을 다뤄요. 새 프론트엔드 시스템에 해당하는 내용은 Building Frontend Plugins와 Routes를 참고하세요.
Backstage 플러그인은 Backstage 앱에 기능을 제공해요.
각 플러그인은 자급자족하는 웹 앱으로 취급되며 거의 모든 유형의 콘텐츠를 포함할 수 있어요. 플러그인은 모두 공통 플랫폼 API와 재사용 가능한 UI 컴포넌트 집합을 사용해요. 플러그인은 일반 브라우저 API를 사용하거나 외부 모듈에 의존해 작업을 수행하여 외부 소스에서 데이터를 가져올 수 있어요.
개발 가이드라인
- 플러그인을
TypeScript로 작성하는 것을 고려하세요. - 플러그인의 디렉터리 구조를 관리하기 쉽게 계획하세요.
- Backstage 컴포넌트 사용을 선호하고, 그렇지 않으면 Material UI를 사용하세요.
- 새 API를 만들기 전에 공유 Backstage API를 확인하세요.
플러그인 개념 / API
라우팅
각 플러그인은 라우터블 확장을 내보낼 수 있으며, 이는 앱으로 import되어 경로에 마운트돼요.
먼저 확장의 마운트 포인트 역할을 할 RouteRef 인스턴스가 필요해요. 이는 useRouteRef를 사용해 확장 페이지로의 링크를 만들기 위해 자체 플러그인 안에서, 그리고 다른 플러그인이 확장에 연결하기 위해 사용될 수 있어요.
import 순환을 피하기 위해 이것들을 별도의 최상위 src/routes.ts 파일에 두는 것이 좋아요. 예를 들어 이렇게요.
/* src/routes.ts */import { createRouteRef } from '@backstage/core-plugin-api';// Note: This route ref is for internal use only, don't export it from the pluginexport const rootRouteRef = createRouteRef({ id: 'Example Page',});
이제 RouteRef가 있으니 src/plugin.ts로 import하고, createPlugin으로 플러그인 인스턴스를 만들며, @backstage/core-plugin-api의 createRoutableExtension으로 라우터블 확장을 만들고 감쌉니다.
/* src/plugin.ts */import { createPlugin, createRouteRef } from '@backstage/core-plugin-api';import ExampleComponent from './components/ExampleComponent';// Create a plugin instance and export this from your plugin packageexport const examplePlugin = createPlugin({ id: 'example', routes: { root: rootRouteRef, // This is where the route ref should be exported for usage in the app },});// This creates a routable extension, which are typically full pages of content.// Each extension should also be exported from your plugin package.export const ExamplePage = examplePlugin.provide( createRoutableExtension({ name: 'ExamplePage', // The component needs to be lazy-loaded. It's what will actually be rendered in the end. component: () => import('./components/ExampleComponent').then(m => m.ExampleComponent), // This binds the extension to this route ref, which allows for routing within and across plugin extensions mountPoint: rootRouteRef, }),);
이 확장은 보통 최상위 <FlatRoutes> 안에 배치되어 앱에서 다음과 같이 import되고 사용될 수 있어요.
<Route path="/any-path" element={<ExamplePage />} />