Backstage 패키지 수사대: 5초 만에 프론트엔드 플러그인 찾아내기

안녕하세요! 오늘은 Backstage의 거대한 모노레포 숲속에서 "이 패키지가 프론트엔드 플러그인인지 어떻게 알 수 있을까?"라는 주제로 깊이 있는 탐험을 떠나보겠습니다. 🕵️‍♂️

Backstage는 수많은 패키지로 구성되어 있어 처음 접하면 길을 잃기 쉽습니다. 하지만 몇 가지 명확한 '단서'만 알면, 어떤 패키지가 사용자 화면을 담당하는 프론트엔드 플러그인인지 단 5초 만에 파악할 수 있습니다. 그 비결을 지금 바로 공개합니다! 💡

---

🏗️ 프론트엔드 플러그인 식별의 3단계 공식

Backstage 패키지를 조사할 때 다음 3가지 요소를 확인하면 됩니다. 이들은 프론트엔드 플러그인임을 증명하는 결정적인 증거들입니다.

1. package.json의 이름과 의존성 📦

가장 먼저 확인해야 할 곳은 패키지의 루트에 있는 package.json 파일입니다.

• 네이밍 규칙: 대부분의 공식 및 커뮤니티 플러그인은 @backstage/plugin-<이름> 형식을 따릅니다. 백엔드 플러그인과 달리 뒤에 -backend가 붙지 않는 것이 특징입니다.
• 핵심 의존성: dependencies 목록에 @backstage/core-plugin-api 또는 @backstage/core-components가 포함되어 있다면, 이는 UI를 구성하고 Backstage 코어 API와 통신하는 프론트엔드용 패키지일 확률이 99%입니다!

2. src/plugin.ts 파일의 존재 🧩

프론트엔드 플러그인은 자신을 Backstage 시스템에 등록하기 위해 특정 함수를 사용합니다. src 폴더 내의 plugin.ts (또는 이와 유사한 이름의 파일)를 열어보세요.

• createPlugin 함수: 코드 내에서 createPlugin 함수가 호출되고 있는지 확인하세요. 이 함수는 플러그인의 정체성을 정의하고, 라우트(Route)나 API 등을 캡슐화하는 역할을 합니다.

TypeScript

// 예시: src/plugin.ts
import { createPlugin } from '@backstage/core-plugin-api';

export const myFrontendPlugin = createPlugin({
  id: 'my-plugin',
  // ... 플러그인 설정
});

3. 익스텐션(Extensions)의 정의 🎨

프론트엔드 플러그인은 화면에 나타나야 하므로, 사용자에게 노출될 '구성 요소'를 정의합니다. 이를 익스텐션(Extensions)이라고 부릅니다.

• createRoutableExtension 또는 createComponentExtension: 이 함수들이 사용되고 있다면, 이는 특정 URL 경로에서 보이거나 다른 페이지에 삽입될 UI 컴포넌트를 제공한다는 의미입니다.

---

🔍 폴더 구조로 보는 프론트엔드 플러그인의 특징

형식적인 코드 외에도 폴더 구조 자체가 백엔드와 확연히 다릅니다.

폴더/파일	역할	특징
src/components/	UI 컴포넌트들	React(tsx) 파일들이 가득합니다. ⚛️
src/api/	프론트엔드 API 정의	백엔드와 통신하기 위한 인터페이스가 있습니다.
src/routes.ts	라우트 참조	플러그인 내에서 이동할 경로 정보를 담습니다. 📍
src/index.ts	외부 노출 통로	다른 패키지에서 가져다 쓸 컴포넌트와 API를 export 합니다.

---

💡 실전 연습: 백엔드 플러그인과 어떻게 다른가요?

혼동을 피하기 위해 백엔드 플러그인과의 차이점을 명확히 짚고 넘어갑시다!

• 백엔드 플러그인: 이름이 -backend로 끝나며, src/service/router.ts가 있고, createRouter나 add(import(...)) 형식을 사용하여 Express 라우터를 제공합니다. ⚙️
• 프론트엔드 플러그인: 이름이 깔끔하며, src/plugin.ts가 있고, React 컴포넌트를 제공합니다. 🎨

---

🏁 결론: 식별의 핵심은 createPlugin

Backstage 패키지 안에서 프론트엔드 플러그인을 찾는 가장 직접적이고 확실한 방법은 src 폴더 내에서 createPlugin 함수가 호출되는지 확인하는 것입니다. 이것이 바로 플러그인이 Backstage 프론트엔드 앱에 통합되는 공식적인 '출입증'이기 때문입니다.

이제 여러분은 어떤 패키지를 보더라도 그것이 화면을 그리는 역할인지, 뒤에서 데이터를 처리하는 역할인지 명확히 구분하실 수 있을 겁니다! 🚀

---