React - 구글 스프레드 시트 API 연동하기(2) - 프로젝트 설정

 

 

구글 스프레드 시트에 저장한 데이터를 API 로 받아 리액트에서 호출하여 보여주려고 한다

그러려면 구글에서 제공하는 구글 스프레드 시트 API 를 사용해야 한다. 어떻게 사용해야 할까?

 

일단 오버뷰 단위로 정리 한 번 해보자 (적어도 내가 뭘하는지는 알아야 하니까)

지난 포스팅에서는 구글 콘솔에서 할 일을 먼저 정리해보았다. 이번 포스팅에서는 프로젝트 설정을 해보려고 한다.

자, 머리에 그려졌으면 따라와보시길 !

 

1. 구글 콘솔에서 할일

 1) 서비스 계정 만들고 키 발급 받기

 2) 구글 스프레드 시트 API 페이지 라이브러리 활성화 시키기

 3) 구글 스프레드 시트 : 서비스 계정 메일 주소를 추가하기

React - 구글 스프레드 시트 API 연동하기(1) - 구글 콘솔 설정

 

 

2. 프로젝트에서 할일

 1) 구글 스프레드 시트 라이브러리 설치

 2) 라이브러리 사용해서 API 호출해보기

---

 

React - 구글 스프레드 시트 API 연동하기(2) - 프로젝트 설정

 

구글 스프레드 시트에서 API 연동을 지정해준 시트 내에서 이렇게 간단한 테스트용 테이블을 만들었다.

 

리액트 프로젝트에서 구글 스프레드 시트 라이브러리와 타입스크립트 라이브러리를 둘 다 설치해주자

$ pnpm add google-spreadsheet // 구글 스프리드 라이브러리
$ pnpm add @types/google-spreadsheet --save-dev // 타입용 라이브러리

 

 

이제 구글 스프레드 시트 API 를 호출해보자 

// 구글 시트 조회하는 로직
export const getGoogleSheet: () => Promise<GoogleSpreadsheet> = async () => {
  const doc = new GoogleSpreadsheet("스프레드시트ID", { apiKey: "API키"});
  await doc.loadInfo();
  return doc;
};

 

 

만약 성공했다면 당신은 해피케이스이다. 여기서 포스팅을 그만 보셔도 된다.

 

 

 

구글 스프리드 시트 API 연동 에러 - "API key not valid. Please pass a valid API key."

성공을 바라며 호기롭게 시작했지만 에러가 떳다. "API key not valid. Please pass a valid API key."

(여기서 나는 굉장히 당황하여 하루정도 삽질을 해대었다)

 

 

삽질했던 이유는 API 키를  다운받아온 json에서 "private_key_id" 로 넣어줬었기 때문이었다.

(당연히 invalid id 라고 메시지를 뱉어냈던 것이다...🥲)

 

 

참고로 서비스 계정을 만들때 [키] 탭에서 발급받은 id 와 private_key_id 가 일치했기 때문에 api key 로 착각을 하게 되었던 것...!

 

 

사용자 인증정보 > + 인증정보 만들기 > API 키 생성 을 해주었다

 

 

다시 제대로 API_KEY 를 넣어서 호출하니....! 이번에는 403 에러가 나왔다 

 

 

며칠전에 분명히 콘솔에서 API 를 Enable 해주었다고 생각했는데 안 되어 있었다. (아마 캡쳐만 하고 눌러주지 않은 듯)

자 그럼 [ENABLE] 로 활성화 해주기!

 

 

그럼 API 상세 화면으로 넘어가게 된다

 

 

성공! 7전 8기의 도전 끝에 드디어 200 OK 를 받아냈다