소프트웨어를 구축할 때 어떤 것도 손상시키지 않고 신속하게 새로운 기능을 출시하는 것은 까다로울 수 있습니다. 기능 플래그를 사용하면 이 작업이 더 쉬워집니다. Vercel의 기능 플래그 SDK에 대해 읽은 후 기능 플래그에 대해 더 자세히 연구하고 기능 플래그가 무엇인지, 어떻게 작동하는지, 직접 빌드하는 방법을 설명하면 도움이 될 것이라고 생각했습니다.

기능 플래그란 무엇입니까?

기능 플래그(기능 전환이라고도 함)을 사용하면 개발자가 코드를 변경하거나 애플리케이션을 다시 배포할 필요 없이 기능을 켜거나 끌 수 있습니다. 이는 다음을 수행할 수 있음을 의미합니다.

• 점진적 기능 출시: 일부 사용자만 새 기능을 볼 수 있도록 하고 천천히 모든 사용자에게 출시합니다.
• 프로덕션에서 새로운 기능 테스트: 모든 사용자에게 기능을 제공하지 않고도 자신 또는 소규모 테스터 그룹을 위해 기능을 활성화할 수 있습니다.
• 기능을 빠르게 롤백: 새로운 기능으로 인해 문제가 발생하는 경우 재배포하지 않고도 비활성화할 수 있습니다.

기능 플래그를 사용하면 코드가 배포되는 시기와 별도로 사용자가 기능에 액세스할 수 있는 시기를 제어할 수 있습니다.

기능 플래그를 사용하는 이유는 무엇입니까?

1. 지속적 전달

   기능 플래그는 팀이 코드를 더 자주 릴리스하는 데 도움이 됩니다. 완료되지 않은 작업을 기본 코드베이스에 병합하고 플래그 뒤에 숨긴 다음 사용자에게 영향을 주지 않고 배포할 수 있습니다.

2. A/B 테스트

   다른 사용자 그룹을 대상으로 두 가지 버전의 기능을 테스트하여 어느 버전이 더 나은지 확인할 수 있습니다. 이는 실제 데이터를 기반으로 사용자 경험을 개선하는 데 도움이 됩니다.

3. 제어된 출시

   소규모 사용자 그룹에게 기능을 출시하고 성능을 모니터링한 다음 다른 모든 사용자에게 출시할 수 있습니다.

4. 빠른 롤백

   문제가 발생하는 경우 기능 플래그를 끄는 것이 코드 변경 사항을 되돌리는 것보다 훨씬 빠르므로 앱을 안정적으로 유지하는 데 도움이 됩니다.

Vercel의 Flags SDK와 함께 Next.js의 기능 플래그 사용

flags.ts(서버측)

import { unstable_flag as flag } from "@vercel/flags/next";

export const showBanner = flag({
  key: "banner",
  decide: () => false,
});

결정 함수는 다음과 같은 다양한 소스에서 제공될 수 있는 플래그 값을 결정합니다.

• 환경 변수
• 기타 기능 플래그 제공자
• Vercel의 Edge Config(데이터 구성 저장소)
• 데이터베이스 등

app/page.tsx

import { showBanner } from "../flags";

export default async function Page() {
  const banner = await showBanner();
  return (
    

      {banner ?  : null}
      {/* other components */}
    
  );
}

플래그는 함수이므로 호출 측에서 아무것도 수정하지 않고도 구현을 쉽게 변경할 수 있습니다. 이러한 유연성을 통해 애플리케이션은 플래그 논리의 핵심 구조를 변경할 필요 없이 새로운 요구 사항에 적응할 수 있습니다.

자신만의 기능 플래그 시스템을 구축하는 방법

시간이 지남에 따라 개선할 수 있는 간단한 기능 플래그 시스템을 구축해 보겠습니다.

1단계: 기능 플래그 검색을 위한 사용자 지정 후크 만들기

이 단계에는 기능 플래그를 동적으로 검색할 수 있는 사용자 정의 후크를 만드는 작업이 포함됩니다. 기능이 활성화되었는지 또는 비활성화되었는지 확인하기 위해 React 애플리케이션의 어느 부분에서나 이 후크를 쉽게 재사용할 수 있습니다.

import { useState, useEffect } from 'react';

export const useFeatureFlag = (key: string): boolean => {
  const [isEnabled, setIsEnabled] = useState(false);

  useEffect(() => {
    const fetchFeatureFlag = async () => {
      try {
        const response = await fetch(`http://localhost:3001/api/feature-flags/${key}`);
        if (response.ok) {
          const data = await response.json();
          setIsEnabled(data.is_enabled);
        }
      } catch (error) {
        console.error('Failed to fetch feature flag:', error);
      }
    };

    fetchFeatureFlag();
  }, [key]);

  return isEnabled;
};

2단계: 컴포넌트 반응

다음으로 사용자 정의 후크를 사용하여 플래그 활성화 여부에 따라 다양한 기능을 렌더링하는 구성 요소를 만듭니다. 이를 통해 애플리케이션은 사용자 경험을 방해하지 않고 이전 기능과 새 기능 간에 원활하게 전환할 수 있습니다.

import React from 'react';
import { useFeatureFlag } from './useFeatureFlag';

const FeatureFlaggedComponent: React.FC = () => {
  const isNewFeatureEnabled = useFeatureFlag('new-feature');

  return (
    

      
Feature Flag Example
      {isNewFeatureEnabled ? (
        

          
New Feature
          
This is the new feature enabled by the feature flag.
        
      ) : (
        

          
Old Feature
          
This is the old feature displayed when the new feature is disabled.
        
      )}
    
  );
};

export default FeatureFlaggedComponent;

시장의 기타 기능 플래그 솔루션

자신만의 기능 플래그 시스템을 구축하는 것은 소규모 프로젝트에 유용하지만, 대규모 팀과 협력하거나 더 고급 제어가 필요한 경우 기능 플래그 지정을 서비스로 제공하는 여러 도구가 있습니다.

1. Vercel 기능 플래그

   Vercel은 플랫폼과 통합된 기능 플래그를 제공하여 어떤 사용자가 어떤 기능을 볼지 실시간으로 제어할 수 있습니다.

2. 어둡게 시작

   LaunchDarkly는 대규모 기능 플래그를 관리하는 데 널리 사용되는 도구입니다. 위치나 행동과 같은 속성을 기반으로 사용자를 타겟팅하는 복잡한 출시를 지원합니다.

3. 최적화

   기능 플래그를 사용하여 다양한 기능을 테스트하고 사용자 경험을 개선함으로써 실험 및 A/B 테스트에 최적화적으로 집중합니다.

4. Split.io

   Split.io를 사용하면 팀이 다양한 기능 버전 간에 트래픽을 나누고 성능 지표를 실시간으로 추적할 수 있습니다.

5. 하이퍼튠

Hypertune은 고성능 실험과 기능 전환에 초점을 맞춘 기능 신고 공간의 새로운 플레이어입니다. 이를 통해 팀은 대기 시간을 최소화하면서 복잡한 실험을 실행할 수 있으므로 실시간 성능 통찰력을 얻을 수 있습니다. Hypertune의 독특한 접근 방식은 기능 플래그를 기계 학습 모델과 통합하여 기능 출시 및 사용자 타겟팅 측면에서 보다 지능적인 의사 결정을 가능하게 합니다.

결론

기능 플래그는 기능을 안전하게 릴리스하고, 프로덕션 환경에서 테스트하고, 코드를 다시 배포하지 않고도 빠르게 변경할 수 있는 훌륭한 방법입니다. JavaScript를 사용하여 간단한 기능 플래그 시스템을 구축하거나 대규모 프로젝트의 경우 Vercel, LaunchDarkly 또는 Optimizely와 같은 고급 도구를 사용할 수 있습니다.

기능 플래그를 사용하면 개발 프로세스가 더욱 유연하고 효율적이 되어 새로운 기능을 더 빠르고 자신 있게 제공할 수 있습니다.

읽어주셔서 감사합니다. 자유롭게 의견을 공유해주세요!