• /
  • EnglishEspañol日本語한국어Português
  • 로그인지금 시작하기

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

영문본과 번역본이 일치하지 않는 경우 영문본이 우선합니다. 보다 자세한 내용은 이 페이지를 방문하시기 바랍니다.

문제 신고

NRQL 데이터 맞춤설정

팁

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

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

이 시리즈에서는 A/B 테스트 데이터를 다양한 차트로 보여주는 New Relic 피규어, 줄여서 NR1 앱을 만들고 있습니다. 대부분의 차트에는 이 시리즈의 시작 부분에서 실행한 데모 서비스에서 가져온 데이터가 표시되어야 합니다.

지난 단원에서는 New Relic의 데이터베이스에서 가져온 실제 데이터를 다음 차트에 제공했습니다.

  • 버전별 뉴스레터 구독
  • 버전 A - 페이지 조회수
  • 버전 B - 페이지 조회수
  • 버전당 총 구독 수

구독 및 페이지 조회 데이터를 쿼리한 경험이 있으므로 더 많은 차트에 데이터를 제공할 준비가 되었다고 느낄 수 있습니다.

  • 버전 A - 페이지 조회수와 구독수
  • 버전 B - 페이지 조회수와 구독수

그러나 이러한 차트는 두 가지 다른 소스( subscription 이벤트 및 pageView 이벤트)의 데이터를 비교하기 때문에 데이터를 제공한 차트와 다릅니다.

이 단원에서는 여러 소스의 데이터가 동일한 차트에 존재하도록 형식을 지정하는 방법을 알아봅니다.

데이터 탐색기에서 데이터 실험

New Relic 홈페이지 상단 탐색 메뉴에서 Data explorer [데이터 탐색기] 로 이동하세요.

여기에서 subscription 이벤트 및 pageView 이벤트 쿼리를 실험하여 앱에서 올바른 데이터를 가져올 수 있습니다.

맞춤형 대시보드 메뉴에서 Custom events [구독을] 선택하세요.

이는 지난 30분 동안의 분당 구독 이벤트 합계를 NRDB에 쿼리하고 해당 데이터를 차트에 표시합니다.

이러한 구독 이벤트와 연관된 속성 목록을 보려면 Dimensions [차원을] 클릭하십시오.

이러한 차원을 사용하여 구독 이벤트를 필터링하고 그룹화할 수 있습니다. Version A - Page views vs. subscriptions [버전 A - 페이지 조회수와 구독 비교] 및 Version B - Page views vs. subscriptions [버전 B - 페이지 조회수와 구독의 경우] 구독 합계를 page_version 기준으로 필터링하려고 합니다.

NRQL 쿼리를 클릭하여 쿼리 빌더로 이동합니다.

여기에서 쿼리를 보고 수동으로 편집하여 필요한 데이터를 가져올 수 있습니다.

page_version 기준으로 구독 합계를 필터링하려면 WHERE 절을 추가하세요.

SELECT count(*) FROM subscription WHERE page_version = 'a' SINCE 30 MINUTES AGO TIMESERIES

개수를 가져오려면 TIMESERIES 절을 제거하세요.

SELECT count(*) FROM subscription WHERE page_version = 'a' SINCE 30 MINUTES AGO

지난 주의 합계를 보려면 SINCE 절을 수정합니다.

SELECT count(*) FROM subscription WHERE page_version = 'a' SINCE 7 DAYS AGO

Run [실행을] 클릭하면 꺾은선형 차트 대신 빌보드 차트로 시각화된 데이터를 볼 수 있습니다.

Version A - Page views vs. subscriptions [버전 A - 페이지 조회수와 구독수] 및 Version B - Page views vs. subscriptions [버전 B - 페이지 조회수와 구독수에는] 총 4개의 데이터 값이 필요합니다.

  • 버전 A의 전체 구독 합계

  • 버전 A의 전체 기간 페이지 조회수 합계

  • 버전 B의 전체 구독 합계

  • 버전 B의 전체 기간 페이지 조회수 합계

    쿼리 빌더를 사용해 올바른 데이터를 가져오는 4개의 쿼리를 찾아보세요. 결국 다음과 같은 네 가지 쿼리가 생성됩니다.

    SELECT count(*) FROM subscription WHERE page_version = 'a' SINCE 7 DAYS AGO
    SELECT count(*) FROM pageView WHERE page_version = 'a' SINCE 7 DAYS AGO
    SELECT count(*) FROM subscription WHERE page_version = 'b' SINCE 7 DAYS AGO
    SELECT count(*) FROM pageView WHERE page_version = 'b' SINCE 7 DAYS AGO

    기술적인 세부 사항

    다른 구조화된 쿼리 언어와 달리 NRQL은 소스 간에 데이터를 조인하는 메커니즘을 제공하지 않습니다. 이것이 subscription 이벤트 총계와 pageView 이벤트 총계를 얻으려면 두 개의 쿼리를 수행해야 하는 이유입니다.

    지금까지는 모든 차트에 단일 쿼리를 제공했습니다. 여기서는 차트당 두 개의 쿼리를 제공해야 합니다. 나머지 단계에서는 여러 소스의 데이터를 병합하기 위해 NrqlQuery 결과를 맞춤설정하는 방법을 알아봅니다.

여러 소스의 NRQL 병합

교과 과정 저장소 의 customize-nrql-data/ab-test 디렉터리로 변경합니다.

bash
$
cd nru-programmability-course/customize-nrql-data/ab-test

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

Nerdlet의 totals.js 파일에서 VersionTotals 에 constructor() 및 React 수명 주기 메서드 componentDidMount() 를 구현합니다.

import React from 'react';
import {
    HeadingText,
    NrqlQuery,
    TableChart,
} from 'nr1';


export default class VersionTotals extends React.Component {
    constructor() {
        super(...arguments);


        this.state = {
            tableData: {
                metadata: {
                    id: `totals-${this.props.version}`,
                    name: `Version ${this.props.version}`,
                    columns: ['name', 'count'],
                },
                data: [
                    {
                        name: 'Subscriptions',
                        count: 0
                    },
                    {
                        name: 'Page views',
                        count: 0
                    },
                ],
            }
        }
    }


    componentDidMount() {
        NrqlQuery.query({
            accountIds: this.props.accountIds,
            query: `SELECT count(*) FROM subscription WHERE page_version = '${this.props.version}' SINCE 7 DAYS AGO`,
            formatType: NrqlQuery.FORMAT_TYPE.RAW
        }).then(({ data }) => {
            if (data.raw) {
                let tableData = {...this.state.tableData}
                tableData.data[0].count = data.raw.results[0].count
                this.setState({tableData})
            }
        })


        NrqlQuery.query({
            accountIds: this.props.accountIds,
            query: `SELECT count(*) FROM pageView WHERE page_version = '${this.props.version}' SINCE 7 DAYS AGO`,
            formatType: NrqlQuery.FORMAT_TYPE.RAW
        }).then(({ data }) => {
            if (data.raw) {
                let tableData = {...this.state.tableData}
                tableData.data[1].count = data.raw.results[0].count
                this.setState({tableData})
            }


        })
    }


    render() {
        return <div>
            <HeadingText className="chartHeader">
                Version {this.props.version.toUpperCase()} - Page views vs. subscriptions
            </HeadingText>
            <TableChart data={[this.state.tableData]} fullWidth />
        </div>
    }
}

중요

<YOUR NEW RELIC ACCOUNT ID> 실제 New Relic 계정 ID 로 바꿔야 합니다.

여기에서는 구성 요소 생성자의 상태를 초기화합니다. 상태에는 TableChart 에 대한 시리즈 데이터와 메타데이터를 보유하는 단일 값 tableData 이 있습니다. componentDidMount() 에서는 이 상태의 데이터를 채우는 데이터를 쿼리합니다.

componentDidMount() 컴포넌트 트리에 컴포넌트가 마운트될 때 호출되는 React 수명주기 메서드입니다. 생성자 대신 이 메서드를 사용하여 데이터를 쿼리합니다. New Relic에서 데이터를 요청하는 논리가 부작용을 일으키고 상태 값을 설정하기 때문입니다. 둘 중 어느 것도 생성자에서 수행해서는 안 됩니다.

componentDidMount() 에서는 NrqlQuery 새로운 방식으로 사용합니다. 먼저 데이터를 차트에 직접 제공하는 대신 데이터를 수정하려고 하기 때문에 formatType 를 NrqlQuery.FORMAT_TYPE.RAW 에 지정했습니다. 이전에는 차트의 render() 메서드에서 JSX 형식을 사용했습니다. 둘째, query() 메서드를 호출하고 결과를 콘솔에 기록하는 then() 콜백에서 처리했습니다.

Nerdlet의 index.js 파일에서 ACCOUNT_ID 이라는 상수를 생성하고 이를 VersionTotals 에 전달합니다.

import React from 'react';
import { ChartGroup, Grid, GridItem } from 'nr1';
import EndTestSection from './end-test';
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 ACCOUNT_ID = 123456  // <YOUR-ACCOUNT-ID>
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' accountId={ACCOUNT_ID} />
                </GridItem>
                <GridItem columnSpan={6}>
                    <VersionTotals version='b' accountId={ACCOUNT_ID} />
                </GridItem>
                <ChartGroup>
                    <GridItem columnSpan={6}>
                        <VersionPageViews version='a' />
                    </GridItem>
                    <GridItem columnSpan={6}>
                        <VersionPageViews version='b' />
                    </GridItem>
                </ChartGroup>
                <GridItem columnSpan={12}><EndTestSection /></GridItem>
                <GridItem columnSpan={12}><PastTests /></GridItem>
            </Grid>
        </div>
    }
}

중요

<YOUR NEW RELIC ACCOUNT ID> 실제 New Relic 계정 ID 로 바꿔야 합니다.

nru-programmability-course/customize-nrql-data/ab-test 에서 Nerdpack의 루트로 이동합니다.

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

bash
$
nr1 nerdpack:uuid -gf

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

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

bash
$
nr1 nerdpack:serve

New Relic 에서 앱으로 이동합니다.

애플리케이션의 오류를 찾는 데 유용한 로그를 보려면 즐겨 사용하는 브라우저에서 개발자 도구를 켜고 Console [콘솔] 로 이동하세요.

  • FireFox 지침

  • 사파리 지침

  • 크롬 지침

    앱이 화면에 표시되면 콘솔에서 NRQL 데이터를 확인하세요.

    이 콘솔 로그는 찾고 있는 데이터, 즉 subscription 또는 pageView 개수를 data.raw.results[0].count 에서 찾을 수 있음을 알려줍니다. 다음 단계는 해당 개수를 state.tableData 에 저장하는 것입니다.

    팁

    문제가 해결되지 않으면 이러한 디버그 도구를 사용하여 문제를 식별해 보세요.

    다음 사항을 확인하세요.

    • 강의에서 코드를 올바르게 복사했습니다.
    • 새로운 UUID를 생성했습니다.
    • 프로젝트에 있는 모든 <YOUR NEW RELIC ACCOUNT ID> 을(를) 실제 New Relic 계정 ID로 대체했습니다.

totals.js 에서 쿼리 데이터를 다음 상태로 저장합니다.

import React from 'react';
import {
    HeadingText,
    NrqlQuery,
    TableChart,
} from 'nr1';


export default class VersionTotals extends React.Component {
    constructor() {
        super(...arguments);


        this.state = {
            tableData: {
                metadata: {
                    id: `totals-${this.props.version}`,
                    name: `Version ${this.props.version}`,
                    columns: ['name', 'count'],
                },
                data: [
                    {
                        name: 'Subscriptions',
                        count: 0
                    },
                    {
                        name: 'Page views',
                        count: 0
                    },
                ],
            }
        }
    }


    componentDidMount() {
        NrqlQuery.query({
            accountIds: this.props.accountIds,
            query: `SELECT count(*) FROM subscription WHERE page_version = '${this.props.version}' SINCE 7 DAYS AGO`,
            formatType: NrqlQuery.FORMAT_TYPE.RAW
        }).then(({ data }) => {
            if (data.raw) {
                let tableData = {...this.state.tableData}
                tableData.data[0].count = data.raw.results[0].count
                this.setState({tableData})
            }
        })


        NrqlQuery.query({
            accountIds: this.props.accountIds,
            query: `SELECT count(*) FROM pageView WHERE page_version = '${this.props.version}' SINCE 7 DAYS AGO`,
            formatType: NrqlQuery.FORMAT_TYPE.RAW
        }).then(({ data }) => {
            if (data.raw) {
                let tableData = {...this.state.tableData}
                tableData.data[1].count = data.raw.results[0].count
                this.setState({tableData})
            }


        })
    }


    render() {
        return <div>
            <HeadingText className="chartHeader">
                Version {this.props.version.toUpperCase()} - Page views vs. subscriptions
            </HeadingText>
            <TableChart data={[this.state.tableData]} fullWidth />
        </div>
    }
}

액세스하는 데이터에 세심한 주의를 기울이십시오. 빼기 지수는 올바르게 작성하는 데 특히 중요합니다. 구독 데이터는 state.tableData.data[0].count 로 이동해야 합니다. 왜냐하면 tableData 에서는 데이터의 첫 번째 요소이기 때문입니다.

data: [
    {
        name: 'Subscriptions',
        count: 0
    },
    {
        name: 'Page views',
        count: 0
    },
],

유사한 논리에 따라 페이지 조회 데이터는 state.tableData.data[1].count 으로 이동해야 합니다.

Nerdpack이 로컬로 제공되면 애플리케이션을 보고 실제 데이터를 제공하는 차트를 확인하세요 .

팁

문제가 작동하지 않으면 브라우저의 디버그 도구를 사용하여 문제를 식별해 보세요.

다음 사항을 확인하세요.

  • 강의에서 코드를 올바르게 복사했습니다.
  • 새로운 UUID를 생성했습니다.
  • 프로젝트의 <YOUR NEW RELIC ACCOUNT ID> 의 모든 vit을 실제 뉴렐릭 계정 ID로 교체했습니다.

이번 강의에서는 NrqlQuery.query() 사용하여 여러 소스에서 데이터를 가져와 차트에서 사용할 수 있는 데이터로 결합하는 방법을 배웠습니다. NR1 애플리케이션에는 모의 데이터를 사용하는 두 개의 차트가 여전히 있습니다.

  • 버전당 총 구독 취소
  • 과거 테스트

안타깝게도 사용자가 뉴스레터 구독을 취소하거나 A/B 테스트를 종료할 때 데모에서는 사용자 정의 New Relic 이벤트를 생성하지 않습니다. 다음 강의에서는 NerdGraph 및 NerdStorage를 사용하여 Past tests [과거 테스트를] 채우는 방법을 배우게 됩니다.

코스

이 강의는 처음부터 New Relic 제작 방법을 가르치는 과정의 일부입니다. 다음 강의로 계속 진행하세요: Nerdlet에서 NerdStorage에 액세스하세요.

Copyright © 2024 New Relic Inc.
채용정보서비스 이용약관DMCA 정책개인정보 고지쿠키 정책영국 현대판 노예법

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.