[리액트] 구글 스프레드 시트(google spread sheet) API 활용하기

📌 시작 전

인터넷에 돌아다니는 google-spreadsheet나 gapi-script 라이브러리를 사용하지 않고 구현하는 방법을 적을 예정임

---

📌 사건 전말

1. gapi-script를 사용하다가 어느 순간부터 불러오기가 안 됨(init 에러)

2. 깃이슈를 찾아보니 라이브러리 지원 중단된 모양..

   링크 : https://github.com/partnerhero/gapi-script/issues/29

3. 리액트를 사용해서 개발한 사람들 중 google-spreadsheet 라이브러리를 사용하는 사람을 발견

4. 하지만 이것도 언젠간 라이브러리 중단이 될까 미리 걱정해서 REST API로 구현하려고 했지만 OAuth 오류가 발생해서 그냥 JSON으로 데이터를 가져오는 것은 쉽게 됬지만 시트를 추가한다던지 그런 것은 불가능했음

5. 그래서 결국 찾은 것이 script 태그로 공식 구글 시트 api에서 제공하는 링크를 불러오기로 결정

---

📌 script 태그 추가하기

추가해야할 url은 두 가지임

1. https://apis.google.com/js/api.js
2. https://accounts.google.com/gsi/client

1번은 gapi를, 2번은 google을 불러올 수 있음

자바스크립트처럼 index.html에 바로 script 추가하면 오류가 발생함 그래서 js 파일 내에서 script 태그를 생성한 후 추가할건데, 두 개를 추가해야하기 때문에 react custom hook으로 만듬

✔ react custom hook 참고 링크

1. https://blog.toycrane.xyz/react%EC%97%90%EC%84%9C-%EC%99%B8%EB%B6%80-%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%B6%88%EB%9F%AC%EC%98%A4%EA%B8%B0-421fd71b0b41

2. https://www.daleseo.com/react-hooks-use-script/

나는 2번 링크가 코드가 짧길래 2번으로 활용

import { useState, useEffect } from 'react';

export const useScript = (src) => {
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    let script = document.querySelector(`script[src="${src}"]`);

    if (!script) {
      script = document.createElement('script');
      script.src = src;
      script.async = true;
      script.defer = true;
    }

    const handleLoad = () => setLoading(true);
    const handleError = (e) => setError(e);

    script.addEventListener('load', handleLoad);
    script.addEventListener('error', handleError);

    document.body.appendChild(script);

    return () => {
      script.removeEventListener('load', handleLoad);
      script.removeEventListener('error', handleError);
    };
  }, [src]);

  return [loading, error];
};

---

📌 최종

loading1과 loading2가 모두 호출이 되어야만 gapi와 google을 불러올 수 있기 때문에 둘이 호출된 후 oauth를 초기화하고 gapi를 load함

export const GoogleInit = () => {
  const [loading1] = useScript('https://apis.google.com/js/api.js');
  const [loading2] = useScript('https://accounts.google.com/gsi/client');

  const promise = new Promise((resolve, reject) => {
    const initClient = async () => {
      await window.gapi.client
        .init({
          apiKey: credentials.API_KEY,
          discoveryDocs: [
            'https://sheets.googleapis.com/$discovery/rest?version=v4',
          ],
        })
        .then(() => {
          console.log('성공');
          resolve(true);
        })
        .catch(() => {
          console.log('실패');
          reject(false);
        });
    };
    if (loading1 && loading2) {
      window.google.accounts.oauth2.initTokenClient({
        client_id: credentials.client_id,
        scope: SCOPE,
      });
      window.gapi.load('client:auth2', initClient);
    }
  });
  return promise;
};

---

📌 마지막

이걸로 진심 일주일 넘게 머가리 빡빡쳐가면서 구글링 함..
진짜 리액트 지원해주는 라이브러리 공식으로 만들어줘라...