구성 관리

Source: Dev.to

소개

멀티‑테넌트 시스템—예를 들어 SaaS 플랫폼이나 여러 기업이 사용하는 챗봇—에서는 견고한 설정 시스템을 설계하는 것이 매우 중요합니다.
이 글에서는 각 고객마다 고유한 기능 및 UI 커스터마이징이 필요했던 웹사이트용 영상 통화 챗봇을 구축하면서 얻은 교훈을 바탕으로 프론트엔드에서 기능 플래그 시스템을 설계하는 방법을 다룹니다.

가정

• 백엔드는 테넌트별 설정을 제공한다. 백엔드 설계나 구현은 범위에 포함되지 않는다.
• 설정 값은 여러 곳에서 편집될 수 있다. 충돌 처리와 조정은 범위에 포함되지 않는다.

높은 수준의 개요

우리는 Config Manager 를 만들 것이며, 이는 간단한 두 단계 라이프사이클을 따릅니다:

1. 부트스트랩 단계 – 애플리케이션 시작 시 한 번 실행됩니다.
2. 런타임 단계 – 병합된 설정에 대한 읽기 전용 접근을 제공합니다.

구성 요소

ConfigReconciler

• 기본 설정과 테넌트‑특정 설정을 받아들입니다.
• 깊은 병합 전략을 사용해 최종 설정을 생성합니다.
• 설정 구조에 불필요한 깊은 중첩이 생기지 않도록 합니다.

ConfigSingleton

• 최종 설정을 싱글톤에 저장합니다.
• 애플리케이션 어디서든 설정을 다시 계산하지 않고 안전하게 읽을 수 있게 합니다.

통합

부트스트랩 단계를 애플리케이션 진입점(예: Vite 프로젝트의 main.tsx)에 통합합니다. 목표는 시작 시 한 번만 설정을 병합하고, 매 렌더링마다 깊은 병합 로직을 다시 실행하지 않는 것입니다.

// main.tsx
import { bootstrapConfig } from './configManager';

bootstrapConfig()
  .then(() => {
    // Render the app after config is ready
    ReactDOM.createRoot(document.getElementById('root')!).render(
      
    );
  })
  .catch(err => {
    console.error('Failed to bootstrap config:', err);
  });

사용법

부트스트랩이 완료된 후에는 어떤 컴포넌트든 getConfig() 를 통해 안전하게 설정을 읽을 수 있습니다:

import { getConfig } from './configManager';

function MyButton() {
  const config = getConfig();

  if (config.buttonEnabled) {
    return Click Here;
  }
  return null;
}

결론

깊은 병합 조정자와 싱글톤 저장소를 갖춘 최소한의 두 단계 Config Manager는 멀티‑테넌트 프론트엔드에서 기능 플래그를 확장 가능하게 관리하는 방법을 제공합니다.

즐거운 개발 되세요!