React에 HarperDB 인스턴스를 연결하는 방법

HarperDB Cloud는 CRUD 작업을 지원하는 SQL 및 NoSQL 쿼리를 지원하는 데이터베이스 서비스입니다.최소한의 구성만으로 시작할 수 있으며, 노드와 같은 서버 측 기술을 사용하여 RESTAPI를 구축하는 데 국한되지 않습니다.js.
HarperDB는 클라이언트 응용 프로그램에서 데이터베이스 클라우드 인스턴스에 직접 액세스하는 방법을 제공합니다.HTTP API가 내장되어 있어 데이터를 직접 조회할 수 있습니다.
본고에서 HarperDB 클라우드 데이터베이스 실례를 설정하고 Reactjs 응용 프로그램에서 데이터베이스를 조회하여 데이터를 얻는 방법을 보여 줍니다.HarperDB는 useHarperDB라고 불리는 React 갈고리를 제공하여 우리의 일을 더욱 쉽게 한다.

HarperDB 인스턴스 어휘표

본고는 유사한 HarperDB 데이터베이스 실례를 사용하고자 합니다. 우리는 REST API 방법과 Node를 사용하여 이 실례를 구축했습니다.우리previous post의 js.클라우드 실례를 설정하는 방법에 대한 게시물here을 보십시오.이렇게 하면 데이터 필드 테이블이 채워집니다.
상기 데이터베이스 실례 중의 모델을 dev 라고 부른다.HarperDB의 모드가 필요합니다.그것은 한 조의 표에 해당한다.기존 모드가 없으면 새 테이블을 만들 수 없고, 테이블이 없으면 HarperDB 실례에 데이터를 추가하거나 업데이트할 수 없습니다.
모드에서 하나 이상의 테이블을 추가할 수 있는 옵션이 있습니다.상술한 실례에서 이미 outlets라는 표를 만들었다.이 테이블은 줄마다 유일한 식별자 id 를 가지고 있다.
오른쪽에서 테이블에서 데이터를 찾을 수 있습니다.이 두 시간 스탬프 필드를 주의하십시오.새 줄이 테이블에 추가될 때마다 HarperDB는 자동으로 삽입되고 유지보수됩니다.
createdtime: 데이터를 삽입할 때의 시간 스탬프를 기록합니다.
UpdateTime: 모든 데이터 필드가 마지막으로 업데이트될 때의 시간 스탬프를 기록합니다.

클라우드 인스턴스를 설정한 후 React 프로젝트를 라이브러리 버전 16.8.0+ 과 함께 사용하십시오.

입문

먼저 새 React 응용 프로그램을 만듭니다.이 React 응용 프로그램을 사용하여 본고의 예시 응용 프로그램을 구축할 것입니다.터미널 창을 열고 다음 명령을 실행합니다.

npx create-react-app harperdb-integration-react

# after the project directory has been created
cd harperdb-integration-react

# install the following dependency
yarn add [email protected]

이제 React 응용 프로그램의 실행 상황을 보기 위해 개발 서버를 시작할 수 있습니다.터미널 창으로 이동하여 명령yarn start을 실행합니다.URL의 브라우저 창에서 다음과 같은 출력을 얻을 수 있습니다.http://localhost:3000/.

사용자 지정 역할을 가진 사용자 만들기

기본적으로 HarperDB 클라우드 인스턴스에서 생성된 사용자는 수퍼유저입니다.그것은 데이터를 조회하고 추가하는 관리자 권한과 기존 모드에서 테이블을 만들고 삭제하며 새 모드를 만들고 삭제하는 권한을 가지고 있다.클라이언트 응용 프로그램에서 우리는 슈퍼 사용자가 있기를 원하지 않는다.대부분의 클라이언트 응용 프로그램은 공공적이기 때문에 이것은 기본 사용자를 사용하는 좋은 방법이 아니다.
이 문제를 해결하는 방법은 데이터 테이블에서만 CRUD 작업을 수행할 수 있는 새 사용자를 만드는 것입니다.HarperDB는 사용자 정의 사용자 역할을 정의하고 이 역할을 사용하여 새 사용자를 만드는 방법을 제공합니다.
먼저 클라우드 인스턴스를 열고 탭rolesfrom the menu bar으로 이동합니다.

여기에서 사용자 정의 캐릭터를 만들기 위한 새로운 표준 역할을 정의할 수 있습니다.이 새로운 캐릭터client_user를 살펴보자.

새 역할을 만들면 이 역할을 가진 모든 사용자에게 권한을 할당할 수 있다는 인스턴스가 표시됩니다.이제 이 특정 역할에 대한 테이블과 패턴에 대한 접근 권한을 설정할 수 있습니다.지금은 하나의 패턴만 있고, 그 안에는 데이터 테이블만 있다.이 예에서는 기본 구성을 유지하고 역할 권한 업데이트 버튼을 눌러 계속합니다.

사용 권한이 업데이트되면 메뉴 모음 users 옆에 있는 탭 roles 으로 이동합니다.이것은 방금 만든 사용자 정의 역할을 가진 새 사용자를 추가하는 데 사용됩니다.드롭다운 메뉴에서 역할client_user을 선택합니다.

사용자 추가 버튼을 클릭하여 새 사용자를 추가합니다.

현재, 우리는clientReact 응용 프로그램에서 이 사용자 정의 사용자를 사용하여 표 outlets 에서 데이터를 조회할 수 있습니다.

React에서 HarperDB 통합

use-harperdb 갈고리는 React 응용 프로그램의 실례나 HarperDBProvider 구성 요소를 App 파일에 포장하는 데 사용됩니다.이것은 데이터베이스 인스턴스에서 CRUD 작업을 수행하는 데 필수적입니다.index.js 파일에 다음 가져오기 문을 추가합니다.

// ... other import statements
import { HarperDBProvider } from 'use-harperdb';

데이터베이스 실례에서 모든 CRUD 작업을 실행하려면 프로그램이 이 사용자와 관련된db 실례 URL, 사용자 이름, 비밀번호를 제공해야 합니다.우리는 환경 변수를 이용하여 이 값을 추가할 것이다.
다음 변수를 사용하여 React 프로젝트의 루트 디렉토리에 src/index.js 라는 새 파일을 만듭니다.이 변수의 값은 .env 에 설명되어 있지만, 괄호와 자신의 값을 교체해야 합니다.

REACT_APP_DB_URL=[Your Cloud Instance Provider URL]
REACT_APP_USER=[The name of the custom user with client_user role]
REACT_APP_PASSWORD=[The password associated with the custom user]

Create React App은 접두사[]의 모든 환경 변수를 읽습니다.우리는 이러한 환경 변수를 직접 사용하여 REACT_APP 제3자 라이브러리를 사용하지 않고 필요한 속성을 제공할 수 있다.

ReactDOM.render(
  <React.StrictMode>
    <HarperDBProvider
      url={process.env.REACT_APP_DB_URL}
      user={process.env.REACT_APP_USER}
      password={process.env.REACT_APP_PASSWORD}
    >
      <App />
    </HarperDBProvider>
  </React.StrictMode>,
  document.getElementById('root')
);

그렇습니다.HarperDB 데이터베이스 인스턴스를 사용하도록 React 응용 프로그램을 구성했습니다.

HarperDB에서 데이터 조회

React 응용 프로그램에서 데이터베이스 실례의 데이터를 조회하기 위해 HarperDBProvider 갈고리는 이렇게 하는 요소를 제공합니다.useHarperDB 파일을 열고 App.js 에서 갈고리를 가져옵니다.또한 데이터를 가져올 때 데이터를 표시하도록 기본 UI를 설정합니다.

import React from 'react';
import './App.css';
import { useHarperDB } from 'use-harperdb';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <h2>Starbucks Outlets</h2>
        <table>
          <thead style={{ marginBottom: '20px' }}>
            <tr>
              <td style={{ textTransform: 'uppercase' }}>City</td>
              <td style={{ textTransform: 'uppercase' }}>Name</td>
              <td style={{ textTransform: 'uppercase' }}>Latitude</td>
              <td style={{ textTransform: 'uppercase' }}>Longitude</td>
            </tr>
          </thead>
          <tbody>
            <tr>{/* TODO: display data from query */}</tr>
          </tbody>
        </table>
      </header>
    </div>
  );
}

export default App;

모든 갈고리를 사용하는 규칙은 기능 구성 요소에서만 사용할 수 있다는 것이다.use-harperdb 갈고리는 원소를 포함하는 수조를 제공하여 수조로 되돌아오는 것을 조회하는 데 사용된다useHarperDB.또한 다음과 같은 기능도 제공합니다.

data 쿼리가 실행 중인지, 데이터가 로드되지 않았는지 사용자에게 알릴 수 있습니다

loading 데이터를 조회할 때 오류가 있는지 확인

error 데이터를 얻을 수 있는 함수

데이터베이스 실례에서 데이터를 조회하려면 대상을 갈고리로 전달합니다.refresh 파일에 데이터베이스에서 모든 데이터를 얻기 위해 다음 코드 세그먼트 조회를 추가합니다.

function App() {
  const [data, loading, error, refresh] = useHarperDB({
    query: { operation: 'sql', sql: 'select * from dev.outlets' }
    // interval: 5000
  });

  //...
}

위의 코드 세그먼트에서 App.js 함수를 현저하게 사용하고 싶지 않을 때, 전달된 interval 의 두 번째 속성은 선택할 수 있습니다.그것은 밀리초 단위의 값을 받아들인다.refresh 어셈블리에서 loading 구문을 사용하여 error 및 if/else JSX를 추가합니다.

function App() {
  // ...

  if (loading) {
    return <div>Loading ...</div>;
  }

  if (error && data.length === 0) {
    return <div>Error, no data found</div>;
  }

  return (
    <div className="App">
      <header className="App-header">
        <h2>Starbucks Outlets</h2>
        <table>
          <thead style={{ marginBottom: '20px' }}>
            <tr>
              <td style={{ textTransform: 'uppercase' }}>City</td>
              <td style={{ textTransform: 'uppercase' }}>Name</td>
              <td style={{ textTransform: 'uppercase' }}>Latitude</td>
              <td style={{ textTransform: 'uppercase' }}>Longitude</td>
            </tr>
          </thead>
          <tbody>
            <tr>{/* TODO: display data from query */}</tr>
          </tbody>
        </table>
      </header>
    </div>
  );
}

짧은 시간 내에 불러오는 메시지를 볼 수 있습니다.

또한 App 을 두 번째 속성으로 전달하면 5초마다 React 응용 프로그램이 자동으로 웹 페이지를 새로 고칩니다.비헤이비어를 중지하려면 interval 속성을 삭제합니다.
이제 JavaScript의 interval 함수를 사용하여 배열을 매핑하고 내용을 표시합니다.만약 데이터가 추출된다면, 이것은 그것이 존재한다는 것을 의미하며, 우리는 수조에 쉽게 비칠 수 있다.주석 대신 다음 코드 세그먼트를 추가합니다.

<tbody>
  {data &&
    data.map((item, index) => (
      <tr key={index}>
        <td>{item.title}</td>
        <td>{item.author}</td>
      </tr>
    ))}
</tbody>

브라우저 창으로 돌아가면 다음 결과를 얻을 수 있습니다.
map 갈고리와 data 수조를 사용하여 조회할 수도 있다.데이터베이스에서 수출이나 기록의 총수를 얻기 위해 다음 조회를 추가합니다.

const [data2] = useHarperDB({
  query: {
    operation: 'sql',
    sql: 'select count(*) as totalOutlets from dev.outlets'
  }
});

총 수를 표시하려면 렌더링된 JSX 수정 구성 요소를 추가합니다.

// ...
<h2>Starbucks Outlets</h2>
<p>Total Outlets: {data2 && data2[0].totalOutlets}</p>
// ...

다음은 이 단계의 출력입니다.

결론

갈고리는 React 세계에서 아주 좋은 보충이며, 당연히 우리가 더 적은 코드를 작성하는 데 도움을 줄 수 있다.본고의 목적은 클라우드에서 관리되는 데이터베이스에서 데이터를 얻기 위해 useHarperdb 갈고리를 소개하고 React 응용 프로그램에 통합하는 방법을 소개하는 것입니다.