frontend7 우리 회사만의 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에 활력을! TechDocs 완벽 설치 및 Yarn 워크스페이스 설정 가이드 안녕하세요! 오늘은 Backstage의 핵심 기능 중 하나이자 개발자 경험(DevEx)의 꽃이라 불리는 TechDocs(테크독스)를 설치하는 방법에 대해 아주 상세히 알아보겠습니다. 🚀새로운 Backstage 모노레포를 구축한 뒤, "문서를 코드로(Documentation as Code)" 관리하기 위해 TechDocs를 추가하려고 할 때 어떤 명령어를 어떤 순서로 입력해야 할지 막막하셨죠? Yarn 워크스페이스 환경에서 프론트엔드와 백엔드 패키지를 완벽하게 설치하는 '정석 가이드'를 공개합니다! 💡🏗️ TechDocs 설치, 왜 Yarn 워크스페이스 방식인가요?Backstage는 기본적으로 모노레포(Monorepo) 구조를 채택하고 있습니다. 프론트엔드(packages/app)와 백엔드(packa.. 2025. 12. 26. 🏠 Backstage 프로젝트 구조 파헤치기: 브라우저용 웹 앱은 어디에 있을까? 안녕하세요! 오늘은 Backstage를 커스터마이징하거나 플러그인을 추가할 때 가장 먼저 파악해야 할 핵심 정보, 바로 프로젝트 구조에 대해 상세히 알아보겠습니다. 🚀Backstage는 수많은 패키지가 하나로 묶인 모노레포(Monorepo) 구조를 가지고 있습니다. 처음 프로젝트를 생성하고 나면 수많은 폴더 사이에서 "도대체 사용자가 접속했을 때 보는 화면(웹 앱) 코드는 어디에 있는 거지?"라는 의문이 생기기 마련이죠. 오늘 그 궁금증을 완벽히 해결해 드립니다! 💡📍 정답: 웹 앱의 보금자리, packages/appBackstage 기본 프로젝트 구조에서 사용자의 브라우저에 표시되는 프론트엔드 웹 앱은 바로 다음 경로에 위치합니다.📂 /packages/app Backstage는 백엔드(packa.. 2025. 12. 26. Backstage 아키텍처 깊게 보기: Software Entity와 React Component의 상호작용 안녕하세요! 오늘은 Backstage의 핵심 개념 중 하나인 "컴포넌트(Component)"가 두 가지 다른 맥락에서 어떻게 사용되는지에 대해 자세히 알아보겠습니다. 🚀Backstage를 처음 접하시는 분들이 가장 헷갈려 하는 부분 중 하나인데요, 이 두 가지 '컴포넌트'의 의미를 명확히 이해하면 Backstage 아키텍처와 실제 활용 방안을 훨씬 더 깊이 있게 파악할 수 있습니다. 오늘 이 글을 통해 그 혼란을 완전히 해소해 드리겠습니다! 💡🏗️ Backstage에서 '컴포넌트'의 두 가지 의미Backstage에서 "컴포넌트"라는 용어는 크게 두 가지 맥락에서 사용됩니다. 하나는 소프트웨어 카탈로그 엔티티로서의 kind: Component이고, 다른 하나는 프론트엔드 UI를 구성하는 React 컴.. 2025. 12. 26. 내 맘대로 구성하는 Backstage 엔터티 페이지! 조건부 탭(Conditional Tab) 구현 가이드 🛠️ 안녕하세요, 플랫폼 엔지니어 여러분! 👋 Backstage를 운영하다 보면 이런 고민이 생깁니다. "우리 팀은 Kubernetes를 쓰는 서비스만 K8s 탭을 보여주고 싶은데...""자바 프로젝트에만 SonarQube 탭을 노출할 수 없을까?" Backstage는 EntityLayout.Route와 'Filter Functions'를 결합하여 이 문제를 아주 우아하게 해결합니다. 지금부터 그 방법을 상세히 파헤쳐 보겠습니다!1. 기본 개념: EntityLayout.Route와 if 프롭 🧩Backstage 엔터티 페이지의 각 탭은 EntityLayout.Route 컴포넌트로 정의됩니다. 이 컴포넌트에는 if라는 아주 특별한 프롭(Prop)이 있습니다.동작 원리: if 프롭에 전달된 함수가 true를 .. 2025. 12. 25. 이전 1 2 다음
