그리드 추가

팁

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

과정의 각 단원은 마지막 단원을 바탕으로 구성되므로 이 단원을 시작하기 전에 마지막 단원인 UI 추가를 완료했는지 확인하세요.

이전 실습 수업에서는 디자인 가이드에서 모든 차트를 만들었습니다. 불행하게도 디자인에 있는 것처럼 배치되지 않았습니다. New Relic One SDK는 구성 요소 구성을 위한 다양한 솔루션을 제공합니다. 이 강의에서 배우게 될 구성요소는 Grid 구성요소입니다.

차트를 정렬하려면 Grid 에 배치하세요. Grid 은 콘텐츠를 12열 행으로 구성하는 데 사용하는 컨테이너입니다. GridItem 는 Grid 의 빌딩 블록입니다. GridItem 이 처리해야 하는 행의 양을 결정하려면 1 과 12 사이에서 GridItem 의 columnSpan 지정합니다. 따라서 차트를 뷰 너비에 걸쳐 늘리려면 columnSpan 이 12 인 GridItem 에 차트를 배치합니다. 12개의 차트를 단일 행에 맞추려면 1 의 columnSpan 를 사용하십시오.

열을 어떻게 배열할지 계획했다면, 계획을 실현하기 위한 코드를 작성할 수 있습니다.

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

bash

$cd nru-programmability-course/add-a-grid/ab-test

Nerdlet의 index.js 파일에서 Grid 및 GridItem 가져옵니다. 그런 다음 각 차트를 GrildItem 에 배치하여 Nerdlet의 render() 메서드를 업데이트합니다. 마지막으로 모든 항목을 Grid 에 배치합니다.

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 VersionPageViews from './page-views';
import VersionTotals from './totals';

export default class AbTestNerdletNerdlet extends React.Component {
    render() {
        return <div>
            <Grid className="wrapper">
                <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>
    }
}

각 차트의 columnSpan 레이아웃 계획과 일치합니다. 12열 행의 절반을 차지하는 모든 차트의 columnSpan 은 6 이고, 전체 행을 차지하는 모든 차트의 columnSpan 은 12 입니다. ChartGroup 자체가 아닌 ChartGroup 의 각 차트는 GridItem 에 있습니다. ChartGroup 차트의 위치가 아닌 동작을 연결합니다.

각 차트는 fullWidth 소품을 사용하기 때문에 columnSpan 채웁니다. fullWidth 는 차트가 사용 가능한 가로 공간을 채우도록 하고 GridItem.columnSpan 은 해당 공간을 행의 일부로 제한합니다. fullWidth 소품을 제거하고 차트가 어떻게 반응하는지 확인하세요.

기술적인 세부사항

Grid 에 적용된 wrapper 클래스를 확인하세요. 우리는 이 앱이 멋지게 보이도록 몇 가지 CSS 스타일을 조용히 제공했습니다! 이 강좌는 CSS 강좌가 아니므로 추가한 모든 내용을 다루지는 않고 스니펫 코드에 사용하려는 스타일만 포함하겠습니다. New Relic One SDK의 모든 UI 구성요소는 CSS 클래스 이름을 제공할 수 있는 className 소품을 제공한다는 점만 알아두세요.

nerdlets/ab-test-nerdlet/styles.scss 에서 스타일을 볼 수 있습니다.

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

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

bash

$nr1 nerdpack:uuid -gf

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

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

bash

$nr1 nerdpack:serve

New Relic 에서 변경사항을 확인하세요.

여기서는 차트의 스타일이 지정되고 그리드로 정렬된 것을 볼 수 있습니다.

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

단 6단계만으로 A/B 테스트 애플리케이션의 가독성과 유용성이 크게 향상되었으며, 차트의 유용성을 향상시키기 위해 추가 단계를 수행할 수도 있습니다. 다음 강의에서는 각 차트가 표시하는 데이터가 무엇인지 상기시키기 위해 차트에 제목을 추가하게 됩니다.

코스

이 강의는 처음부터 New Relic 제작 방법을 가르치는 과정의 일부입니다. 준비가 되면 다음 강의인 차트 제목 추가를 계속 진행하세요.

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

팁

기술적인 세부사항

코스