자바스크립트(JavaScript) 구글스프레드시트 데이터 가져오기

Google Sheets 데이터 가져오기

==========

1. 구글 드라이브에서 시트를 하나 만들어줍니다.

구글 드라이브 주소 // https://drive.google.com/drive/my-drive //

신규 시트 만들기 - 신규 > Google 스프레드시트 > 빈 스프레드시트

2. 빈 시트가 나타납니다.

3. 아래 데이터를 입력해줍니다.

번호,동물,학명,서식지,평균 수명,특징
1,사자,Panthera leo,아프리카 사바나,10-14년 (야생),무리 생활; "정글의 왕"
2,호랑이,Panthera tigris,아시아의 숲,10-15년 (야생),강력한 사냥 능력; 단독 생활
3,코끼리,Loxodonta africana,아프리카 초원,60-70년,지능 높고 사회성 발달
4,기린,Giraffa camelopardalis,아프리카 사바나,25년,긴 목과 다리; 초식동물
5,치타,Acinonyx jubatus,아프리카 사바나,10-12년,최고의 단거리 달리기; 빠른 속도
6,코뿔소,Rhinocerotidae,아프리카 및 아시아,35-50년,두꺼운 피부와 뿔; 멸종 위기
7,펭귄,Spheniscidae,남극 및 남반구 해안,15-20년,날지는 못하지만 수영 능력 우수
8,캥거루,Macropus,호주,6-8년,강한 뒷다리; 점프로 이동
9,코알라,Phascolarctos cinereus,호주 숲,10-15년,유칼립투스 잎 주식; 느긋한 생활
10,여우,Vulpes vulpes,북반구 전역,3-6년 (야생),영리하고 적응력 강함

4. 아래와같이 제일 위에 붙여넣습니다.

5. A열을 클릭해 선택해줍니다.

6. 데이터 > 텍스트를 열로 분할을 클릭해줍니다.

7. 컴마(,)로 구별되어 각 행에 맞게 들어갑니다.

8. index.html 파일을 하나 만들고 아래 내용을 입력해줍니다.

SHEET_ID, SHEET_RANGE, API_KEY를 사용자의 정보로 입력해줘야합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Google Sheets API</title>
</head>
<body>
  <div id="data"></div>
  <script>
    const SHEET_ID = '';
    const SHEET_RANGE = '';
    const API_KEY = '';
    const SHEET_URL = `https://sheets.googleapis.com/v4/spreadsheets/${SHEET_ID}/values/${SHEET_RANGE}?key=${API_KEY}`;
    fetch(SHEET_URL)
      .then(response => response.json())
      .then(data => {
        console.log(data);
        document.getElementById('data').textContent = JSON.stringify(data, null, 2);
      })
      .catch(error => console.error('데이터 가져오기 에러:', error));
  </script>
</body>
</html>

9. 구글 드라이브에서 공유를 눌러 방금 만든 시트를 공유링크를 만들어줍니다.

10. 제한됨에서 링크가 있는 모든 사용자로 바뀌면 됩니다.

11. 아래 링크복사를 눌러 링크를 복사해줍니다.

복사된 링크

https://docs.google.com/spreadsheets/d/1s9oR58PGO--okexJ97ur4cYaA3EyG0vBYN5N2hQIb3o/edit?usp=sharing

12. 링크에 빨간 부분은 지우고 검정부분만 사용합니다.

https://docs.google.com/spreadsheets/d/1s9oR58PGO--okexJ97ur4cYaA3EyG0vBYN5N2hQIb3o/edit?usp=sharing

사용할 부분 : 1s9oR58PGO--okexJ97ur4cYaA3EyG0vBYN5N2hQIb3o

13. SHEET_ID에 붙여 넣어줍니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Google Sheets API</title>
</head>
<body>
  <div id="data"></div>
  <script>
    const SHEET_ID = '1s9oR58PGO--okexJ97ur4cYaA3EyG0vBYN5N2hQIb3o';
    const SHEET_RANGE = '';
    const API_KEY = '';
    const SHEET_URL = `https://sheets.googleapis.com/v4/spreadsheets/${SHEET_ID}/values/${SHEET_RANGE}?key=${API_KEY}`;
    fetch(SHEET_URL)
      .then(response => response.json())
      .then(data => {
        console.log(data);
        document.getElementById('data').textContent = JSON.stringify(data, null, 2);
      })
      .catch(error => console.error('데이터 가져오기 에러:', error));
  </script>
</body>
</html>

14. SHEET_RANGE는 시트의 이름과 데이터를 가져올 행의 범위를 적어줍니다.

시트의 이름은 시트1로 되어있고

아래의 시트에서는 A 부터 F까지 데이터가 있으니 시트1!A:F 라고 적어줍니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Google Sheets API</title>
</head>
<body>
  <div id="data"></div>
  <script>
    const SHEET_ID = '1s9oR58PGO--okexJ97ur4cYaA3EyG0vBYN5N2hQIb3o';
    const SHEET_RANGE = '시트1!A:F';
    const API_KEY = '';
    const SHEET_URL = `https://sheets.googleapis.com/v4/spreadsheets/${SHEET_ID}/values/${SHEET_RANGE}?key=${API_KEY}`;
    fetch(SHEET_URL)
      .then(response => response.json())
      .then(data => {
        console.log(data);
        document.getElementById('data').textContent = JSON.stringify(data, null, 2);
      })
      .catch(error => console.error('데이터 가져오기 에러:', error));
  </script>
</body>
</html>

만약 데이터 위치가 아래처럼 다르다면 시트1!C:H 로 적어주면 됩니다.

15. 마지막 API_KEY에는 키값을 적어주면됩니다.

우선 구글에 구글 클라우드 콘솔을 검색해줍니다.

16. 검색 결과에서 Cloud 관리 콘솔을 클릭하거나 아래 주소로 접속해줍니다.

// https://cloud.google.com/cloud-console?hl=ko //

17. 아래와 같은 창이뜨면 내 콘솔로 이동을 눌러줍니다.

18. 내 콘솔 검색창에 Google Sheets API 를 입력후 맨위의 Google Sheets API를 선택해줍니다.

19. 아래와 같은 창이뜨면 사용을 눌러줍니다.

20. 잠시 기다리면 아래와 같은 창이 뜨면 오른쪽 사용자 인증 정보 만들기를 클릭해줍니다.

21. 애플리케이션 데이터를 선택하고 다음을 누릅니다.

22. 계정이름과 계정 ID를 적어주고 완료를 누릅니다.

23. 아래와 같은 창이 뜹니다.

24. 화면 왼쪽메뉴에 사용자 인증 정보를 클릭해줍니다.

25. 화면 가운데 사용자 인증 정보 만들기를 클릭해줍니다.

26. API 키 를 선택합니다.

27. 기다리면 API 키 생성 완료라고 뜨며 키값이 나옵니다.

28. 해당 값을 복사해 API_KEY에 붙여 넣어줍니다.

해당 키값은 절대 비공개로 해야합니다.

// AIzaSyDh3yKuqmRYM6nWx_wG7lBzMYm0bF1IYCg //

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <title>Google Sheets API</title>
</head>
<body>
  <div id="data"></div>
  <script>
    const SHEET_ID = '1s9oR58PGO--okexJ97ur4cYaA3EyG0vBYN5N2hQIb3o';
    const SHEET_RANGE = '시트1!A:F';
    const API_KEY = 'AIzaSyDh3yKuqmRYM6nWx_wG7lBzMYm0bF1IYCg';
    const SHEET_URL = `https://sheets.googleapis.com/v4/spreadsheets/${SHEET_ID}/values/${SHEET_RANGE}?key=${API_KEY}`;
    fetch(SHEET_URL)
      .then(response => response.json())
      .then(data => {
        console.log(data);
        document.getElementById('data').textContent = JSON.stringify(data, null, 2);
      })
      .catch(error => console.error('데이터 가져오기 에러:', error));
  </script>
</body>
</html>

29. index.html 파일을 열어보면 값을 잘 가져오는것을 볼 수 있습니다.

30. 사용 방법

// SHEET_RANGE
const SHEET_RANGE = '시트1!B2';
// { "range": "'시트1'!B2", "majorDimension": "ROWS", "values": [ [ "사자" ] ] }

// data.values
document.getElementById('data').textContent = JSON.stringify(data.values, null, 2);
// [ [ "동물", "학명", "서식지", "평균 수명", "특징" ], [ "사자", "Panthera leo", "아프리카 사바나", "10-14년 (야생)", "무리 생활; \"정글의 왕\"" ], [ "호랑이", "Panthera tigris", "아시아의 숲", "10-15년 (야생)", "강력한 사냥 능력; 단독 생활" ], [ "코끼리", "Loxodonta africana", "아프리카 초원", "60-70년", "지능 높고 사회성 발달" ], [ "기린", "Giraffa camelopardalis", "아프리카 사바나", "25년", "긴 목과 다리; 초식동물" ], [ "치타", "Acinonyx jubatus", "아프리카 사바나", "10-12년", "최고의 단거리 달리기; 빠른 속도" ], [ "코뿔소", "Rhinocerotidae", "아프리카 및 아시아", "35-50년", "두꺼운 피부와 뿔; 멸종 위기" ], [ "펭귄", "Spheniscidae", "남극 및 남반구 해안", "15-20년", "날지는 못하지만 수영 능력 우수" ], [ "캥거루", "Macropus", "호주", "6-8년", "강한 뒷다리; 점프로 이동" ], [ "코알라", "Phascolarctos cinereus", "호주 숲", "10-15년", "유칼립투스 잎 주식; 느긋한 생활" ], [ "여우", "Vulpes vulpes", "북반구 전역", "3-6년 (야생)", "영리하고 적응력 강함" ] ]

// data.values[1]
document.getElementById('data').textContent = JSON.stringify(data.values[1], null, 2);
// [ "사자", "Panthera leo", "아프리카 사바나", "10-14년 (야생)", "무리 생활; \"정글의 왕\"" ]

// data.values[1][0]
// document.getElementById('data').textContent = JSON.stringify(data.values[1][0], null, 2);
// "사자"

'javascript' 카테고리의 다른 글

자바스크립트 Base64로 이미지 파일 바이트로 바꾸기 (0)	2025.02.16
구글 드라이브에 있는 이미지의 공유 링크 구글 시트로 한번에 가져오기 (0)	2025.02.13
내컴퓨터 ip 확인하기 가져오기 ip가져오는 api 사이트 (1)	2024.10.14
자바스크립트로 랜덤 문자열 생성하기 (0)	2024.10.08
자바스크립트로 페이지네이션(pagination) 만들기 (0)	2024.10.08

해가 울면 해운대

자바스크립트(JavaScript) 구글스프레드시트 데이터 가져오기

'javascript' 카테고리의 다른 글

티스토리툴바

자바스크립트(JavaScript) 구글스프레드시트 데이터 가져오기

'javascript' 카테고리의 다른 글

'javascript' Related Articles

티스토리툴바