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

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

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

문제 신고

NerdStorage를 사용하여 데이터 추가, 쿼리 및 변형

NerdStorage는 뉴렐릭 내에서 액세스할 수 있는 문서 데이터베이스입니다. 이를 통해 한 세션에서 다음 세션으로 문서를 수정, 저장 및 검색할 수 있습니다.

NerdStorage를 사용하면 최대 64kb 크기의 개별 문서를 생성하고, 다양한 문서 컬렉션을 생성하고, 엔터티, 계정 또는 사용자 수준별로 데이터를 저장할 수 있습니다.

이 가이드에서는 NerdStorage에 데이터와 문서를 추가하는 방법을 설명합니다.

시작하기 전에

이 가이드를 이용하려면 API 키와 블루렐릭 One CLI가 필요합니다.

시작하다

먼저 뉴렐릭 내에서 NerdStorage 앱이 성공적으로 실행되도록 하세요.

뉴렐릭 One CLI를 사용하여 특수 UUID를 업데이트하고 특수성을 로컬에서 실행하세요.

  1. 터미널에서 /nr1-how-to/use-nerdstorage 디렉터리로 전환합니다.

    bash
    $
    cd /nr1-how-to/use-nerdstorage
  2. UUID를 업데이트하고 애플리케이션을 제공합니다.

    bash
    $
    nr1 update
    $
    nr1 nerdpack:uuid -gf
    $
    nr1 nerdpack:serve

앱이 성공적으로 제공되면 터미널은 뉴렐릭 에서 실행 중인 앱을 볼 수 있는 URL을 반환합니다.

URL을 로드합니다. Your apps 클릭하면 Apps 아래에 Use Nerdstorage 앱이 나열된 것을 볼 수 있습니다. 앱을 설치하려면 클릭하세요.

NerdStorage에 데이터 추가

앱이 뉴렐릭에서 실행되면 앱을 준비하고 데이터 추가를 시작할 수 있습니다.

How To Use NerdStorage [NerdStorage 사용 방법] 앱 화면에는 데이터 추가를 위한 필드가 있는 Saved to NerdStorage [NerdStorage에 저장됨] 창이 있습니다. 그러나 무언가를 입력하면 오류 메시지가 나타납니다. 이는 User 수준에서 데이터를 저장하도록 설정해야 하기 때문입니다. UserStorageMutation 구성요소의 도움으로 이 작업을 수행할 수 있습니다.

선택한 텍스트 편집기에서 애플리케이션의 ./nerdlets/use-nerdstorage-nerdlet/index.js 파일을 열고 데이터를 입력하는 데 사용된 TextFieldButton 의 코드를 찾습니다. Button onClick 소품은 _addToNerdStorage 라는 도우미 메서드를 호출하며 이를 업데이트하여 추가해야 합니다. UserStorageMutation

UserStorage NerdStorage 구성요소에는 collectiondocumentId 가 필요합니다. 애플리케이션의 index.js 파일에 있는 생성자 메서드에서 제공되는 변수를 볼 수 있습니다. .js 파일에서는 다음과 같습니다.

constructor(props) {
super(props)
this.collectionId = 'mycollection';
this.documentId = 'learning-nerdstorage';
this.state = {
isOpen: true,
storage: [],
text: '',
};
this._addToNerdStorage = this._addToNerdStorage.bind(this);
this._removeFromNerdStorage = this._removeFromNerdStorage.bind(this);
this._deleteDocument = this._deleteDocument.bind(this);
}

index.js 파일 상단에 있는 import 문에 추가하여 UserStorageMutation 를 가져옵니다.

import { UserStorageMutation } from 'nr1';

그런 다음 _addToNerdStorage 으로 시작하는 이 코드로 도우미를 업데이트합니다.

_addToNerdStorage(){
const { text, storage } = this.state;
storage.push(text);
this.setState({storage}, () => {
UserStorageMutation.mutate({
actionType: UserStorageMutation.ACTION_TYPE.WRITE_DOCUMENT,
collection: this.collectionId,
documentId: this.documentId,
document: { storage },
})
.then((res) => {
this.setState({text: ''});
Toast.showToast({ title: "NerdStorage Update.", type: Toast.TYPE.NORMAL });
})
.catch((err) => console.log(err));
});
}
  1. 뉴렐릭에서 실행 중인 How To Use NerdStorage [NerdStorage 사용 방법] 앱 화면으로 돌아가서 페이지를 다시 로드하세요.
  2. 텍스트 입력 필드에 텍스트를 추가하고 확인 버튼을 클릭하세요. 그러면 NerdStorage가 업데이트되고 앱 내에서 Toast 공지가 실행됩니다. 그러면 입력한 텍스트가 텍스트 입력 필드 아래에 테이블 행으로 표시됩니다.

NerdStorage에서 데이터 쿼리

위 섹션에 설명된 대로 데이터 저장소가 작동하게 되면 앱이 NerdStorage에서 데이터를 제대로 읽도록 해야 합니다. 그렇지 않으면 앱 페이지에서 다른 페이지로 이동할 때마다 앱이 빈 상태로 다시 로드됩니다. 이렇게 하려면 UserStorageQuery 구성요소를 추가하고 componentDidMount 메서드를 업데이트하세요.

애플리케이션의 ./nerdlets/use-nerdstorage-nerdlet/index.js 파일에 있는 가져오기 문에 추가하여 UserStorageQuery 을 가져옵니다.

import { UserStorageMutation, UserStorageQuery } from 'nr1';

그런 다음 애플리케이션에 다음 componentDidMount 메서드를 추가합니다.

componentDidMount(){
UserStorageQuery.query({
collection: this.collectionId,
documentId: this.documentId,
})
.then(({ data }) => {
if(data !== null) {
this.setState({storage: data.storage});
}
})
.catch(err => console.log(err));
}

NerdStorage 앱으로 돌아가서 텍스트 입력 필드를 사용하여 행을 몇 개 더 추가하여 변경 사항을 테스트하세요. 그런 다음 종료하고 다시 시작하세요. 애플리케이션은 다른 곳으로 이동하기 전에 입력한 모든 데이터를 로드하고 표시해야 합니다.

NerdStorage의 데이터 변형

앱 내부 테이블에 표시되는 각 NerdStorage 항목에는 특정 항목을 업데이트하는 데 사용할 수 있는 휴지통 버튼이 있습니다. 휴지통 버튼은 _removeFromNerdStorage 도우미 메서드를 호출하여 작동합니다.

이 프로세스가 작동하도록 하려면 _removeFromNerdStorage 의 코드를 업데이트하세요.

_removeFromNerdStorage(index, data){
const { storage } = this.state;
storage.pop(data);
this.setState({storage}, () => {
UserStorageMutation.mutate({
actionType: UserStorageMutation.ACTION_TYPE.WRITE_DOCUMENT,
collection: this.collectionId,
documentId: this.documentId,
document: { storage },
})
.then((res) => {
Toast.showToast({ title: "NerdStorage Update.", type: Toast.TYPE.NORMAL });
})
.catch((err) => console.log(err));
});
}

이 작업을 수행한 후 휴지통 버튼을 클릭하면 연결된 항목이 제거되고 앱이 업데이트되어 변경 사항이 표시됩니다.

NerdStorage에서 컬렉션 삭제

휴지통 버튼은 특정 항목을 한 번에 하나씩 제거하는 좋은 방법이지만 전체 NerdStorage 문서를 한 번에 삭제하는 기능이 필요할 수도 있습니다. 앱에 Delete Document [문서 삭제] 버튼을 추가하면 됩니다.

닫는 Grid 태그 바로 앞에 애플리케이션에 새 GridItem 추가합니다. 새 GridItem 에 다음 코드를 추가하여 새 버튼을 표시합니다.

<Button
onClick={() => this._deleteDocument()}
type={Button.TYPE.DESTRUCTIVE}
sizeType={Button.SIZE_TYPE.SMALL}
iconType={Button.ICON_TYPE.INTERFACE__OPERATIONS__TRASH}
>
Delete Document
</Button>;

새로운 문서 삭제 버튼은 _deleteDocument 도우미 메서드를 호출하므로 다음 코드를 사용하여 이를 업데이트해야 합니다.

_deleteDocument(){
this.setState({storage: []});
UserStorageMutation.mutate({
actionType: UserStorageMutation.ACTION_TYPE.DELETE_DOCUMENT,
collection: this.collectionId,
documentId: this.documentId,
});
Toast.showToast({ title: "NerdStorage Update.", type: Toast.TYPE.CRITICAL });
}

애플리케이션 내부로 돌아가면 이제 개별 휴지통 버튼과 새로 추가된 Delete Document [문서 삭제] 버튼이 모두 표시됩니다.

Copyright © 2024 New Relic Inc.

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