본문 바로가기

DeveloperPortal13

Backstage 마스터하기: 소스 코드로 향하는 지도, source-location 어노테이션 완벽 가이드 안녕하세요! 오늘은 Backstage의 소프트웨어 카탈로그를 지탱하는 가장 중요한 메타데이터 중 하나인 backstage.io/source-location 어노테이션(Annotation)에 대해 아주 깊이 있게 파헤쳐 보겠습니다. 🚀Backstage를 사용하다 보면 서비스의 상세 페이지에서 "View Source" 버튼을 누르거나, 문서 위치를 연결할 때 이 설정을 자주 접하게 됩니다. 도대체 이 한 줄의 설정이 어떤 마법을 부리는지, 왜 중요한지 완벽하게 이해해 보세요! 💡🏗️ backstage.io/source-location이란 무엇인가요?Backstage에서 관리되는 모든 자원(컴포넌트, API, 리소스 등)은 엔티티(Entity)라고 불리는 YAML 파일로 정의됩니다. 이때 backstag.. 2025. 12. 27.
Backstage 모노레포의 보물창고, "common-library" 완벽 활용법 안녕하세요! 오늘은 Backstage의 패키지 관리 시스템에서 아주 중요한 역할을 담당하는 "common-library" 역할(Role)에 대해 깊이 있게 탐구해 보는 시간을 갖겠습니다. 🚀Backstage 프로젝트가 커지다 보면 여러 플러그인에서 공통적으로 사용하는 유틸리티 함수나 UI 컴포넌트들이 생겨나기 마련입니다. 이때 코드의 중복을 막고 효율적으로 관리하기 위해 사용되는 것이 바로 이 "common-library"입니다. 💡 🏗️ Backstage의 패키지 역할(Role) 시스템 이해하기Backstage는 모노레포(Monorepo) 내의 수많은 패키지를 효율적으로 빌드하고 관리하기 위해 각 패키지마다 '역할'을 부여합니다. package.json 파일의 backstage.role 필드에 이.. 2025. 12. 27.
우리 회사만의 Backstage 만들기: 권장 테마 커스터마이징 가이드 안녕하세요! 오늘은 Backstage의 사용자 경험을 결정짓는 가장 중요한 요소 중 하나인 '테마(Theme) 커스터마이징'에 대해 심층적으로 다뤄보겠습니다. 🎨Backstage는 단순히 기능을 제공하는 툴을 넘어, 우리 회사의 브랜드 아이덴티티를 투영할 수 있는 플랫폼이어야 합니다. 기본 제공되는 테마도 훌륭하지만, 회사의 로고 색상이나 디자인 가이드에 맞춰 테마를 변경하는 것은 개발자들의 소속감을 높이는 데 큰 역할을 하죠. Backstage에서 권장하는 테마 커스터마이징 기법을 단계별로 완벽히 정리해 드립니다! 💡🏗️ Backstage 테마 시스템의 기초: Material UIBackstage의 UI는 Material UI (MUI)를 기반으로 구축되었습니다. 따라서 테마를 커스터마이징한다는 .. 2025. 12. 27.
Backstage 패키지 수사대: 5초 만에 프론트엔드 플러그인 찾아내기 안녕하세요! 오늘은 Backstage의 거대한 모노레포 숲속에서 "이 패키지가 프론트엔드 플러그인인지 어떻게 알 수 있을까?"라는 주제로 깊이 있는 탐험을 떠나보겠습니다. 🕵️‍♂️Backstage는 수많은 패키지로 구성되어 있어 처음 접하면 길을 잃기 쉽습니다. 하지만 몇 가지 명확한 '단서'만 알면, 어떤 패키지가 사용자 화면을 담당하는 프론트엔드 플러그인인지 단 5초 만에 파악할 수 있습니다. 그 비결을 지금 바로 공개합니다! 💡🏗️ 프론트엔드 플러그인 식별의 3단계 공식Backstage 패키지를 조사할 때 다음 3가지 요소를 확인하면 됩니다. 이들은 프론트엔드 플러그인임을 증명하는 결정적인 증거들입니다.1. package.json의 이름과 의존성 📦가장 먼저 확인해야 할 곳은 패키지의 루트.. 2025. 12. 26.
Backstage의 보이지 않는 영웅: 백엔드 플러그인의 책임과 역할 총정리 안녕하세요! 오늘은 Backstage의 강력한 생태계를 지탱하는 든든한 버팀목, 백엔드 플러그인(Backend Plugins)의 핵심 역할과 책임에 대해 아주 상세하게 파헤쳐 보겠습니다. 🚀Backstage를 처음 접하면 눈에 보이는 화려한 프론트엔드 UI에 집중하게 되지만, 실제로 데이터를 가져오고, 처리하고, 보안을 유지하는 모든 마법은 백엔드에서 일어납니다. 오늘 이 글을 통해 백엔드 플러그인이 왜 중요한지, 그리고 어떤 책임을 가지고 있는지 완벽하게 이해해 보세요! 💡 🏗️ Backstage 백엔드 플러그인이란?Backstage 아키텍처는 크게 프론트엔드(App)와 백엔드(Backend)로 나뉩니다. 백엔드 플러그인은 Node.js 환경에서 동작하며, 프론트엔드 플러그인이 필요로 하는 데이터.. 2025. 12. 26.
🏠 Backstage 프로젝트 구조 파헤치기: 브라우저용 웹 앱은 어디에 있을까? 안녕하세요! 오늘은 Backstage를 커스터마이징하거나 플러그인을 추가할 때 가장 먼저 파악해야 할 핵심 정보, 바로 프로젝트 구조에 대해 상세히 알아보겠습니다. 🚀Backstage는 수많은 패키지가 하나로 묶인 모노레포(Monorepo) 구조를 가지고 있습니다. 처음 프로젝트를 생성하고 나면 수많은 폴더 사이에서 "도대체 사용자가 접속했을 때 보는 화면(웹 앱) 코드는 어디에 있는 거지?"라는 의문이 생기기 마련이죠. 오늘 그 궁금증을 완벽히 해결해 드립니다! 💡📍 정답: 웹 앱의 보금자리, packages/appBackstage 기본 프로젝트 구조에서 사용자의 브라우저에 표시되는 프론트엔드 웹 앱은 바로 다음 경로에 위치합니다.📂 /packages/app Backstage는 백엔드(packa.. 2025. 12. 26.