첫 번째 차트 추가

팁

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

과정의 각 단원은 마지막 단원을 기반으로 하므로 이 단원을 시작하기 전에 마지막 단원인 A/B 테스트 애플리케이션에 차트 구성 요소 추가를 완료했는지 확인하세요.

이 과정에서는 뉴렐릭 플랫폼을 위한 A/B 테스트 구축을 진행합니다. 이전에는 뉴렐릭 SDK](/docs/뉴렐릭-solutions/build-nr-UI/sdk-comComponent/intro-to-sdk)와 해당 구성 요소에 대해 배웠습니다. 이제 차트 구성 요소에 초점을 맞춰 애플리케이션을 구축할 차례입니다.

작성해야 할 차트가 여러 개 있습니다. 처음에는 부담스러워 보일 수 있지만 한 번에 한 단계씩 진행해 보세요. 맨 위 차트이자 가장 먼저 만들 차트는 뉴스레터에 가입한 사용자 수와 이들에게 표시된 웹 사이트 버전을 보여주는 선형 차트입니다.

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

bash

$cd nru-programmability-course/add-your-first-chart/ab-test

이 디렉터리에는 과정의 이 시점에서 애플리케이션에 있어야 하는 코드가 포함되어 있습니다. 각 레슨을 시작할 때 올바른 디렉토리로 이동하면 사용자 정의 코드를 남겨두어 한 레슨에서 다음 레슨으로 잘못된 코드가 전달되는 것을 방지할 수 있습니다.

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

bash

$touch newsletter-signups.js

이 새 파일에서 첫 번째 LineChart 및 일부 모의 데이터를 보관할 NewsletterSignups 라는 구성요소를 만듭니다.

import React from 'react';
import { LineChart } from 'nr1';

export default class NewsletterSignups extends React.Component {
  render() {
    const versionASignups = {
      metadata: {
        id: 'version-a-newsletter-signups',
        name: 'Version A',
        viz: 'main',
        color: 'blue',
      },
      data: [
        { x: 0, y: 0 },
        { x: 10, y: 10 },
        { x: 20, y: 15 },
        { x: 30, y: 5 },
        { x: 40, y: 30 },
        { x: 50, y: 25 },
      ],
    };
    const versionBSignups = {
      metadata: {
        id: 'version-b-newsletter-signups',
        name: 'Version B',
        viz: 'main',
        color: 'green',
      },
      data: [
        { x: 0, y: 20 },
        { x: 10, y: 5 },
        { x: 20, y: 25 },
        { x: 30, y: 45 },
        { x: 40, y: 50 },
        { x: 50, y: 35 },
      ],
    };
    return <LineChart data={[versionASignups, versionBSignups]} fullWidth />;
  }
}

nerdlets/ab-test-nerdlet/newsletter-signups.js

여기에서는 테스트 버전 A와 B를 나타내는 두 개의 임의 데이터 시리즈를 만들었습니다. 지금은 수동으로 제작된 데이터 포인트를 사용하고 있습니다. 앞으로는 이를 New Relic의 데이터 쿼리로 대체하게 됩니다.

차트의 각 계열에 대해 색상을 지정했습니다. color 메타데이터 속성은 CSS에서 허용되는 모든 색상 형식을 사용합니다. viz: 'main' 설정한다는 것은 LineChart 계열을 구성요소의 기본 표시 스타일인 선으로 렌더링한다는 의미입니다. LineChart 구성요소의 data prop의 경우 두 계열이 함께 표시되도록 다시에 두 계열을 전달했습니다. 마지막으로 차트의 fullWidth 소품을 사용하여 차트 너비를 늘려 뷰를 채웠습니다.

Nerdlet의 index.js 파일에서 새 구성요소를 가져오고 Nerdlet의 render() 메소드에 있는 기본 제목을 새 구성요소로 바꿉니다.

import React from 'react';
import NewsletterSignups from './newsletter-signups';

export default class AbTestNerdletNerdlet extends React.Component {
  render() {
    return (
      <div>
        <NewsletterSignups />
      </div>
    );
  }
}

nerdlets/ab-test-nerdlet/index.js

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

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

bash

$nr1 nerdpack:uuid -gf

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

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

bash

$nr1 nerdpack:serve

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

여기에서 애플리케이션에 표시된 LineChart 를 볼 수 있습니다.

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

7단계를 거쳐 New Relic 제작에 생명을 불어넣었습니다. 평범한 "Hello world" 메시지 대신, 이제 두 개의 모의 데이터 계열이 포함된 다채로운 선 차트가 표시됩니다. 이러한 데이터 시리즈는 데모 웹 사이트의 각 경쟁 디자인에 대한 서버 측 트래픽을 나타냅니다. 다음 강의에서는 다른 차트 유형을 만들어 이 기반을 구축해 보겠습니다.

코스

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

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

팁

코스