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

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

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

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

시작하기 전에

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

시작하다

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

GitHub 리포지터리 에서 예제를 복제하세요.

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

터미널에서 /nr1-how-to/use-nerdstorage 디렉터리로 전환합니다.
bash
```
$cd /nr1-how-to/use-nerdstorage
```
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 파일을 열고 데이터를 입력하는 데 사용된 TextField 및 Button 의 코드를 찾습니다. Button onClick 소품은 _addToNerdStorage 라는 도우미 메서드를 호출하며 이를 업데이트하여 추가해야 합니다. UserStorageMutation

UserStorage NerdStorage 구성요소에는 collection 및 documentId 가 필요합니다. 애플리케이션의 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));
    });
}

뉴렐릭에서 실행 중인 How To Use NerdStorage [NerdStorage 사용 방법] 앱 화면으로 돌아가서 페이지를 다시 로드하세요.
텍스트 입력 필드에 텍스트를 추가하고 확인 버튼을 클릭하세요. 그러면 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 [문서 삭제] 버튼이 모두 표시됩니다.

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