React로 Google 시트를 읽고 쓰는 방법

Google Sheets를 데이터 소스로 사용하는 코드 없는 앱 빌더인 Glideapps으로 빌드한 앱의 데이터를 업데이트하기 위해 React로 Google Sheets를 읽고 쓰고 싶습니다.
그 방법을 알아내는 데 꽤 오랜 시간이 걸렸습니다. 그러나 해결책은 매우 간단합니다.
요약:
- Generate a Google service account key file, get
private_key
andclient_email
values.- Get your
spreadsheet_id
andsheet_id
.- Share your spreadsheet with editing permission with the email address in your
client_email
field.- Make sure the 1st row in your spreadsheet contains the header fields. These values will be the "keys" in your data objects.
- Install google-spreadsheet and use it to connect to Google Sheets. There are very good examples in the docs here, and I have included a snippet of how to append to the spreadsheet at the bottom of this post.
다음은 스크린샷과 함께 자세한 단계별 지침입니다.
1) Google의 개발자 콘솔로 이동합니다.
https://console.developers.google.com/
"프로젝트 선택"을 클릭한 다음 "새 프로젝트"를 클릭하고 이름을 지정합니다.


"자격 증명"을 클릭하고 "서비스 계정 관리"를 클릭한 다음 "서비스 계정 만들기"를 클릭합니다.


이름과 설명을 추가한 다음 "만들기"를 클릭합니다.

선택 사항이므로 "서비스 계정 권한"페이지에서 "계속"을 클릭합니다.
선택 사항이므로 "사용자에게 이 서비스 계정에 대한 액세스 권한 부여"페이지에서 "완료"를 클릭합니다.
조치 열에서 "키 작성"을 클릭하십시오.

기본 "JSON"을 선택하면 Google에서 기본 다운로드 폴더에 키 파일을 다운로드합니다.

JSON 파일을 열면 "private_key"및 "client_email"이라는 두 개의 필드가 필요합니다.

2) Google 스프레드시트로 이동하여
spreadsheet_id
및 sheet_id
를 찾습니다.
3) 중요 키
client_email
가 있는 키 파일의 이메일 주소로 스프레드시트를 공유해야 합니다.
"사람이 추가되었습니다"메시지가 바로 표시되어야 합니다.

4) 첫 번째 행에 열 이름이 포함되어 있는지 확인하십시오.

5) Googe-Spreadsheet에는 스프레드시트를 읽고 쓰기 위한 아주 좋은 예가 있습니다.
다음은 내가 작성한 스프레드시트에 새 행을 추가하기 위한 스니펫입니다.
import { GoogleSpreadsheet } from "google-spreadsheet";
// Config variables
const SPREADSHEET_ID = process.env.REACT_APP_SPREADSHEET_ID;
const SHEET_ID = process.env.REACT_APP_SHEET_ID;
const CLIENT_EMAIL = process.env.REACT_APP_GOOGLE_CLIENT_EMAIL;
const PRIVATE_KEY = process.env.REACT_APP_GOOGLE_SERVICE_PRIVATE_KEY;
const doc = new GoogleSpreadsheet(SPREADSHEET_ID);
const appendSpreadsheet = async (row) => {
try {
await doc.useServiceAccountAuth({
client_email: CLIENT_EMAIL,
private_key: PRIVATE_KEY,
});
// loads document properties and worksheets
await doc.loadInfo();
const sheet = doc.sheetsById[SHEET_ID];
const result = await sheet.addRow(row);
} catch (e) {
console.error('Error: ', e);
}
};
const newRow = { Name: "new name", Value: "new value" };
appendSpreadsheet(newRow);
Reference
이 문제에 관하여(React로 Google 시트를 읽고 쓰는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/calvinpak/how-to-read-write-google-sheets-with-react-193l텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)