📘 Netlify 저장 연동 가이드 — 대안(코드 방식)

선택 기준 — 구글시트 vs Netlify

1단계 · 함수 파일 2개 추가

1. 사이트 폴더 최상단에 netlify.toml 파일 생성 → 아래 내용:

   복사[functions]
     directory = "netlify/functions"

2. netlify/functions/ 폴더를 만들고 그 안에 data.mjs 파일 생성 → 아래 코드:

   복사import { getStore } from "@netlify/blobs";
   
   export default async (req) => {
     const store = getStore("ksdata");
     const url = new URL(req.url);
     const tab = url.searchParams.get("tab") || "";
     const cors = {
       "Access-Control-Allow-Origin": "*",
       "Access-Control-Allow-Methods": "GET,POST,OPTIONS",
       "Content-Type": "application/json"
     };
     if (req.method === "OPTIONS") return new Response("", { headers: cors });
   
     if (req.method === "GET") {
       const data = (await store.get(tab, { type: "json" })) || [];
       return new Response(JSON.stringify(data), { headers: cors });
     }
     if (req.method === "POST") {
       const body = await req.json();          // { tab, rows }
       await store.setJSON(body.tab, body.rows || []);
       return new Response(JSON.stringify({ ok: true }), { headers: cors });
     }
     return new Response("[]", { headers: cors });
   };

2단계 · 배포하면 주소 생성

1. 이 파일들을 포함해 Netlify에 배포(또는 GitHub 커밋)하면 함수가 자동 활성화됩니다.
2. 함수 주소: https://당신사이트.netlify.app/.netlify/functions/data

3단계 · 사이트에 주소 넣기 (한 줄)

1. data/_localdata.js를 열어 맨 위 줄 수정:

   복사window.KS_DATA_URL = "https://당신사이트.netlify.app/.netlify/functions/data";

2. 저장 후 다시 배포. 이제 사이트가 이 저장소에서 데이터를 읽습니다.

4단계 · 초기 데이터 넣기 (1회)

저장소가 처음엔 비어 있으므로, 현재 데이터를 한 번 넣어야 합니다. 브라우저 콘솔에서 각 탭에 대해 아래를 실행(또는 각 화면 저장버튼을 POST로 연결):

복사// 예: compliance 초기 데이터 업로드 (F12 콘솔에서)
fetch('/.netlify/functions/data', {
  method:'POST', headers:{'Content-Type':'application/json'},
  body: JSON.stringify({ tab:'compliance', rows: /* compliance.json 내용 붙여넣기 */ [] })
}).then(r=>r.json()).then(console.log);

정리