공통 확장 블루프린트
공통 확장 블루프린트 (Common Extension Blueprints)
이 섹션은 Backstage 프론트엔드 플러그인을 구축할 때 사용할 수 있는 많은 확장 블루프린트를 다뤄요.
출처: 문서
본문
이 섹션은 Backstage 프론트엔드 플러그인을 구축할 때 사용할 수 있는 많은 확장 블루프린트를 다뤄요.
@backstage/frontend-plugin-api의 확장 블루프린트
이것들은 Backstage 프론트엔드 프레임워크 자체가 제공하는 확장 블루프린트예요.
Api - 참조
API 확장은 앱에서 Utility API 팩토리를 추가하거나 재정의하는 데 사용돼요. 플러그인이 내부 및 공유 API 모두에 흔히 사용해요. 프레임워크가 제공하는 많은 내장 Api 확장도 있으며 이들을 재정의할 수 있어요.
Page - 참조
페이지 확장은 앱의 특정 라우트에 콘텐츠를 제공해요. 기본적으로 페이지는 루트 라우트를 렌더링하는 앱 라우트 확장에 부착돼요. 페이지는 플러그인의 title과 icon을 기본값으로 자동 상속하며, PageBlueprint 매개변수로 페이지별로 재정의할 수 있어요.
페이지에서 하위 페이지를 활성화하려면 loader 매개변수를 생략해 하위 페이지를 탭으로 렌더링하는 내장 기본 구현을 사용하거나, 하위 페이지 입력을 명시적으로 처리하는 커스텀 loader를 제공할 수 있어요.
SubPage - 참조
하위 페이지 확장은 부모 페이지 내에 탭 콘텐츠를 만들어요. 페이지 확장의 pages 입력에 부착되고 페이지 헤더에 탭으로 렌더링돼요. 각 하위 페이지는 (부모 페이지에 상대적인) path, 탭용 title, 선택적 icon을 가져요. 콘텐츠는 loader 함수를 통해 지연 로드돼요.
PluginHeaderAction - 참조
플러그인 헤더 액션 확장은 페이지 헤더에 나타나는 플러그인 범위의 액션을 제공해요. 이들은 제공하는 플러그인에 자동으로 범위가 지정되며, 그 플러그인에 속한 모든 페이지의 헤더에 나타나요. 액션은 React 요소를 반환하는 loader 함수를 통해 지연 로드돼요.
@backstage/frontend-plugin-api/alpha의 확장 블루프린트
Plugin Wrapper - 참조
플러그인 래퍼를 사용하면 플러그인의 일부로 렌더링되는 모든 요소를 감쌀 컴포넌트를 설치할 수 있어요. 쿼리 클라이언트 같은 전역 제공자를 추가해야 한다면 유용할 수 있어요. 제공된 래퍼는 각 감싸진 플러그인 요소마다 별도 요소로 렌더링되므로, 래퍼 인스턴스 간에 상태를 공유하려면 Utility API 같은 중앙 저장소를 사용해야 해요.
@backstage/plugin-app-react의 확장 블루프린트
SignInPage - 참조
로그인 페이지 확장은 커스텀 로그인 페이지를 구현하는 단일 목적을 가져요. 항상 앱 루트 확장에 부착되며, 사용자가 로그인할 때까지 앱의 나머지 부분보다 먼저 렌더링돼요.
SwappableComponent - 참조
교체 가능한 컴포넌트는 앱과 플러그인의 컴포넌트 구현을 교체하는 데 사용되는 확장이에요.
Theme - 참조
테마 확장은 앱에 커스텀 테마를 제공해요. 항상 앱 확장에 부착되며, 언제든지 앱에 원하는 만큼 많은 테마 확장을 설치할 수 있고 사용자가 사용할 테마를 선택하게 해요.
Icons - 참조
아이콘 번들 확장은 앱에 아이콘을 교체하거나 새로 제공하는 기능을 제공해요. 위 블루프린트를 사용해 앱에 설치할 수 있는 새 확장 인스턴스를 만들 수 있어요.
Translation - 참조
번역 확장은 앱에 커스텀 번역 메시지를 제공해요. 기본 영어 메시지를 커스텀으로 재정의하는 데 사용할 수도 있고, 추가 언어에 대한 번역을 제공하는 데 사용할 수도 있어요.
NavContent - 참조
Nav 콘텐츠 확장을 사용하면 전체 내비게이션 바를 자체 컴포넌트로 교체할 수 있어요. 항상 앱 nav 확장에 부착돼요.
커스텀 컴포넌트는 특정 항목을 커스텀 위치에 배치하기 위한 take(id)와 rest() 메서드가 있는 컬렉션인 navItems prop을 받아요. Nav 항목은 페이지 확장에서 자동으로 발견되며, 메타데이터(제목, 아이콘)는 페이지 구성, nav 항목 확장 또는 플러그인 기본값에서 옵니다. 특정 항목을 확장 ID로 가져오려면 navItems.take('page:home')을, 나머지 항목을 모두 얻으려면 navItems.rest()를 사용하세요. 폐기된 items prop(평면 목록)은 하위 호환성을 위해 계속 지원돼요.
Router - 참조
라우터 확장을 사용하면 앱이 사용하는 라우터 컴포넌트를 교체할 수 있어요. 항상 앱 루트 확장에 부착돼요.
@backstage/plugin-catalog-react/alpha의 확장 블루프린트
이것들은 Catalog 플러그인이 제공하는 확장 블루프린트예요.
EntityCard - 예시
catalog 플러그인의 엔터티 페이지에 표시할 엔터티 카드를 만들어요. EntityCardBlueprint로 export돼요.
레거시 엔터티 카드 확장을 새 시스템으로 변환하기 위해 @backstage/core-compat-api의 convertLegacyEntityCardExtension을 사용하지 마세요. 대신 EntityCardBlueprint를 직접 사용하세요. 레거시 변환기는 제어하지 않는 서드파티 플러그인을 적응시키는 데만 의도된 것이며, 블루프린트를 직접 사용하는 것만큼 좋은 결과를 내지 못해요.
EntityContent - 예시
catalog 플러그인의 엔터티 페이지에 표시할 엔터티 콘텐츠를 만들어요. EntityContentBlueprint로 export돼요.
다음을 위한 group과 icon 같은 선택적 매개변수를 지원해요.
-
group: string | false — 콘텐츠를 엔터티 페이지의 탭 그룹(예: "overview", "quality", "deployment" 또는 커스텀 ID)과 연결해요.
app.extensions[...].config.group을 사용해 app-config로 설치별로 재정의하거나 비활성화할 수 있으며,false는 그룹화를 제거해요. -
icon: string — 탭 아이콘을 설정해요. 주의: 문자열을 제공하면 아이콘이 앱의 IconsApi를 통해 조회돼요. 사용하는 아이콘 ID를 사용할 수 있도록 앱에서 아이콘 번들을 활성화/설치했는지 확인하세요(위 Icons 블루프린트 참조).
엔터티 페이지 탭에 아이콘을 렌더링하려면 페이지도 앱 구성을 통해 아이콘이 활성화되어 있어야 해요. catalog 엔터티 페이지 구성(page:catalog/entity로 만든)에 showNavItemIcons: true를 설정하세요. 예시:
app: extensions: # Entity page - page:catalog/entity: config: # Enable tab- and group-icons showNavItemIcons: true # Optionally override default groups and their icons groups: - overview: title: Overview icon: dashboard - documentation: title: Docs icon: description
레거시 엔터티 콘텐츠 확장을 새 시스템으로 변환하기 위해 @backstage/core-compat-api의 convertLegacyEntityContentExtension을 사용하지 마세요. 대신 EntityContentBlueprint를 직접 사용하세요. 레거시 변환기는 제어하지 않는 서드파티 플러그인을 적응시키는 데만 의도된 것이며, 블루프린트를 직접 사용하는 것만큼 좋은 결과를 내지 못해요.
EntityContextMenuItem - 예시
엔터티 컨텍스트 메뉴 안에 메뉴 항목을 만들어요. EntityContextMenuItemBlueprint로 export돼요.
API 참조를 참고하세요.
@backstage/plugin-search-react/alpha의 확장 블루프린트
이것들은 Search 플러그인이 제공하는 확장 블루프린트예요.
SearchResultListItem - 예시
다양한 유형의 검색 결과에 대한 검색 결과 목록 항목을 만들어 검색 결과 목록에 표시해요. SearchResultListItemBlueprint로 export돼요.