버전 설명 추가

팁

이 강의는 처음부터 New Relic 제작 방법을 가르치는 과정의 일부입니다. 아직 확인하지 않았다면 개요를 확인하세요.

과정의 각 단원은 마지막 단원을 기반으로 하므로 이 단원을 시작하기 전에 마지막 단원인 차트 제목 추가를 완료했는지 확인하세요.

차트를 체계적으로 정리하고 각 항목 위에 기술 제목을 추가하면 New Relic 디자인의 활용도가 더욱 높아집니다. 이 강의에서는 A/B 테스트의 각 디자인 버전에 대한 설명을 작성하여 이러한 추세를 이어갑니다.

교과 과정 저장소 의 add-version-descriptions/ab-test 디렉터리로 변경합니다.

bash

$cd nru-programmability-course/add-version-descriptions/ab-test

nerdlets/ab-test-nerdlet 에서 description.js 이라는 새 자바스크립트 파일을 추가합니다.

bash

$touch description.js

이 새 파일에서 description 소품을 사용하여 전달하는 버전 설명을 렌더링하기 위해 HeadingText 및 BlockText 를 사용하는 VersionDescription 라는 새 React 구성요소를 만듭니다.

import React from 'react';
import { BlockText, HeadingText } from 'nr1';

export default class VersionDescription extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <HeadingText className="versionHeader">
                    Version {this.props.version}
                </HeadingText>
                <BlockText className="versionText">
                    {this.props.description}
                </BlockText>
            </div>
        )
    }
}

이 클래스를 사용하여 A/B 테스트의 각 디자인 버전에 대한 버전 설명을 만듭니다.

Nerdlet의 index.js 파일에서 VersionDescription 가져오고, 각 디자인 버전에 대한 설명을 만들고, 각 디자인 버전에 대한 새 GridItem 구성요소를 만듭니다.

import React from 'react';
import { ChartGroup, Grid, GridItem } from 'nr1';
import NewsletterSignups from './newsletter-signups';
import PastTests from './past-tests';
import TotalCancellations from './total-cancellations';
import TotalSubscriptions from './total-subscriptions';
import VersionDescription from './description';
import VersionPageViews from './page-views';
import VersionTotals from './totals';

const VERSION_A_DESCRIPTION = 'The newsletter signup message says, "Sign up for our newsletter"'
const VERSION_B_DESCRIPTION = 'The newsletter signup message says, "Sign up for our newsletter and get a free shirt!"'

export default class AbTestNerdletNerdlet extends React.Component {
    render() {
        return <div>
            <Grid className="wrapper">
                <GridItem columnSpan={6}>
                    <VersionDescription
                        description={VERSION_A_DESCRIPTION}
                        version="A"
                    />
                </GridItem>
                <GridItem columnSpan={6}>
                    <VersionDescription
                        description={VERSION_B_DESCRIPTION}
                        version="B"
                    />
                </GridItem>
                <GridItem columnSpan={12}><hr /></GridItem>
                <GridItem columnSpan={12}><NewsletterSignups /></GridItem>
                <GridItem columnSpan={6}><TotalSubscriptions /></GridItem>
                <GridItem columnSpan={6}><TotalCancellations /></GridItem>
                <GridItem columnSpan={6}><VersionTotals version='a' /></GridItem>
                <GridItem columnSpan={6}><VersionTotals version='b' /></GridItem>
                <ChartGroup>
                    <GridItem columnSpan={6}>
                        <VersionPageViews version='a' />
                    </GridItem>
                    <GridItem columnSpan={6}>
                        <VersionPageViews version='b' />
                    </GridItem>
                </ChartGroup>
                <GridItem columnSpan={12}><PastTests /></GridItem>
            </Grid>
        </div>
    }
}

여기서는 두 개의 VersionDescription 구성요소를 만들었습니다. 디자인 버전에 해당하는 description 및 version 소품을 전달했습니다.

또한 앱의 차트와 설명을 시각적으로 구분하기 위해 수평선을 추가했습니다. 이를 위해 columnSpan 이 12인 GridItem 를 추가하여 그리드의 전체 너비로 규칙을 늘렸습니다.

nru-programmability-course/add-version-descriptions/ab-test 에서 Nerdpack의 루트로 이동합니다.

Nerdpack에 대한 새 UUID를 생성하십시오.

bash

$nr1 nerdpack:uuid -gf

기존 Nerdpack이 포함된 교과 과정 저장소를 복제했으므로 고유한 식별자를 생성해야 합니다. 이 UUID는 Nerdpack을 New Relic 계정에 매핑합니다.

애플리케이션을 로컬로 제공합니다.

bash

$nr1 nerdpack:serve

https://one.newrelic.com?nerdpacks=local 로 이동하여 Apps [앱] > Your apps [클릭하면] 아래에서 애플리케이션을 확인하세요.

작업이 끝나면 로컬 서버의 터미널 창에서 CTRL+C 눌러 New Relic 피규어 제공을 중지하세요.

이제 경쟁 디자인과 차트에 대한 설명을 추가했습니다. 다음 단원에서는 사용자 인터페이스 구성 요소에서 애플리케이션의 새 섹션을 만듭니다. 이 섹션은 버튼 클릭으로 A/B 테스트를 종료하는 데 사용됩니다.

코스

이 강의는 처음부터 New Relic 제작 방법을 가르치는 과정의 일부입니다. 다음 단원으로 계속 진행하세요. 섹션을 추가하여 테스트를 종료하세요.

사용자의 편의를 위해 제공되는 기계 번역입니다.

팁

코스