정보실

웹학교

정보실

Reactjs Google 스프레드시트를 React 앱의 임시 데이터베이스로 사용

본문

우리는 맞춤형 웹 사이트를 원하고 약간의 버디는 ReactWordpress에 비해 더 빠르고, 확장 가능하며, 업데이트하기 쉬운 요즘 아이들이 하는 일이라고 말합니다.

그러나 콘텐츠를 직접 업데이트 할 수 있기를 원합니다. 모든 것처럼. 오, 포스트… 무엇? Postgres? 그게 뭘까요? 우리는 MySQL도 모릅니다. Firebase? 나는 또 다른 기술 전문 용어에 의해 공격을받는다고 느낀다! 왜 Google 스프레드 시트 만 사용할 수 없습니까?! — 글쎄, 이제 할 수 있습니다. 


https://itnext.io/using-google-sheets-as-a-database-for-react-apps-6c15b4481680 


React와 Wordpress를 비교 한 것에 대해 사과드립니다. 그것들은 완전히 별개의 짐승이며 다른 목적으로 사용됩니다. React는 Javascript 프레임 워크이고 Wordpress는 CMS (Content Management System)입니다.

워드 프레스를 의자에 묶어 모든 호스텔 (세 부분 모두)을 타거나 애국자 팬들이 톰 브래디를 숭배하는 것처럼 칭찬 할 수 있습니다 (죄송합니다, 저는 항상 이글스 팬입니다).

그러나 내가 아는 다른 사람들과 마찬가지로 Wordpress에서 나아갔습니다. 다양한 이유로 — Reddit에 가장 적합한 이유는 다음과 같습니다. 좋아, 다시 사물로 돌아 가자.


배경 


나는 2 년 전에 자원 봉사 신생 EvoXLabs의 일환으로 FAWN Initiative (비영리 단체를 위한 무료 및 접근 가능한 웹 사이트)를 운영했습니다. 대부분 정보 웹 사이트로, 종종 업데이트가 필요합니다.

그러나 이니셔티브의 기본 아이디어는 웹 사이트의 접근성을 홍보하고 옹호하는 것이기 때문에 업데이트는 거래의 일부가 아니었습니다.

이것이 바로 React가 선택되는 이유 중 하나입니다. 마술처럼 웹 사이트에 액세스 할 수 있게 된 것이 아니라 접근성이 전혀 없는 시각적으로 기능적으로 매력적인 위젯으로 구성되지 않았기 때문입니다.

예, AngularVue는 그 문제와 거의 동일했을 것입니다. 그러나 React는 독이었습니다. 어쨌든, 업데이트.

업데이트에는 두 가지 방법이 있었습니다. 조직의 직원 / 자원 봉사자들이 React에 익숙하거나 전통적인 데이터베이스를 통해 길을 탐색 할 수 있었습니다.

FAWN Initiative는 매우 신속하게 문제가 되었으며 수요에 부응하기 위한 리소스 부족과 함께 비활성 상태가 되었습니다.


Google 스프레드 시트를 입력합니다 


A screenshot of a spreadsheet in Google Sheets showing data across several rows and columns. 


약 1 년 전, 나는 React 개발자로서 내가 돌보는 원인에 기여할 수 있는 다른 방법들을 생각하기 시작했습니다. 콘텐츠를 스스로 추가 / 제거 / 수정하기 위한 병목 현상 없이 비영리 단체 용 웹 사이트를 계속 만들 수 있습니까?

그래서 사람들이 일반적으로 정보를 저장하고 가져 오기 위해 웹에서 가장 일반적으로 사용하는 도구가 무엇인지 묻기 시작했습니다. 기술 세계에서, 그에 대한 대답은 독자적인 책이 될 목록입니다.

기술 분야 이외에는 Google 스프레드 시트라는 단 하나의 답변 만 있습니다. Excel / CSV 파일은 이 목록에서 두 번째이지만 파일을 변경하고 배포하는 전체 프로세스에 대해 주저했습니다.

다행히도 다른 Google 제품과 마찬가지로 Google 스프레드 시트에는 매우 멋진 API가 있습니다. API가있는 곳에는 빛이 있습니다.


Google 스프레드 시트는 기존 데이터베이스와 비교할 수 없으며 기존 데이터베이스를 대체 할 수 없습니다.

그러나 임시 데이터베이스 인 Google 스프레드 시트가 실제로 도움이 될 수 있는 곳은 기존 데이터베이스에서 추가 수단을 통해 처리되는 즉시 사용 가능한 기록을 추적하는 기능입니다.


기술을 습득하자 


자, API가 있습니다. React은 자바 스크립트 프레임워크입니다. fetch calls, right? 또는 원하는 경우 axios. 간단해야 합니까? 글쎄,별로.


React의 가장 좋은 점 중 하나는 라우팅입니다. 페이지와 하위 구성 요소 만 탐색 할 때 전체 페이지를 다시 로드하지 않아도 됩니다. 그게 빠른 이유입니다.


따라서 여러 가지 구성 요소 (이 문맥에서 페이지와 동의어)가 있고 각 구성 요소에 fetch 호출이 있다고 가정 해 보겠습니다. 무슨 일이야?

fetch call의 위치에 따라 구성 요소가 로드 될 때마다 네트워크 호출이 있습니다. 또한 네트워크 호출은 성능을 크게 저하 시킬 수 있습니다.

하지만 그게 전부가 아닙니다. Google 스프레드 시트 API를 호출 할 때마다 호출 할당량에 따라 계산됩니다.

Google 스프레드 시트 API v4사용 한도 섹션에서 :


이 Google 스프레드 시트 API 버전은 프로젝트 당 100 초당 500 개의 요청, 사용자 당 100 초당 100 개의 요청으로 제한됩니다. 읽기 및 쓰기 제한은 별도로 추적 됩니다. 일일 사용량 제한이 없습니다. 


이러한 제약 조건을 감안할 때 우리가 실제로 원하는 것은 가능한 한 네트워크 호출을 제한하는 것입니다. 이를 통해 웹 사이트가 더 빨라지고 할당량을 최대한 활용할 수 있습니다.

예상 트래픽이 사용 제한을 초과하면 기존 데이터베이스가 사용자 요구에 가장 적합 할 수 있습니다. “Google 스프레드 시트를 사용하지 않는 경우”에 대한 뒷부분에서 이러한 시나리오를 다룹니다.


메티스 소개 


Metis는 React Apps가 Google 스프레드 시트를 임시 데이터베이스로 사용할 수 있게 해주는 HOC (Higher-Order Component)입니다. 궁금한 점이 있을 경우 Metis는 그리스 지혜의 여신의 이름을 따서 명명되었습니다.

Metis에는 GoogleSheetsProvider와 GoogleSheets의 두 가지 주요 구성 요소가 있습니다.


GoogleSheetsProvider 


GoogleSheetsProvider는 React의 Context.Provider와 매우 유사합니다. React 앱을 래핑하고 Google 스프레드 시트 문서에서 모든 시트를 가져오고 API의 원시 결과를 읽기 가능한 키 / 값 (kv) 저장소로 변환 한 후이 kv 저장소를 컨텍스트에 공개합니다. 이를 통해 컴포넌트 트리의 어느 곳에서나 kv 스토어에 액세스 할 수 있습니다.


withGoogleSheets 


withGoogleSheets는 문맥에서 특정 시트의 데이터를 쉽게 가져오고 (GoogleSheetsProvider를 통해 수행함) props을 통해 구성 요소에 사용할 수 있게 하는 상위 주문 구성 요소입니다.


기본적으로 withGoogleSheets는 Google 스프레드 시트 API에서 데이터를 가져 오지 못한 경우 (올바르지 않은 권한, 할당량 등) 렌더링 할 수 있는 매우 기본적인 구성 요소와 함께 제공됩니다. 이 HOC를 사용하면 이 기본 구성 요소를 사용자 정의하고 완전히 다른 사용자 정의 구성 요소로 대체 ​​할 수 있습니다.


withGoogleSheets는 데이터를 가져 오는 인수로 단일 시트 이름 또는 시트 이름 배열을 사용하도록 설계되었습니다. 각각을 개별적으로 지정하지 않고 모든 시트를 가져 오는 것도 지원되며 문서와 함께 잘 문서화 되어 있습니다.


기본 예 


설치 


npm install react-db-google-sheets --save 


.env 


REACT_APP_GOOGLE_SHEETS_API_KEY=[YOUR-API-KEY]
REACT_APP_GOOGLE_SHEETS_DOC_ID=[YOUR-DOC-ID] 


App.js 


import React from 'react';
import GoogleSheetsProvider from 'react-db-google-sheets';
const App = () => (
<GoogleSheetsProvider>
<MyApp />
</GoogleSheetsProvider>
);
export default App;


Component (say Hello.js) 


import React from 'react';
import { withGoogleSheets } from 'react-db-google-sheets';
const Hello = props => (
<div>
{props.db.sheet1.map(data => (
<span>{data.id}</span>
))}
</div>
);
export default withGoogleSheets('sheet1')(Hello);


더 많은 예제는 문서GitHub Repo예제 하위 폴더 아래에 언급되어 있습니다.


Google 스프레드 시트를 사용하지 않는 경우 


다행히도 지금까지는 Google 스프레드 시트를 React 앱의 임시 데이터베이스로 사용한다는 아이디어에 흥미가 있습니다. 그러나 이것이 좋은 해결책이 아닌 여러 시나리오를 생각할 수도 있습니다.


사실입니다. 몇 가지 경우가 있습니다. 문자 그대로 프로그래밍 세계의 모든 것과 마찬가지로 도구의 사용은 전적으로 요구에 달려 있으며 Metis는 그 규칙에 예외가 아닙니다.


먼저, 앞에서 언급했듯이 GoogleSheetsProvider를 사용하여 초기 웹 사이트로드 당 하나의 네트워크 호출을 제한하는 경우에도 웹 사이트에 많은 트래픽이 발생할 것으로 예상되는 경우 기존 데이터베이스를 사용하거나 Google 스프레드 시트 API에 대한 유료 요금제를 고려해야 합니다 용법.

둘째, Google 스프레드 시트를 임시 데이터베이스로 사용하려면 문서에 대한 권한을 공개적으로 볼 수 있도록 설정해야 합니다. 따라서 데이터에 사용자 액세스 권한이 필요한 암호 나 민감한 정보가 포함 된 경우 기존 데이터베이스를 사용하고 적절한 보안 프로토콜을 구현해야 합니다. Metis와 임시 스프레드 시트 데이터베이스로 Google 스프레드 시트를 사용하는 것은 정보 제공 또는 이력서 / 포트폴리오 웹 사이트와 같이 공개적으로 볼 수 있는 데이터를 위한 것입니다.


마지막으로 외래 키 (테이블 간의 상호 참조 역할을 하는 열 (Google 스프레드 시트 용어의 시트))도 필요한 경우 관계형 데이터베이스를 사용하는 것이 좋습니다.

Metis는 향후 Google 스프레드 시트를 사용하여 이를 달성하는 방법에 대한 도우미 기능 및 지침을 제공하지만 요구 사항을 평가하고 사용 사례에 가장 적합한 도구를 결정하는 것이 좋습니다.


업데이트 : 소수의 사람들과 대화를 나눈 후에는 Google 스프레드 시트 자체가 데이터베이스가 아니라는 것을 재확인 할 가치가 있습니다. 규모가 크지 않고 단순히 기존 데이터베이스가 아니기 때문에 기존 데이터베이스의 이점을 활용하지 않습니다. 그러나 확장 성이 중요하지 않고 CMS를 구축하는 것이 실용적이지 않으며 기술에 정통하지 않은 컨텐츠 관리자에게 새로운 도구를 교육하는 오버 헤드가 너무 높은 매우 구체적인 사용 사례를 고려할 때 Metis는 유리할 수 있습니다 . 요구 사항과 사용 사례를 평가 한 다음 목적에 맞는 도구를 선택하는 것이 본질적으로 중요합니다. 물론 Metis 사용 여부를 결정하는 첫 번째 요인이 되어야 합니다.


마지막 생각들 


Metis는 코드 변경 및 배포 프로세스에 대해 걱정할 필요 없이 Google 스프레드 시트를 쉽게 사용할 수 있도록 웹 사이트의 콘텐츠를 추가 / 수정 / 삭제하는 도구입니다.

Google 스프레드 시트 문서의 시트에 색상, 글꼴 크기 및 기타 스타일링 구성 요소 등을 지정하여 웹 사이트의 디자인 및 레이아웃을 관리 할 수도 있습니다.

가능성은 무한하며 사용 편의성은 매우 섹시합니다. 그러나 요구 사항을 평가하고 요구 사항에 가장 적합한 도구를 선택해야 합니다.


Metis에게 줘. 피드백, 기여, 질문-모두 환영합니다! GitHub 리포지토리에 문제를 제기하거나 질문 / 피드백과 함께 저에게 이메일 또는 트윗을 보내주십시오!



페이지 정보

조회 46회 ]  작성일20-01-23 18:27

웹학교