플러그인으로 앱 구성하기
플러그인으로 앱 구성하기 (이전 프론트엔드 시스템)
이 문서는 여전히 이전 프론트엔드 시스템을 사용하는 Backstage 앱을 위한 내용이에요. 앱에서 새 프론트엔드 시스템을 사용한다면 현재 가이드를 대신 읽어보세요. 여기서는 이전 프론트엔드 시스템에서 기존 플러그인을 앱에 추가하고 사이드바에 등록하는 방법을 설명드릴게요.
출처: 문서
본문
이 문서는 여전히 이전 프론트엔드 시스템을 사용하는 Backstage 앱을 위한 내용이에요. 앱에서 새 프론트엔드 시스템을 사용한다면 현재 가이드를 대신 읽어보세요.
대상 독자: 개발자
Backstage 플러그인은 주로 TypeScript, Node.js, React로 작성돼요. 이 기술들에 대한 이해가 있다면 Backstage를 커스터마이징하는 여정에 큰 도움이 될 거예요.
요약
Backstage 플러그인은 여러분의 필요에 맞게 앱을 커스터마이징해요. CI/CD, 모니터링, 감사 등 많은 공통 인프라 요구사항을 위한 플러그인을 담은 플러그인 디렉터리가 있어요.
기존 플러그인을 앱에 추가하기
다음 단계는 Backstage 앱을 이미 만들었고 여기에 기존 플러그인을 추가하려는 상황을 가정해요.
커뮤니티 플러그인 저장소와 Backstage 플러그인 디렉터리 등에서 Backstage용 훌륭한 플러그인을 많이 찾을 수 있어요.
Backstage 앱에 플러그인을 추가하는 것은 일반적으로 간단한 과정이며, 이상적으로 각 플러그인은 설치 및 구성 방법에 대한 자체 문서를 함께 제공해요. 이 예시에서는 Tech Radar 플러그인을 우리 Backstage 앱에 추가해 볼게요.
플러그인의 npm 패키지를 저장소에 추가해요:
Backstage 루트 디렉터리에서
yarn --cwd packages/app add @backstage-community/plugin-tech-radar
플러그인은 루트 package.json이 아니라 app 패키지에 추가된다는 점에 주의하세요. Backstage 앱은 Yarn 워크스페이스를 사용하는 모노레포로 구성돼요. 프론트엔드 UI 플러그인은 일반적으로 app 폴더에 추가되고, 백엔드 플러그인은 backend 폴더에 추가돼요. 위 예시에서는 프론트엔드 플러그인을 추가하는 것이므로 플러그인을 app 패키지에 추가했어요.
이제 앱 라우트를 수정해서 tech radar에서 내보낸 Router 컴포넌트를 포함시켜 주세요. 예를 들어 다음과 같이 해요:
packages/app/src/App.tsx
import { TechRadarPage } from '@backstage-community/plugin-tech-radar';const routes = ( <FlatRoutes> <Route path="/tech-radar" element={<TechRadarPage width={1500} height={800} />} /> </FlatRoutes>);
이것은 하나의 예시일 뿐이며, Tech Radar 플러그인을 계속 추가하려면 여기에서 이어 나갈 수 있어요. 각 Backstage 인스턴스는 필요에 따라 서로 다른 페이지나 탭 등에 콘텐츠나 카드를 통합할 수 있다는 점을 기억하세요. 또한 이 예시처럼 독립적으로 사용하도록 설계된 플러그인이 있는 반면, 특정 소프트웨어 카탈로그 엔티티를 주석 처리하거나 지원하기 위한 플러그인은 앱의 다른 곳에 추가될 수도 있어요.
플러그인 페이지를 사이드바에 추가하기
@backstage/create-app으로 만든 표준 Backstage 앱에서는 사이드바가 packages/app/src/components/Root/Root.tsx 안에서 관리돼요. 이 파일은 앱의 전체 Sidebar 요소를 내보내는데, 여기에 새 SidebarItem 요소를 추가해서 항목을 확장할 수 있어요.
예를 들어 api-docs 플러그인을 설치했다면, 이에 맞는 SidebarItem은 다음과 같은 형태가 될 수 있어요:
packages/app/src/components/Root/Root.tsx
// Import icon from Material UIimport ExtensionIcon from '@material-ui/icons/Extension';// ... inside the AppSidebar component<SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" />;
자체 SVG를 아이콘 컴포넌트로 직접 사용할 수도 있어요. Material UI의 SvgIcon 기본 크기인 24x24px에 맞게 크기를 조정하고, SVG 요소를 다음과 같이 SvgIcon 컴포넌트로 감싸주기만 하면 돼요:
import SvgIcon, { SvgIconProps } from '@material-ui/core/SvgIcon';export const ExampleIcon = (props: SvgIconProps) => ( <SvgIcon {...props}> <g> <path ... /> <path ... /> </g> </SvgIcon>);
모바일 기기에서는 Sidebar가 화면 하단에 표시돼요. 경험을 커스터마이징하려면 SidebarItem을 SidebarGroup으로 묶거나(예시 1), 링크가 있는 SidebarGroup을 만들 수 있어요(예시 2). 모든 SidebarGroup은 아이콘과 함께 하단 탐색에 표시돼요.
// Example 1<SidebarGroup icon={<MenuIcon />} label="Menu"> ... <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" /> ...<SidebarGroup />
// Example 2<SidebarGroup label="Search" icon={<SearchIcon />} to="/search"> ... <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" /> ...<SidebarGroup />
SidebarGroup이 제공되지 않으면 기본 메뉴가 Sidebar 콘텐츠를 표시해요.