기능 플래그를 활용하는 것은 소프트웨어 업그레이드의 구축 및 배포를 용이하게 하는 데 있어 매우 중요한 요소입니다. 이를 통해 특정 사용자 하위 집합 또는 전체 사용자 집단을 선택적으로 수용할 수 있습니다.
본질적으로 이러한 도구를 사용하면 정상적인 운영 과정 중에 중단이나 지연을 일으키지 않고 프로덕션 환경 내에서 상당한 변경을 구현할 수 있습니다. 이는 보다 복잡한 코드 수정 및 배포 프로세스를 대체하는 기능 플래그를 활용하여 달성할 수 있습니다.
기능 플래그: 구현 및 이점 설명
의심할 여지 없이 소프트웨어 개발은 지속적이고 주기적인 노력입니다. 프로젝트에 참여하는 사람들이 있는 한, 그들은 계속해서 업데이트를 하고 새로운 변경 사항을 도입할 것입니다.
이상적인 시나리오에서는 지속적 통합(CI) 및 지속적 배포(CD) 파이프라인을 통해 라이브 환경에 일관된 소프트웨어 업데이트를 원활하게 배포할 수 있습니다. 그러나 이러한 프로세스를 구현하는 데 필요한 배포 노력 측면에서 노동 집약적일 수 있다는 점에 유의해야 합니다.
기능 플래그를 활용하면 특정 구성 매개변수를 조작하는 것만으로 사용자 기반의 일부 또는 전체에 업데이트를 롤아웃할 수 있습니다.
기능 플래그는 다음과 같은 다양한 상황에서 활용할 수 있습니다:
혁신적인 개념을 보편적으로 구현하기 전에 평가하고자 할 때, 일부 사용자 그룹을 대상으로 테스트하면 기능 및 해당 개념이 대상에게 미치는 영향에 대한 피드백을 효율적이고 신속하게 수집할 수 있습니다.
중요한 패치나 빠른 수정이 필요한 긴급한 상황이 발생할 경우, 유니티의 시스템을 통해 필요한 업데이트를 신속하게 배포하는 동시에 오작동하는 구성 요소를 비활성화할 수 있습니다. 따라서 위기 상황에서도 콘텐츠를 완전히 다시 배포할 필요 없이 애플리케이션의 기능을 유지할 수 있습니다.
개인의 특성, 선호도, 구독 플랜에 따라 특정 기능의 활성화 또는 비활성화를 통해 사용자 경험을 조정함으로써 각 사용자에게 더욱 맞춤화된 경험을 제공할 수 있습니다.
플래그스미스 시작하기
플래그스미스의 강력한 기능 플래그 관리 시스템을 활용하면 오픈 소스 반복과 클라우드 기반 플랫폼을 모두 아우르는 유리한 대안을 제시할 수 있습니다. 이 사례에서는 클라우드 제공 서비스를 사용하여 React 애플리케이션 내에 피처 플래그를 원활하게 통합할 것입니다.
한국어를 사용하시나요?
⭐ Flagsmith의 클라우드 서비스 으로 이동하여 계정에 가입한 후 계정의 개요 페이지에 로그인합니다. 
⭐ 개요 페이지에서 프로젝트 생성 버튼을 클릭하여 새 플래그스미스 프로젝트를 설정합니다. 플래그스미스는 프로젝트 설정 페이지에서 개발 환경과 프로덕션 환경을 모두 자동으로 생성합니다. 이 튜토리얼에서는 개발 환경을 사용하여 기능 플래그를 구현합니다. 
⭐ 개발 환경인지 확인하고 기능 탭을 선택한 다음 첫 번째 기능 만들기 버튼을 클릭합니다. 
⭐ 플래그를 지정하려는 기능의 ID(가급적 문자열)를 입력하고 기본 기능으로 활성화 옵션으로 토글 버튼을 클릭한 다음 기능 만들기 버튼을 누릅니다. 이 경우 다양한 이커머스 제품의 등급에 기능 플래그를 구현하게 됩니다. 
⭐ 기능 설정 개요 페이지로 이동하여 새로 생성한 기능을 확인하고 관리할 수 있습니다. 
계정 설정을 완료하려면 컴퓨터 브라우저 환경에 있는 특정 키를 얻어야 합니다.
클라이언트 측 환경 키 생성
클라이언트 측 환경 전용 키를 얻으려면 특정 단계를 수행해야 합니다. 여기에는 구성 파일에 액세스하거나 사용자에게 입력을 요청하는 메시지가 포함될 수 있습니다. 이 키를 획득하는 과정은 애플리케이션과 요구 사항에 따라 달라집니다.
⭐ 개발 환경 아래의 설정 탭을 클릭합니다. 
⭐ 개발 환경 설정 페이지에서 키 탭을 클릭합니다. 
이 프로젝트의 소스 코드는 전용 GitHub 리포지토리에서 확인할 수 있습니다.
React 프로젝트 생성하기
create-react-app 명령어 또는 Vite를 사용하여 간단하게 React 프로젝트를 생성할 수 있습니다. 이 튜토리얼에서는 기본적인 React 애플리케이션을 생성하는 데 선호하는 방법으로 Vite를 사용하겠습니다.
Flagsmith의 소프트웨어 개발 키트(SDK)를 프로젝트에 통합하려면 다양한 인기 자바스크립트 프레임워크와 호환되도록 설계된 SDK를 설치해야 합니다.
npm install flagsmith
클라이언트 측 환경 변수를 생성하는 프로세스는 프로젝트 폴더 구조의 루트 레벨에 .env 파일을 생성하여 수행할 수 있습니다. 이렇게 하려면 파일에 클라이언트 측 환경 키와 같은 필요한 세부 정보를 지정하여 필요한 정보를 포함하기만 하면 됩니다. 이렇게 하면 모든 관련 데이터가 안전하게 저장되고 필요할 때 쉽게 액세스할 수 있습니다.
VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID="<your-key-goes-here>"
제품 목록 기능 컴포넌트 추가
플래그스미스의 기능 플래그 기능을 테스트하기 위해 DummyJSON API에서 이커머스 제품 목록을 렌더링하는 간단한 컴포넌트를 빌드합니다.
인벤토리 내의 항목에는 제목, 가격, 설명, 평점 등 여러 가지 특성이 있습니다. 우리의 목표는 평점 구성 요소에 기능 토글을 통합하는 것입니다. 이 기능이 구현되면 사용자는 Flagsmith 플랫폼 내에서 제공되는 ‘켜기/끄기’ 스위치를 사용하여 이 기능을 활성화하거나 비활성화할 수 있습니다.
‘src’ 디렉토리에 새로운 하위 디렉토리를 생성하고 ‘구성 요소’로 명명하십시오. 이 하위 디렉터리 안에 ‘Products.jsx’라는 제목의 완전히 새로운 파일을 생성하고 그 안에 다음 문구를 삽입하세요.
먼저 프로젝트가 제대로 작동하는 데 필요한 몇 가지 모듈을 가져옵니다. 여기에는 HTTP 호출을 위한 요청 라이브러리와 HTML 콘텐츠 파싱을 위한 BeautifulSoup 라이브러리가 포함됩니다. 또한 JSON 데이터 작업을 위해 json 라이브러리를 사용해야 할 수도 있으므로 이 라이브러리도 임포트 목록에 포함됩니다. 마지막으로 날짜와 시간으로 작업할 수 있는 날짜/시간 모듈이 있습니다.
import "./style.component.css";
import React, { useState, useEffect } from "react";
import flagsmith from 'flagsmith';
그런 다음 초기 상태 매개변수를 설정하고 JSX 구문 내에 필요한 HTML 요소를 통합하여 함수형 컴포넌트를 구축합니다.
export default function Products() {
const [products, setProducts] = useState([]);
const [showProductRating, setShowProductRating] = useState(false);
const environmentID = import.meta.env.VITE_REACT_APP_FLAGSMITH_ENVIRONMENT_ID;
return (
<>
<div className="product-catalogue">
<div className="product-list">
</div>
</div>
</>
);
}
Fetch API 또는 Axios를 사용하여 더미 JSON API에서 데이터를 검색하기 위해 `useEffect` 훅을 구현하여 HTTP 요청을 수행하고 제품 정보를 얻어야 합니다.
제공된 코드가 특정 프로그래밍 언어 또는 프레임워크의 컨텍스트에서 누락되었습니다. 정확한 답변을 제공하려면 수행하려는 작업과 작업 중인 프로그래밍 환경에 대한 자세한 정보를 포함해 주세요.
useEffect(() => {
const fetchProducts = async () => {
await fetch("https://dummyjson.com/products")
.then((res) => res.json())
.then((json) => setProducts(json.products));
}
fetchProducts();
}, []);
초기화 시 컴포넌트가 마운트될 때 fetchProducts 함수가 실행됩니다. 이 함수는 제품 데이터를 검색하고 결과적으로 시스템 내 제품 변수의 상태를 수정합니다.
궁극적으로 항목 배열을 탐색하여 웹 브라우저에 표시할 수 있습니다.
“제품 목록” 클래스 div 아래에 후속 코딩을 통합합니다:
{ products.slice(0,6).map((product) => (
<div className="product" key={product.id}>
<h2>{product.title}</h2>
<p>Price: ${product.price}</p>
<p>{product.description}</p>
<h3>Rating: {product.rating}</h3>
</div>
))}
실제로 이 구현을 활용하면 모의 JSON API에서 제품 항목 목록을 손쉽게 검색하고 시각화할 수 있습니다.
Flagsmith의 SDK 통합
Flagsmith의 소프트웨어 개발 키트 기능을 React 애플리케이션에 통합하고 시작하려면 ‘useEffect’ 훅 내에 있는 ‘fetchProducts’ 함수 호출 바로 다음에 제공된 코드 스니펫을 삽입하세요.
flagsmith.init({
environmentID:environmentID,
cacheFlags: true,
enableAnalytics: true,
onChange: (oldFlags, params) => {
setShowProductRating(flagsmith.hasFeature('product_rating'));
}
});
이 기능을 통합하면 캐싱 기능 및 데이터 분석 기능을 갖춘 기능 플래그 관리 시스템을 React 애플리케이션 내에 구현할 수 있습니다.
이 기능은 콜백 메커니즘을 사용하여 제품\_rating 기능 플래그의 현재 상태에 따라 제품 등급 정보를 적응적으로 표시합니다. 구체적으로, 클라우드 서비스 내에서 해당 기능을 ‘true’로 설정하여 활성화된 경우 평점을 표시하고, 플래그가 비활성화되어 ‘false’로 설정된 경우 평점을 표시하지 않습니다.
결론적으로 반품 코드 섹션 내의 제품 등급 h3 요소에 앞서 언급한 내용을 반영하여 수정하는 것이 필수적입니다.
{showProductRating && <h3> Rating: {product.rating}</h3>}
지정된 기능을 활성화하면 showProductRating 속성의 값이 활성화 상태로 업데이트됩니다. 따라서 제품 등급 표시가 인터페이스의 다른 속성 표시와 공존하게 됩니다. 그럼에도 불구하고 해당 기능을 비활성화하면 showProductRating 속성이 원래 비활성 상태로 되돌아가므로 사용자 보기에서 제품 등급이 눈에 띄지 않게 됩니다.
결론적으로, 제품 구성 요소에 대한 가져오기를 통합하여 App.jsx 파일을 수정합니다.
import "./App.css";
import Products from "./components/Products";
function App() {
return (
<div className="App">
<div className="App-header">
<h1>Product Catalogue</h1>
<Products />
</div>
</div>
);
}
export default App;
마지막으로 프로그램을 실행하고 웹 브라우저로 이동하여 애플리케이션이 작동하는 것을 관찰합니다.
npm run dev
플래그스미스의 기능 구성 섹션으로 이동하여 제품 등급 기능을 찾습니다. 평가를 수행하려면 해당 기능을 설정에서 해제하여 해당 기능을 비활성화하세요.
애플리케이션이 로컬 환경에서 작동하므로 수정 사항을 확인하려면 웹 브라우저 디스플레이를 새로 고쳐야 합니다. 이렇게 하면 표시되었던 초기 제품 등급이 사라집니다. 그러나 나중에 추천 기능을 다시 활성화하고 웹 페이지를 다시 한 번 로드하면 등급이 다시 표시됩니다.
기능 릴리스는 더 이상 번거롭지 않아야 합니다
기능 플래그의 활용은 개발 프로세스 내 통합을 통해 애플리케이션 기능 관리에 혁신을 가져왔으며, 업데이트 배포로 인해 발생할 수 있는 잠재적 문제를 효과적으로 완화합니다.
이 도구는 일반 사용자도 복잡한 프로그래밍 지식 없이도 설정을 수정하는 것만으로 기능을 활성화 또는 비활성화할 수 있는 매우 강력한 기능을 제공합니다.