[JavaScript] 나만 쓰는 맛집 리스트 만들기 (카드 UI 구현) - 2. 구글 시트 연동하기

 

맛집은 점점 늘어나고,

그때마다 내가 일일히 추가하긴 번거롭고,

DB 연동을 하자니 일이 너무 커지는것같고.

그래서 찾아낸 구글시트 연동 방법!

좀 느릴때도 있지만 많지 않은 데이터 간단하게 연동하기 좋다!

DB 없이 데이터 연동하기 😁

---

 

지난 포스팅에서는 데이터를 이렇게 넣어두었었다.

const restaurants = [
  { name: "김밥천국", category: "bunsik", desc: "빠르게 한 끼 해결" },
  { name: "청년국밥", category: "korean", desc: "든든한 국밥 한 그릇" },
  { name: "뚝배기집", category: "korean", desc: "집밥 느낌 나는 백반집" },
  { name: "제육나라", category: "korean", desc: "제육 가성비 맛집" },
  { name: "이자카야 모모", category: "japanese", desc: "퇴근 후 가볍게 한잔" },
  { name: "파스타집 라라", category: "western", desc: "가성비 좋은 파스타" },
  { name: "즉석떡볶이 달인", category: "bunsik", desc: "볶아먹는 재미" },
  { name: "분식의정석", category: "bunsik", desc: "튀김+떡볶이 기본기" },
  { name: "스시하루", category: "japanese", desc: "가성비 초밥집" },
  { name: "라멘야 코우", category: "japanese", desc: "진한 돈코츠 라멘" },
  { name: "우동집 하루", category: "japanese", desc: "깔끔한 우동 한 그릇" },
  { name: "비스트로 37", category: "western", desc: "분위기 좋은 데이트 장소" },
  { name: "스테이크룸", category: "western", desc: "고기 땡길 때" },
  { name: "피자팩토리", category: "western", desc: "도우 쫀득한 피자" },
  { name: "카페 무드", category: "cafe", desc: "조용한 작업 카페" },
  { name: "브루잉 커피랩", category: "cafe", desc: "핸드드립 전문" },
  { name: "디저트하우스", category: "cafe", desc: "케이크 맛집" },
  { name: "옛날손칼국수", category: "korean", desc: "칼국수 + 김치 조합" },
];

이대로면 식당 추가될때마다 소스를 수정해야하는 번거로움이 있다.

구글 시트를 JSON API처럼 써서 간단하게 연동 해보자

 

1. 일단 구글시트 먼저 준비! 

https://docs.google.com/spreadsheets/

Google Sheets: 온라인 스프레드시트 & 템플릿 | Google Workspace

 

빈 스프레드시트를 하나 만들어서 임의로 데이터를 입력해본다.

추후에는 사용자 페이지에서 데이터를  추가 할 수 있도록 구현할 예정이다.

 

문서이름은 restaurant-list, sheet명은 restaurants로 입력하고

1행은 컬럼명으로 쓰고, 데이터를 넣어준다.

나는 id(고유값), name(식당이름), category(카테고리), price(가격), comment(한줄설명), createdAt(작성시간), createdBy(작성자) 를 추가했다.

(추후 리뷰를 받을 저장해둘 공간도 동일한 문서에서 시트를 추가할 예정)

 

 

2. App Script로 JSON 만들기

 

구글시트에서 상단 메뉴

확장프로그램 > Apps Script를 클릭

이런 기본 화면이 나오는데, 프로젝트 제목은 적당히 지어주면 되고,

Code.gs를 지우고 아래와 같이 입력한다

 

function doGet() {
  const sheet = SpreadsheetApp.getActiveSpreadsheet().getSheetByName("restaurants");
  const data = sheet.getDataRange().getValues();

  const headers = data[0]; // 컬럼명
  const rows = data.slice(1);

  const result = rows.map(row => {
    let obj = {};
    headers.forEach((header, i) => {
      obj[header] = row[i];
    });
    return obj;
  });

  return ContentService
    .createTextOutput(JSON.stringify(result))
    .setMimeType(ContentService.MimeType.JSON);
}

 

풀어서 정리 하자면,

"restaurants" 라는 시트의 데이터를 가져와서 
첫번째 행은 헤더(컬럼명)으로 쓰고, 
다음 행들은 데이터로 받아서 
JSON 형태로 변환하겠다

라는 뜻이다.

 

저장하고 우측 상단 '배포'(새배포)를 클릭한다.

유형은 "웹 앱"

설명도 적당히 쓰고, 

'액세스 권한이 있는 사용자' 를 '모든사용자' 로 변경해준다. (페이지에서 사용자가 추가 할수 있도록)

 

그리고 배포를 하고 '액세스 승인' 하면 되는데, 혹시 이런 화면이 뜬다면 

하단의 Advanced를 클릭하고

Go to (프로젝트이름) (unsafe) 를 클릭

 

여기서 Continue를 해주면 정상적으로 잘 배포가 된다.

 

 배포가 완료되고 나오는 배포ID와 웹앱 URL을 잘 저장해 두고 

이제 이 값을 이용해서 JS에서 연동을 한다.

(잘 배포가 되었는지 확인하려면 배포URL을 들어가보면 된다 json형태로 데이터가 나옴!)

 

 

3. JS에서 fetch

기존에 만든 script.js 에서 const  restaurants =  [ ... ] 는 지우고, 상단에 아래 코드를 추가한다

const API_URL = "저장해둔 웹앱 URL";

let restaurants = []; // restaurants 전역변수로 빼기

async function fetchData() {
  const res = await fetch(API_URL);
  return await res.json();
}

 

그리고 기존에 데이터를 불러오던 renderList()도 아래와 같이 수정한다

async function renderList() {
  const loading = document.getElementById("loading");
  const container = document.getElementById("cardList");

  // 로딩 보여주기
  loading.style.display = "block";
  container.innerHTML = "";

  restaurants = await fetchData();

  // 로딩 숨기기
  loading.style.display = "none";

  restaurants.forEach((item) => {
    const card = document.createElement("div");
    card.className = "card";
    card.classList.add(item.category);

    card.innerHTML = `
      <div class="title">${item.name}</div>
      <div class="category">${categoryLabel[item.category]}</div>
      <div class="desc">${item.comment}</div>
    `;

    container.appendChild(card);
  });
}

구글시트에서 name, category(지난 포스팅에 포함된 categoryLabel로 한글로 변경), 한줄평을 가져와서 뿌려준다.

 

* 데이터 불러오는데 시간이 좀 걸리는것 같아서 로딩을 추가했다

* 따라서 index.html의 #cardList 위에 로딩 div추가

<div id="loading" class="loading">⏳ 불러오는 중...</div>

** css도 조금 추가함

.loading {
  text-align: center;
  padding: 20px;
  font-size: 16px;
  color: #666;
}

 

추가로, 지난 포스팅에서 만들었던 랜덤 추천 함수 pickRandom()도 지금 구조에 맞게 수정한다

function pickRandom() {
  if (!restaurants.length) return;

  const result = document.getElementById("result");

  const randomIndex = Math.floor(Math.random() * restaurants.length);
  const pick = restaurants[randomIndex];

  result.innerHTML = "";

  const title = document.createElement("div");
  title.className = "result-title";
  title.innerText = "✔️ 오늘의 추천!";

  const card = document.createElement("div");
  card.className = "card";

  if (pick.category) {
    card.classList.add(pick.category);
  }

  card.innerHTML = `
    <div class="title">${pick.name}</div>
    <div class="category">${categoryLabel[pick.category]}</div>
    <div class="desc">${pick.comment || ""}</div>
  `;

  result.appendChild(title);
  result.appendChild(card);
}

 

여기까지 하면 구글시트와 연동은 끝났다.

구글시트에서 데이터를 추가/수정/삭제 하면 만든 페이지에서도 적용이 되는걸 볼 수 있다.

 

---

추후 포스팅할 추가사항 : 

- 맛집 정보 사용자단에서 입력/수정/삭제 하기

- 리뷰 시스템 (별점, 한줄평)

- 필터링 (카테고리, 키워드 검색 등)