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

과제에 필요한 ERD를 작성하고 이제 데이터를 JSON으로 만들려다가 이전에 유니티 과제 할 때 스프레드 시트에서 JSON으로 파일 변환해 데이터를 가져와 활용한 경험이 떠올랐습니다.

 

그래서 자바스크립트에서도 그게 가능할거라 생각이 되어 인터넷을 찾아보다가 그 방법을 알려주는 하나의 블로그를 찾았습니다.

 

https://cryingsun.tistory.com/51

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

 

그런데 위에 방법은 스프레드 시트 하나의 시트만 가져와서 조금 바꿀 필요가 있었습니다.

 

그래서 다음과 같이 수정했습니다.

 

 

1. 환경 변수 설정

기존에는 코드 안에 직접 시트 ID와 API 키를 작성했지만, 수정된 코드는 다음과 같이 dotenv 패키지를 사용하여 .env 파일로부터 불러오도록 변경했습니다.

import dotenv from 'dotenv';
dotenv.config();

const SHEET_ID = process.env.SHEET_ID; // 스프레드시트 ID
const API_KEY = process.env.API_KEY; // 구글 스프레드 API 키

 

이 방식은 깃허브에 코드가 올라가더라도 API 키와 시트 주소 같은 민감 정보가 노출되지 않도록 보호해줍니다.

---

2. 시트 메타데이터 가져오기

특정 시트 하나만 불러오는 대신, 전체 파일 내 모든 시트 정보를 가져오도록 수정했습니다.

    const metaUrl = `https://sheets.googleapis.com/v4/spreadsheets/${SHEET_ID}?key=${API_KEY}`;
    const metaResponse = await fetch(metaUrl);
    const metaData = await metaResponse.json();
    if (!metaData.sheets) {
      throw new Error(
        'Could not retrieve sheet information. Please check your SHEET_ID and API_KEY.',
      );
    }
    
    // 모든 시트의 제목만 추출
    const sheetTitles = metaData.sheets.map((sheet) => sheet.properties.title);

---

3. 각 시트별 데이터 요청

추출한 시트 제목(title)을 이용해 각각의 시트 데이터를 불러옵니다.

    for (const title of sheetTitles) {
      // Assuming data is always in columns A-H.
      const sheetRange = `${title}!A:L`;
      const dataUrl = `https://sheets.googleapis.com/v4/spreadsheets/${SHEET_ID}/values/${sheetRange}?key=${API_KEY}`;

      console.log(`Fetching data from "${title}"...`);
      const dataResponse = await fetch(dataUrl);
      const sheetData = await dataResponse.json();
      
      ...
      }
      
      
        // 데이터 유효성 검사
  if (sheetData.values && sheetData.values.length > 2) {
    // 실제 데이터 처리
  } else {
    console.log(`No data, header, or type row found in sheet: "${title}"`);
    allSheetsData[title] = [];
  }
}

 

---

4. 속성 분리 (헤더 / 타입 / 데이터)

각 시트 데이터는 다음과 같이 세 부분으로 나누어 처리했습니다.

• 첫 번째 행: 속성 이름 (예: id, name, price …)
• 두 번째 행: 속성 타입 (예: int, float, string …)
• 세 번째 행 이후: 실제 데이터

        const headers = sheetData.values[0]; // 속성 이름, id,name, 기타 등등
        const types = sheetData.values[1]; // 속성에 타입, int, float, string...
        const dataRows = sheetData.values.slice(2); // 저 위에 2개를 제외시키고 실제 데이터 값

---

5. JSON 변환

데이터 행(dataRows)을 순회하면서, 타입에 맞게 변환하여 JSON 객체로 가공했습니다.

        const jsonData = dataRows.map((row) => {
          const rowObject = {};
          headers.forEach((header, index) => {
            const value = row[index] || '';
            const type = types[index];
            if (type === 'int') {
              const parsedValue = parseInt(value, 10);
              rowObject[header] = isNaN(parsedValue) ? 0 : parsedValue;
            } else if (type === 'float') {
              const parsedValue = parseFloat(value);
              rowObject[header] = isNaN(parsedValue) ? 0.0 : parsedValue;
            } else {
              rowObject[header] = value;
            }
          });
          return rowObject;
        });
        
        allSheetsData[title] = jsonData;

---

 

6. JSON 파일 생성

최종적으로 시트 제목을 키로 하고, 해당 데이터를 value로 갖는 JSON 파일을 생성했습니다.

    for(var data in allSheetsData){
        const outPath = path.join(__dirname, `./assets/${data}.json`);
        const loadData = allSheetsData[data];
        const object = {
          name: data,
          data: loadData,
        };
        fs.writeFileSync(outPath, JSON.stringify(object, null, 2), 'utf-8'); // 파일 생성
        console.log(`\nSuccessfully saved all sheet data to ${data}`);
    }

---

결론

오늘은 구글 스프레드시트 데이터를 불러와 자동으로 JSON 파일로 변환하는 방법을 구현했습니다.  알려준 사이트에서는 단일 시트만 가져올 수 있었지만, 전체 시트를 메타데이터에서 추출해 반복적으로 처리하는 방식으로 확장했습니다.

 

또한, .env를 사용해 시트 ID와 API 키를 안전하게 관리하도록 개선했으며, 데이터 구조를 속성명 / 타입 / 데이터로 나누어 JSON 변환 시 타입 안정성을 보장했습니다.

 

마지막으로 변환된 데이터를 시트별 JSON 파일로 저장하여, 프로젝트 내에서 바로 사용할 수 있게 했습니다. 이번 과정을 통해 스프레드시트를 단순한 문서가 아닌, 구조화된 데이터베이스처럼 활용할 수 있다는 점을 배웠습니다.