React가 포함된 HarperDB 인스턴스

HarperDB는 데이터 관리를 쉽게 만드는 데 중점을 둔 분산 데이터베이스입니다. SQL 및 NoSQL 쿼리를 모두 지원합니다. 서버측 기술( Catalin Pit's Build A REST API With HarperDB and FastifyJS )로 구축REST APIs하는 것 외에도 클라이언트측 애플리케이션 내부의 데이터베이스 인스턴스directly에 액세스할 수 있습니다.

이 기사에서는 HarperDB Cloud 인스턴스를 설정하고 React App 내부에서 직접 액세스하는 방법을 배웁니다.

HarperDB 클라우드 인스턴스 설정

먼저 무료 HarperDB Cloud 인스턴스에 대해 Sign up 다음을 수행해야 합니다.



가입 후 아래 대시보드에 액세스할 수 있습니다. 새 인스턴스를 만들려면 + 버튼을 클릭합니다.



다음으로 Create HarperDB Cloud Instance를 클릭합니다.



인스턴스에 대한 세부 정보를 입력합니다.



마지막으로 인스턴스 사양을 선택하고 세부 정보를 확인합니다.



인스턴스가 생성되면 대시보드에 추가됩니다.



인스턴스 카드를 클릭하면 schema를 추가하라는 메시지가 표시됩니다.



Aschema는 테이블 모음과 같습니다. 기존 스키마가 없으면 새 테이블을 생성할 수 없으며 테이블이 없으면 HarperDB 인스턴스에서 데이터를 추가하거나 업데이트할 수 없습니다. 그 안에 schema와 table를 생성해 봅시다.



테이블에 새 레코드 추가:



저장하면 레코드가 추가됩니다.

Note: The timestamp fields - __createdtime__ and __updatedtime__ are auto-generated by HarperDB.

인스턴스는 클라이언트 측 애플리케이션에서 사용할 준비가 되었습니다.

React 앱에 HarperDB 클라우드 인스턴스 통합

반응 앱 설정:

npx create-react-app harperdb-react-demo
cd harperdb-react-demo

설치use-harperdb - HarperDB에 액세스하기 위한 aReact Hook:

npm i use-harperdb --save

다음으로 다음 변수를 사용하여 프로젝트의 루트에 .env 파일을 만듭니다.

REACT_APP_INSTANCE_URL=[Cloud Instance URL]
REACT_APP_USER=[username]
REACT_APP_PASSWORD=[password]

이제 App 구성 요소를 공급자 - HarperDBProvider로 래핑하고 필요한 속성 - url , user 및 password 를 제공합니다.

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { HarperDBProvider } from "use-harperdb";

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

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

- Bloggers.js라는 하위 구성 요소를 만들고 여기에서 데이터에 액세스할 수 있습니다. 데이터를 가져오려면 useHarperDB 개체로 query 후크를 호출해야 합니다.
SQL 쿼리 - select * from hashnode.blogs는 blogs 스키마에 속하는 테이블hashnode 내의 모든 레코드를 가져옵니다. 후크는 data , loading , error , refresh 요소가 있는 배열을 반환합니다. 구조 분해를 사용하여 값의 압축을 풉니다.

import React from 'react';
import { useHarperDB } from 'use-harperdb';

function Bloggers() {
    const [data, loading, error, refresh] = useHarperDB({
        query: { operation: 'sql', sql: `select * from hashnode.blogs` },
      });

    return (
        <h2>Bloggers</h2>
    );
}

export default Bloggers;

data를 표시하고 loading 및 error를 처리해 보겠습니다.

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

function Bloggers() {
    const [data, loading, error, refresh] = useHarperDB({
        query: { operation: 'sql', sql: `select * from hashnode.blogs` },
      });
    if (loading) {
        return <div>Loading...</div>
    } 

    if(data && data.length > 0) {
        return (
            <>
            <table>
              <thead>
                <tr>
                  <td>Title</td>
                  <td>Author</td>
                  <td>URL</td>
                </tr>
              </thead>
              <tbody>
                {data.map((blog) => {
                  return (
                    <tr key={blog.id}>
                      <td>{blog.title}</td>
                      <td>{blog.author}</td>
                      <td>
                         <a href={blog.URL} 
                          target='_blank' 
                          rel="noreferrer">
                             {blog.URL}
                         </a>
                       </td>
                    </tr>
                  )
                })}
              </tbody>
            </table>
            <button onClick={refresh}>Refresh</button>
          </>
        );
    } else {
        return (
            <div>
              {error}
            </div>
          )
    }
}

export default Bloggers;

위의 코드를 살펴보겠습니다.

if loading : 로드 텍스트가 있는 div를 렌더링했습니다.

data가 존재하고 반환된 배열이 비어 있지 않은 경우: 데이터를 테이블 형식으로 렌더링했습니다.

if error : 오류를 렌더링했습니다.

Refresh 을 클릭하면 데이터를 다시 가져옵니다.

몇 가지 기본 스타일을 추가하면 다음과 같은 결과가 나타납니다.



후크에 전달된 개체에 두 번째 속성auto-refresh을 전달하여 기능interval을 활성화할 수도 있습니다.

const [data, loading, error, refresh] = useHarperDB({
        query: { operation: 'sql', sql: `select * from hashnode.blogs` },
        interval: 5000
      });

이제 5초마다 새로 고침됩니다. 이것이 이 기사의 전부입니다.

결론

이 문서의 목적은 HarperDB Cloud 인스턴스를 설정하고 React App 후크를 사용하여 use-harperdb 내부에서 직접 액세스하는 방법을 배우는 것입니다. 유용하게 사용하시길 바랍니다.

참조