SNS 대시보드 연동하기

소개

SNS 대시보드 스터디 프로젝트를 Claude Code(AI 코딩 에이전트)와 함께 실제로 실행하고, Supabase 데이터베이스까지 연결하는 전 과정을 시도했습니다.

단순히 코드를 읽는 것에서 그치지 않고, "왜 화면이 안 뜨는가" 라는 실제 문제를 AI와 함께 디버깅하고 해결하는 경험을 해보고 싶었습니다. 또한 SNS 연동(X, Instagram, YouTube)에 필요한 인증키 발급 과정을 직접 이해하고 실습하는 것이 목표였습니다.

진행 방법

사용 도구: Claude Code (VS Code 확장)

진행 순서 및 사용 프롬프트:

① 대시보드 실행

옆에 대시보드를 띄워줄수 있니?

→ Claude가 package.json 확인 후 npm run dev 자동 실행, localhost:5173 접속 안내

② 흰 화면 디버깅

대시보드 화면이 안뜨는데 조치해줘

→ Claude가 supabase.js의 더미 클라이언트 버그 발견

원인: 데모 모드의 dummyClient가 .select().eq().single() 체인을 지원하지 않아 런타임 에러 발생

수정 전 코드:

const dummyClient = {
  from: () => ({
    select: () => ({ order: () => Promise.resolve({ data: [], error: null }) }),
    ...
  }),
};

수정 후 코드:

const resolved = (data = null, error = null) => {
  const p = Promise.resolve({ data, error });
  const chain = {
    then: (...args) => p.then(...args),
    catch: (...args) => p.catch(...args),
    order: () => chain,
    eq: () => chain,
    single: () => p,
    select: () => chain,
  };
  return chain;
};

③ SNS 인증키 설정 문의

유튜브 인증키 설정방법을 알려줘
인스타그램 연동 방법을 알려줘
나의 x계정과 연동하고 싶어. 필요한 인증키를 발급 받았는데 이값을 어떻게 입력하고 설정해야하는지 단계별로 알려줘

④ Supabase 연결

Supabase 연결이 필요해
env파일을 생성해줘
서버 재시작을 해줘

→ Claude가 필요한 테이블 SQL 자동 생성, .env 파일 생성, 서버 재시작까지 자동 처리

결과와 배운 점

배운 점

• AI 에이전트는 단순 질답을 넘어 파일 읽기 → 버그 탐색 → 코드 수정까지 자율적으로 처리함

• .env 파일 생성, 서버 실행 등 CLI 작업도 자연어 명령 하나로 가능

• SNS API 연동(Meta, Google, Twitter)의 전체 구조를 한 번에 파악할 수 있었음

시행착오

• 처음에 흰 화면이 뜨는 원인을 콘솔에서 직접 찾으려 했으나, Claude에게 맡기니 소스 코드 레벨에서 더 빠르게 원인 파악

• Supabase anon 키가 채팅에 노출되어 키 재발급 필요 (보안 주의)

꿀팁

• 문제 상황을 스크린샷으로 보여주면 Claude가 훨씬 빠르게 상황 파악

• "조치해줘", "생성해줘", "재시작해줘" 처럼 결과 중심으로 짧게 요청하는 것이 효과적

앞으로의 계획

• Supabase 테이블 생성 후 실제 X(Twitter) 발행 기능 테스트

• Instagram, YouTube 연동 완성

도움 받은 글 (옵션)

• 본 스터디 제공 프로젝트: sns-dashboard-study-main

• Supabase 공식 문서: supabase.com/docs

• Meta Graph API 공식 문서