Backstage 홈페이지 - 설정 및 커스터마이징
Backstage 홈페이지 - 설정 및 커스터마이징 (이전 프론트엔드 시스템)
이 문서는 여전히 이전 프론트엔드 시스템을 사용하는 Backstage 앱을 위한 내용이에요. 앱에서 새 프론트엔드 시스템을 사용한다면 현재 홈페이지 가이드를 대신 읽어보세요. 이 글에서는 홈 플러그인을 설치하고 Backstage 앱에 간단한 홈페이지를 만드는 과정을 안내할게요.
출처: 문서
본문
이 문서는 여전히 이전 프론트엔드 시스템을 사용하는 Backstage 앱을 위한 내용이에요. 앱에서 새 프론트엔드 시스템을 사용한다면 현재 홈페이지 가이드를 대신 읽어보세요.
홈페이지
좋은 Backstage 홈페이지는 플랫폼의 발견 가능성을 크게 높여줘요. 사용자가 홈페이지에서 바로 필요한 모든 것을 찾고, Backstage에서 직접 URL을 외울 필요가 없도록 만들고 싶을 거예요. 홈 플러그인은 관련 정보를 표면화하고 일반적인 작업에 편리한 단축키를 제공하기 위해 Backstage용 홈페이지를 구성하는 시스템을 도입해요. 누구나 어떤 컴포넌트든 기여할 수 있고 어떤 홈페이지에도 포함시킬 수 있는 열린 생태계와 함께, 구성 가능성(composability)을 염두에 두고 설계되었어요.
앱 통합자(App Integrator)의 관점에서 이 시스템은 조직의 요구에 맞는 홈페이지를 설계하는 데 완전한 자유를 주도록 구성 가능하게 설계되었어요. 홈페이지에 포함될 구성 요소를 기여하려는 컴포넌트 개발자의 관점에서는, 서로 다른 부분을 묶고 에러 경계와 지연 로딩이 내부적으로 처리된 채로 내보낼 수 있는 편리한 인터페이스가 있어요.
이 튜토리얼이 끝나면 다음을 기대할 수 있어요:
-
Backstage 앱이 소프트웨어 카탈로그 대신 전용 홈페이지를 가지게 돼요.
-
홈페이지의 구성 가능성을 이해하고 조직에 맞게 커스터마이징하는 방법을 알게 돼요.
사전 준비 사항
시작하기 전에 다음을 확인하세요:
-
@backstage/create-app을 사용해 직접 독립 실행형 Backstage 앱을 만들었고, backstage 저장소의 포크를 사용하지 않았어요. -
기존 홈페이지가 없고, 기본적으로 Backstage를 열면 소프트웨어 카탈로그로 리디렉션돼요.
이제 홈 플러그인을 설치하고 Backstage 앱에 간단한 홈페이지를 만들어 보면서 시작해 볼게요.
설정
1. 플러그인 설치하기
Backstage 루트 디렉터리에서
yarn --cwd packages/app add @backstage/plugin-home
2. 새 HomePage 컴포넌트 만들기
packages/app 디렉터리 안에 새 홈페이지 컴포넌트가 위치할 새 파일을 만들어요. 다음 초기 코드로 packages/app/src/components/home/HomePage.tsx를 만들어요:
export const HomePage = () => ( /* We will shortly compose a pretty homepage here. */ <h1>Welcome to Backstage!</h1>);
3. 루트 / 라우트용 라우터 업데이트하기
홈페이지가 아직 없다면, 대부분 카탈로그 홈페이지를 홈페이지로 사용하도록 리디렉션이 설정되어 있을 거예요.
packages/app/src/App.tsx 안에서 다음을 찾아요:
packages/app/src/App.tsx
const routes = ( <FlatRoutes> <Navigate key="/" to="catalog" /> {/* ... */} </FlatRoutes>);
<Navigate> 줄을 교체하고 이전 단계에서 만든 새 컴포넌트를 새 홈페이지로 사용해 봅시다.
packages/app/src/App.tsx
import { HomepageCompositionRoot } from '@backstage/plugin-home';import { HomePage } from './components/home/HomePage';const routes = ( <FlatRoutes> <Navigate key="/" to="catalog" /> <Route path="/" element={<HomepageCompositionRoot />}> <HomePage /> </Route> {/* ... */} </FlatRoutes>);
4. 사이드바 항목 업데이트하기
Backstage 사이드바의 "Home" 라우트를 새 홈페이지를 가리키도록 업데이트해요. 또한 카탈로그를 빠르게 열 수 있는 Sidebar 항목도 추가할게요.
| | Before | After | |
Backstage 사이드바의 코드는 대부분 packages/app-legacy/src/components/Root/Root.tsx 안에 있을 거예요.
다음 변경을 진행해요:
packages/app/src/components/Root/Root.tsx
import CategoryIcon from '@material-ui/icons/Category';export const Root = ({ children }: PropsWithChildren<{}>) => ( <SidebarPage> <Sidebar> <SidebarLogo /> {/* ... */} <SidebarGroup label="Menu" icon={<MenuIcon />}> {/* Global nav, not org-specific */} <SidebarItem icon={HomeIcon} to="catalog" text="Home" /> <SidebarItem icon={HomeIcon} to="/" text="Home" /> <SidebarItem icon={CategoryIcon} to="catalog" text="Catalog" /> <SidebarItem icon={ExtensionIcon} to="api-docs" text="APIs" /> <SidebarItem icon={LibraryBooks} to="docs" text="Docs" /> <SidebarItem icon={LayersIcon} to="explore" text="Explore" /> <SidebarItem icon={CreateComponentIcon} to="create" text="Create..." /> {/* End global nav */} <SidebarDivider /> {/* ... */} </SidebarGroup> </Sidebar> </SidebarPage>);
이제 (조금 밋밋하지만) 홈페이지가 생겼어요!
다음 단계에서는 이 홈페이지를 흥미롭고 유용하게 만들어 볼게요!
기본 템플릿 사용하기
홈페이지를 설정하는 데 사용할 기본 홈페이지 템플릿(스토리북 링크)이 있어요. Backstage 홈페이지 템플릿에 대한 자세한 내용은 블로그 포스트 공지사항에서 확인해 보세요.
홈페이지 구성하기
홈페이지를 구성하는 것은 일반 React 컴포넌트를 만드는 것과 다르지 않아요. 즉, 앱 통합자는 원하는 콘텐츠를 자유롭게 포함할 수 있어요. 다만 홈페이지를 염두에 두고 개발된 컴포넌트들이 있어요. 홈페이지를 구성할 때 사용할 컴포넌트를 찾고 있다면, 스토리북의 홈페이지 컴포넌트 모음을 확인해 볼 수 있어요. 요구에 맞는 컴포넌트를 찾지 못했지만 기여하고 싶다면 기여 문서를 확인해 보세요.
사용 가능한 홈페이지 템플릿 중 하나를 사용하려면 스토리북의 "Home" 플러그인에서 템플릿을 찾을 수 있어요. 템플릿을 기여하고 싶다면 기여 문서를 확인해 주세요.
import Grid from '@material-ui/core/Grid';import { HomePageCompanyLogo } from '@backstage/plugin-home';export const HomePage = () => ( <Grid container spacing={3}> <Grid item xs={12} md={4}> <HomePageCompanyLogo /> </Grid> </Grid>);