내장 데이터 참조
내장 데이터 참조 (Built-in data refs)
확장 데이터 참조를 더 잘 이해하려면 먼저 해당 아키텍처 섹션을 읽어 주세요.
출처: 문서
본문
확장 데이터 참조를 더 잘 이해하려면 먼저 해당 아키텍처 섹션을 읽어 주세요.
내장 확장 데이터 참조
데이터 참조는 확장의 입력과 출력을 정의하는 데 도움을 줘요. 데이터 참조는 id를 통해 고유하게 식별돼요. 데이터 참조를 통해 확장의 입력/출력에 강력한 유형이 강제돼요.
reactElement
| id | type |
|---|---|
core.reactElement |
JSX.Element |
reactElement 데이터 참조는 React 요소의 확장 입력/출력을 정의하는 데 사용할 수 있어요. 예시 사용법은 다음과 같을 수 있어요.
import { createExtension, coreExtensionData,} from '@backstage/frontend-plugin-api';const examplePage = createExtension({ name: 'example', output: [coreExtensionData.reactElement], factor() { return [coreExtensionData.reactElement(<h1>Example</h1>)]; },});
title
| id | type |
|---|---|
core.title |
string |
title 데이터 참조는 문자열 제목의 확장 입력/출력을 정의하는 데 사용할 수 있어요.
icon
| id | type |
|---|---|
core.icon |
IconElement |
icon 데이터 참조는 아이콘 요소의 확장 입력/출력을 정의하는 데 사용할 수 있어요. 유형은 @backstage/frontend-plugin-api의 IconElement(JSX.Element | null)예요. 아이콘은 정확히 24x24 픽셀이어야 해요.
routePath
| id | type |
|---|---|
core.routing.path |
string |
routePath 데이터 참조는 문자열 경로의 확장 입력/출력을 정의하는 데 사용할 수 있어요.
routeRef
| id | type |
|---|---|
core.routing.ref |
RouteRef |
routeRef 데이터 참조는 라우트 참조의 확장 입력/출력을 정의하는 데 사용할 수 있어요.
기타 데이터 참조 (Other data references)
플러그인을 만들면서 마주칠 수 있는 프론트엔드 시스템의 다른 데이터 참조들이 있어요. 대부분은 시스템 핵심 내부의 사용 사례를 위해 만들어졌지만, 플러그인에서도 사용할 수 있어요.