반응형
카엔입니다
카엔
카엔입니다
전체 방문자
오늘
어제
  • 분류 전체보기 (98)
    • 프론트엔드 (74)
      • JavaScript (22)
      • CSS (2)
      • React (21)
      • Next.js (12)
      • 블록체인 (2)
    • 에러 모음 (11)
    • Git (5)
    • 백엔드 (1)
      • GraphQL (1)
    • AWS (2)
    • CS (1)
    • 코딩테스트 (1)
    • 개발 이야기 (1)

블로그 메뉴

  • 홈
  • 태그
  • 방명록

공지사항

인기 글

태그

  • nextron ipc
  • git 덮어쓰기
  • 모바일 파란 박스
  • git
  • DOUBLE CHECK CONFIGURATION Please double check that you have setup a PAID OpenAI API Account. You can read more here: https://docs.agpt.co/setup/#getting-an-api-key
  • unoptimized error
  • 자바스크립트 이진수 변환
  • ec2
  • 구글 스프레드시트 API
  • nextron
  • Next.js
  • Cloudfront
  • ChatGPT
  • 웹상동작과정
  • error
  • 자릿수 채우기
  • 이벤트루프
  • useMemo
  • ipc 통신
  • useCallback

최근 댓글

최근 글

티스토리

hELLO · Designed By 정상우.
카엔입니다

카엔

구글 스프레드시트 API 조회하기 | Node.js
프론트엔드/JavaScript

구글 스프레드시트 API 조회하기 | Node.js

2023. 5. 15. 11:33

구글 스프레드시트에서 작성한 내용을 API를 통해 조회해서 간단한 DB처럼 사용할 수 있는 방법에 대해서 알아보려합니다.

속도는 느리지만 간단한 DB용도 및 크롤링하기에 좋은 것 같습니다.

방법은 다음과 같습니다.

구글 스프레드시트 설정

1. 상단에 공유 버튼을 눌러 일반 액세스에 링크가 있는 모든 사용자가 볼 수 있도록 설정해주세요

2. 그 다음 링크 복사를 눌러 링크를 확인해보시면

https://docs.google.com/spreadsheets/d/`스프레드시트\_아이디`/edit?usp=sharing

d/에서부터 다음 / 까지 적혀있는 문자가 해당 스프레드시트의 ID입니다. 저 부분만 따로 복사해주세요.

Node.js 설정

지금 알아볼 것은 단순 조회이기에 fetch나 axios와 같은 HTTP 비동기 통신만 하면됩니다.

const { data } = await axios.get(
    `https://docs.google.com/spreadsheets/d/${GOOGLE_SHEET_ID}/gviz/tq?sheet=${SHEET_NAME}`
);

여기서 GOOGLE_SHEET_ID는 방금 복사한 아이디 값이며 SHEET_NAME은 스프레드시트 하단에 있는 시트명 중 사용하실 시트명을 넣으시면 됩니다.

저 data를 조회해보시면 아래와 같이 나오게 됩니다

const convertData = (data) => {
    const splitStr = data.split("google.visualization.Query.setResponse(")[1];
    return JSON.parse(splitStr.slice(0, splitStr.length - 2)).table;
};

const { columns, rows } = convertData(data);

이제 불러온 데이터값을 적절히 사용하시면 됩니다.

저작자표시 (새창열림)

'프론트엔드 > JavaScript' 카테고리의 다른 글

웹브라우저의 동작원리  (0) 2023.06.20
TTS 자바스크립트로 구현하기  (0) 2023.06.13
자바스크립트 이진수 자릿수만큼 0 채우기  (0) 2023.04.28
리액트, Next.js에서 three.js GLFT 모델 적용하기  (0) 2023.04.25
자바스크립트 이벤트 루프가 뭘까  (0) 2023.02.16
    '프론트엔드/JavaScript' 카테고리의 다른 글
    • 웹브라우저의 동작원리
    • TTS 자바스크립트로 구현하기
    • 자바스크립트 이진수 자릿수만큼 0 채우기
    • 리액트, Next.js에서 three.js GLFT 모델 적용하기
    카엔입니다
    카엔입니다
    https://www.kaen.site/

    티스토리툴바