Backstage 아키텍처 깊게 보기: Software Entity와 React Component의 상호작용

안녕하세요! 오늘은 Backstage의 핵심 개념 중 하나인 "컴포넌트(Component)"가 두 가지 다른 맥락에서 어떻게 사용되는지에 대해 자세히 알아보겠습니다. 🚀

Backstage를 처음 접하시는 분들이 가장 헷갈려 하는 부분 중 하나인데요, 이 두 가지 '컴포넌트'의 의미를 명확히 이해하면 Backstage 아키텍처와 실제 활용 방안을 훨씬 더 깊이 있게 파악할 수 있습니다. 오늘 이 글을 통해 그 혼란을 완전히 해소해 드리겠습니다! 💡

---

🏗️ Backstage에서 '컴포넌트'의 두 가지 의미

Backstage에서 "컴포넌트"라는 용어는 크게 두 가지 맥락에서 사용됩니다. 하나는 소프트웨어 카탈로그 엔티티로서의 kind: Component이고, 다른 하나는 프론트엔드 UI를 구성하는 React 컴포넌트입니다. 이 두 가지를 정확히 구분하는 것이 중요합니다.

---

1. kind: Component (소프트웨어 카탈로그 엔티티) 🧩

첫 번째 의미는 Backstage의 소프트웨어 카탈로그(Software Catalog) 모델에서 가장 기본이 되는 엔티티 타입입니다. 여러분의 서비스, 라이브러리, 웹사이트 등 실제 코드로 구현된 소프트웨어 단위를 나타냅니다.

✅ 주요 특징

• 정의: catalog-info.yaml 파일 내 kind: Component로 정의됩니다.
• 역할:
  • 코드 단위: 특정 비즈니스 로직을 수행하는 마이크로서비스, 웹 애플리케이션, 라이브러리, 모바일 앱 등을 표현합니다.
  • 소유권: 누가 이 서비스를 담당하는지 (owner), 어떤 시스템에 속하는지 (system) 등의 메타데이터를 포함합니다.
  • 가시성: Backstage UI에서 해당 컴포넌트의 TechDocs, CI/CD 상태, 경고, 대시보드 등을 한눈에 볼 수 있도록 연결하는 중심점 역할을 합니다.
• 예시:
  • payment-service (마이크로서비스)
  • user-dashboard-frontend (프론트엔드 웹 앱)
  • shared-logging-library (재사용 가능한 라이브러리)

📊 kind: Component YAML 예시

YAML

apiVersion: backstage.io/v1alpha1
kind: Component         # 👈 여기가 첫 번째 'Component'의 의미입니다.
metadata:
  name: order-processing-service
  description: 고객의 주문을 처리하고 결제 시스템과 연동하는 백엔드 서비스
  annotations:
    github.com/project-slug: example-org/order-service
spec:
  type: service          # 컴포넌트의 타입 (service, website, library 등)
  lifecycle: production
  owner: team-nova       # 이 서비스를 담당하는 팀
  system: e-commerce-platform # 이 서비스가 속한 시스템

여기서 kind: Component는 "주문 처리 서비스"라는 실제 소프트웨어 코드 덩어리를 의미합니다.

---

2. 프론트엔드 React 컴포넌트 (UI 구성 요소) 🎨

두 번째 의미는 Backstage 프론트엔드의 사용자 인터페이스(UI)를 구성하는 빌딩 블록으로서의 "React 컴포넌트"입니다. ReactJS 프레임워크의 일반적인 용례와 동일합니다.

✅ 주요 특징

• 정의: TypeScript/JavaScript로 작성된 React 코드 파일(tsx, jsx)입니다.
• 역할:
  • UI 렌더링: 화면에 특정 기능을 표시하거나 사용자 입력을 처리하는 UI 요소를 담당합니다.
  • 재사용성: 버튼, 카드, 테이블, 차트, 특정 엔티티의 상세 정보 패널 등 다양한 UI 구성 요소를 재사용 가능한 단위로 만듭니다.
  • 플러그인 개발: Backstage 플러그인을 개발할 때, 여러분이 만드는 모든 UI는 React 컴포넌트들의 조합으로 이루어집니다.
• 예시:
  • (엔티티 상세 페이지 전체를 렌더링하는 컴포넌트)
  • (TechDocs 문서를 표시하는 카드 컴포넌트)
  • (비용 분석 대시보드를 표시하는 컴포넌트)

🖥️ React 컴포넌트 코드 예시

TypeScript

// packages/app/src/components/catalog/EntityPage.tsx (Backstage 앱의 일부)

import React from 'react';
import { EntityPageLayout } from '@backstage/plugin-catalog';
import {
  EntityAboutCard,
  EntityLinksCard,
  EntityCatalogGraphCard,
} from '@backstage/plugin-catalog';
// ... 그 외 여러 React 컴포넌트들을 import 합니다.

export const customEntityPage = (
  <EntityPageLayout>
    <EntityPageLayout.Content>
      {/* 👈 여기서 EntityAboutCard는 React 컴포넌트입니다. */}
      <EntityAboutCard variant="gridItem" /> 
      <EntityLinksCard variant="gridItem" />
      <EntityCatalogGraphCard variant="gridItem" />
    </EntityPageLayout.Content>
    {/* ... 다른 탭과 컴포넌트들 ... */}
  </EntityPageLayout>
);

위 코드에서 EntityPageLayout, EntityAboutCard 등은 모두 React 컴포넌트이며, Backstage UI를 구성하는 시각적인 요소들입니다.

---

🎯 두 가지 '컴포넌트' 의미를 바르게 연결하기

자, 이제 이 두 가지 '컴포넌트'의 의미가 어떻게 서로 연결되는지 이해하는 것이 중요합니다.

• kind: Component (소프트웨어 엔티티)는 Backstage 카탈로그에 등록된 실제 소프트웨어입니다.
• React 컴포넌트 (UI 구성 요소)는 그 kind: Component 엔티티의 정보를 Backstage UI에 가져와서 시각적으로 보여주는 역할을 합니다.

예를 들어, "order-processing-service"라는 kind: Component 엔티티가 카탈로그에 등록되면, Backstage 프론트엔드의 React 컴포넌트와 그 안에 포함된 , 등의 React 컴포넌트들이 이 엔티티의 메타데이터를 읽어와서 화면에 멋지게 렌더링해주는 것입니다. ✨

---

🏁 결론: 맥락으로 구분하는 '컴포넌트'

Backstage에서 "컴포넌트"라는 용어는 맥락에 따라 다음과 같이 두 가지 의미를 갖습니다.

1. 소프트웨어 카탈로그의 kind: Component: 여러분의 애플리케이션, 서비스, 라이브러리 등 실제 소프트웨어 코드 단위를 나타내는 엔티티입니다.
2. 프론트엔드 React 컴포넌트: Backstage UI를 만들고 엔티티 정보를 시각적으로 표현하는 UI 구성 요소입니다.

이 두 가지 의미를 정확히 구분하고 이해한다면, Backstage의 아키텍처를 훨씬 명확하게 파악하고, 여러분의 조직에 맞는 카탈로그를 효과적으로 구축하며, 필요하다면 직접 플러그인을 개발하는 데 큰 도움이 될 것입니다! 🚀