Netlify를 사용한 React 애플리케이션 구축

만약 당신이 자바스크립트 개발자라면, 아마도 이전에 React 프로그램을 만든 적이 있을 것입니다. 그러나 일단 완성되면, 어떻게 그것을 세계에 발표합니까?만약 네가 나에게 묻는다면, 답은 Netlify다.Netlify는 개발자가 응용 프로그램과 사이트를 배치하고 위탁 관리하는 도구이다.그것은 전방 개발자들이 가장 자주 사용하고 신뢰할 수 있는 도구 중의 하나이다. 왜냐하면 사용하기 쉽기 때문이다.
이 강좌에서, 실제 응용을 볼 수 있도록 계산기 프로그램을 만들고, 기능 표시를 추가한 다음, Netlify를 사용하여 생산 환경에 배치할 것입니다.우리 시작합시다!

Netlify+React 애플리케이션에 대한 사전 요구 사항

먼저 Node가 설치되어 있는지 확인합니다.없으면 these instructions를 따르십시오.
만약 당신이 아직 등록하지 않았다면free developer account with Split.나중에 응용 프로그램에 JavaScript SDK를 추가합니다.

React 애플리케이션 작성

이 예에서, 우리는 네 가지 기본 기능만 포함하는 간단한 계산기 프로그램을 만들고, Netlify를 사용하여 배치할 것이다.페이스북의create react 프로그램 템플릿을 사용하면 전체 react 파일 구조와 템플릿을 쉽게 만들 수 있습니다.터미널에서 다음 명령을 입력하여calculator라는 프로그램을 만듭니다.npx create-react-app calculator그런 다음 디렉토리를 새 응용 프로그램으로 변경하고 개발 서버를 시작합니다.대부분의 경우, 이것은 다른 응용 프로그램이 실행되지 않는 한 localhost: 3000이 될 것이다.cd calculator npm start localhost:3000 로 이동하면 표준 React 프로그램 템플릿을 볼 수 있습니다.
다음은 계산기의 두 가지 주요 구성 요소: 단추와 결과를 만들 때입니다.결과에는 버튼 어셈블리에서 클릭한 모든 기능의 출력이 표시됩니다.결과적으로 구성 요소는 도구의 내용을 표시하는 단락 탭일 뿐입니다.
Buttons 구성 요소의 각 버튼에서 이 함수를 호출합니다.e.target을 클릭하고 통과합니다.이름을 매개변수로 사용합니다.<button name="1" onClick={e => this.props.onClick(e.target.name)}>1</button>이제 App.js 파일에서 계산 함수와 onClick 함수를 정의합니다.this.Calculate = 버튼을 클릭하면 함수의 결과가 계산됩니다.onClick 함수는 클릭한 버튼에 따라 상태를 변경합니다.


`Calculate = () => {
           this.setState({
               result: (eval(this.state.result) || "" ) + ""
           })
       };

onClick = button => {

       if(button === "="){
           this.calculate()
       }

       else {
           this.setState({
               result: this.state.result + button
           })
       }
   };
`
<small id="shcb-language-1"><span>Code language:</span> <span>JavaScript</span> <span>(</span><span>javascript</span><span>)</span></small>

그런 다음 어셈블리를 렌더링합니다.


`render() {
       return (
           <div>
               <div className="calculator-body">
                   <ResultComponent result={this.state.result}/>
                   <ButtonsComponent onClick={this.onClick}/>
               </div>
           </div>
       );
   }`
<small id="shcb-language-2"><span>Code language:</span> <span>JavaScript</span> <span>(</span><span>javascript</span><span>)</span></small>

React 애플리케이션에 기능 플래그 추가

다음에 계산기의 체크아웃 기능을 실현하고 있다고 가정하십시오.사용자가 그것을 사용하고 싶지 않을 수도 있으니, 사용자가 사용하지 않았는지 확인하기 위해 기능 표시를 추가해야 한다.
우선create the split and treatment in Split.
그리고 분할 (기능 표지) 을 설정하고 다른 처리 방식을 정의해야 합니다.

여기서 가장 중요한 부분은 목표 규칙입니다. 기능 표지에서 누가 목표가 될지 정의합니다.

루트 폴더에 다음 종속성을 설치합니다.npm install --save @splitsoftware/[email protected]어셈블리 상단에서 Split에서 SplitTreatments 및 withSplitFactory를 가져옵니다.SplitTreatments는 피쳐 평가를 수행하는 React 어셈블리입니다.계산기 구성 요소를 내보낼 때 withSplitFactory 고급 구성 요소는 계산기 구성 요소를 포장하는 데 사용됩니다.import { SplitTreatments, withSplitFactory } from "@splitsoftware/splitio-react"다음은 렌더링 함수에서 SplitTreatments 구성 요소를 사용하여 특징 평가를 실행합니다.<SplitTreatments names={['name_of_feature_flag']} > {({ treatments }) => { return this.renderContent(treatments['name_of_feature_flag']) }} </SplitTreatments>앞으로, 당신은 이 기능 로고 설정을 사용하여, 코드 변경 없이 증량 방식이나 한 번에 모든 변경 사항을 사용자에게 배치할 수 있습니다.

Netlify를 사용한 React 애플리케이션 구축

React 응용 프로그램을 완성하고 모든 스타일과 CSS를 추가하면 배치를 시작할 수 있습니다!세 가지 간단한 명령으로 Netlify 를 구축할 수 있습니다.npm run build npm install netlify-cli -g netlify deploy다음은 Github의 전체 버전repo입니다.

Netlify+React+기능 플래그 = 매직

Netlify 와 Split 를 함께 사용하면 취약점을 신속하게 게시하고 캡처할 수 있습니다.비록 다른 배치 도구도 사용할 수 있지만, Netlify는 속도와 신뢰성 때문에 전방 개발자들에게 가장 많이 사용된다.기능 깃발의 마력에 Netlify의 퀄리티까지 더해져 완벽한 조화를 이루고 있습니다!