Claude Code + Supabase 보안 대응 방안 Q&A목적: Supabase 사용 시 보안 위험에 대한 전문가 조언 요청출처: dalgom.bami Threads 글 (https://www.threads.com/@dalgom.bami/post/DOYjgEGEvOA?xmt=AQF0oN0fFrAEMy9AqIrJ1n__kxIwi7ImgsTyjVUTh2DH0g)안녕하세요, 강사님께서 가르쳐주신 Claude Code와 Supabase를 활용한 개발 워크플로우를 배워가면서 정말 큰 도움을 받고 있습니다. 특히 개발 속도 향상에 대해서는 정말 효과적이라고 느꼈습니다.다만, 최근에 한 Threads 글을 접하면서 몇 가지 우려사항이 생겼습니다. 실제로 Supabase를 써보니 생기는 보안 위험성에 대해 경험담을 이야기하는 글이었는데, 그 내용이 저희가 배운 워크플로우와 직접적으로 연결되는 부분이 있어서 전문가인 강사님의 견해를 정중히 구해봅니다.🚨 주요 우려사항 3가지Q1. RLS(Row Level Security) 설정의 위험성해당 글에서는 다음과 같은 문제를 지적했습니다:"여러 사용자가 엮여있는 복잡한 기능(예: 사용자 A가 사용자 B의 글에 좋아요) 의 경우, AI 코딩 도구는 복잡성을 피하기 위해 권한을 다 풀어버리는 경우 가 엄청 많았다." 실제 사례: - 비로그인 사용자도 다른 사람의 개인정보가 Response에 노출됨 - Network tab에서 확인 시 모든 데이터 조회 가능 - RLS가 제대로 설정되지 않아서 발생한 문제 질문:Claude Code(또는 다른 AI 도구)에게 Supabase 작업을 의뢰할 때, 복잡한 RLS 정책이 올바르게 설정되도록 강제할 수 있는 방법이 있을까요?개발 단계에서 이러한 RLS 오설정을 미리 감지할 수 있는 검증 방법(테스트, 문서 체크 등)이 있을까요?강사님께서 추천하시는 "올바른 RLS 지시사항"이 있을까요? 예를 들어, AI에게 요청할 때 구체적으로 어떻게 명시해야 보안 구멍이 최소화될까요?Q2. Migration 파일 관리와 AI의 한계"RLS를 Dashboard UI에서 설정하면 코드로 추적 불가능하고, AI가 기존 설정을 파악하기 어렵다. Migration 파일로 관리해야 AI가 기존 설정을 이해할 수 있지만, 이것도 AI가 여러 버전의 Migration 파일을 읽고 이해해야 한다는 의미다. 결국 AI는 기존 설정을 완벽히 이해할 수 없어서 충돌하는 설정을 추가할 확률이 높다." 질문:Claude Code로 Supabase 작업을 할 때, Migration 파일의 버전 관리를 어떻게 해야 AI가 기존 설정을 명확하게 인식할 수 있을까요?메모리 파일(CLAUDE.md)에 "현재 RLS 정책 요약" 또는 "Migration 히스토리 요약"을 저장해두는 것이 도움이 될까요?강사님께서 추천하시는 최선의 관리 방식은 무엇일까요?Option A: Dashboard UI는 절대 쓰지 말고 항상 Migration 파일로만 관리?Option B: Dashboard에서 변경 후, 매번 SQL Export해서 Migration으로 변환?Option C: 다른 방식?Q3. Trigger & RPC 오남용으로 인한 유지보수 악화"복잡한 기능을 구현할 때 AI는 점점 RLS, Trigger, RPC를 남발해서 유지보수가 아예 불가능할 정도의 코드, 기존 데이터가 손실될만한 코드를 무지성으로 찍어낸다." 질문:Claude Code에게 Supabase 작업을 의뢰할 때, Trigger와 RPC 사용을 적절히 제한하는 방법이 있을까요?예를 들어, AI에게 미리 "RPC는 이 3가지 경우에만 사용하되, 그 외에는 절대 쓰지 말아달라"라고 명시할 수 있는 효과적인 프롬프트가 있을까요?만약 AI가 불필요하게 Trigger/RPC를 추가했다고 판단되면, "이건 너무 복잡하니까 클라이언트에서 처리하자" 같은 명확한 지시사항이 도움이 될까요?Q4. 프로토타입 vs 실제 서비스 단계에서의 Supabase 사용"PoC(프로토타입) 단계에서는 Supabase를 적극 활용해도 좋지만, 실제 서비스가 시작되고 사용자가 생기면 일반 백엔드 스택으로 migration해야 한다. 다행히 PostgreSQL 기반이라 마이그레이션이 비교적 쉽다." 질문:강사님께서도 이 의견에 동의하시나요? 아니면 Supabase도 충분히 프로덕션 레벨의 보안을 유지할 수 있다고 생각하시나요?만약 동의하신다면, 어느 정도 규모(DAU, 데이터 량, 기능 복잡도)에서 백엔드 스택으로 마이그레이션하는 것이 현실적일까요?그 전환 지점까지 Supabase를 "안전하게" 사용하는 체크리스트가 있을까요?Q5. 개발자(Claude Code 사용자)가 반드시 알아야 할 백엔드 지식질문:강사님께서 생각하시는 "Supabase를 안전하게 쓰는 데 필수적인 최소한의 백엔드 지식"은 무엇일까요?그 지식들을 Claude Code 사용자들이 미리 학습하도록 권장하시는 방법이 있을까요? Q6. Claude Code + Supabase 안전 가이드라인 제안위의 위험성들을 고려할 때, Claude Code 사용자들이 Supabase를 안전하게 사용할 수 있도록 하는 일종의 "체계화된 가이드라인"이 필요하다고 생각합니다.제안 & 질문:강사님께서 생각하시는 "Claude Code + Supabase 안전 개발 체크리스트"는 어떤 형태일까요?예를 들어:□ 이 작업에 RLS가 필요한지 명확히 정의했는가? □ AI에게 요청할 때 RLS 정책을 구체적으로 명시했는가? □ Migration 파일로 저장했는가? □ 개발 환경에서 Network tab으로 데이터 노출 여부 확인했는가? □ Trigger/RPC 사용이 정말 필요한지 재검토했는가? 혹은 Supabase를 쓸 때만 따로 체크리스트를 가져야 할까요?강사님께서 향후 강의에서 이런 부분을 더 강조하거나 추가 자료를 제공하실 계획이 있으신가요?🙏 마무리강사님의 강의를 통해 Claude Code의 강력함을 많이 배우고 있습니다. 다만 강한 도구일수록 신중하게 사용해야 한다는 것을 배웠고, 특히 백엔드와 보안 관련해서는 더욱 그렇다고 생각합니다.다소 길고 상세한 질문들이지만, 강사님의 전문가적 관점에서의 조언을 진심으로 기다리고 있습니다.감사합니다! 🙏

npx create-next-app@latest . --typescript --tailwind --app터미널에 입력을 하면이런 오류가 뜨는데 왜그럴까요? 

useMutation 적용후,새로운 아이템을 추가하면,아이템은 추가 되지만 안에 컨텐츠 내용은 안나오고, 삭제도 안되네요?어디를 놓친걸까요??  

수업진행이 빨라서 따라하지 못했는데 작성하신 d-day count소스를 주셔야 따라갈듯 싶은데요. 그리고 antigravity에서 오른쪽에서 프롬프트 기술하면 중앙에 안내문서가 작성이 안되는 현상이 뭔가요? 

[진도] 1-4. 🛠 실용적인 도구 만들기 1: 개인 비용 관리 앱 (Supabase, 로그인 기능)[질문] 구글 소셜 로그인 기능 추가 및 로그인시 구글화면 에러상황: 구글 소셜 로그인 기능 추가 및 로그인프롬프트: 구글 소셜 로그인 기능을 추가해줘.에러 메시지: [스크린샷 첨부]시도해본 것: 구글 소셜 로그인 기능 추가 후 퍼블리시 화면에서 구글로 재로그인 시 에러가 뜹니다.어떻게 해결하면 될까요?

[진도] 1주차 1-4. 🛠 실용적인 도구 만들기 1: 개인 비용 관리 앱[질문] 개인 비용 관리 앱 실습중 스터디 화면(좌측영역)처럼 보여지지는 않는데 맞게 진행되는건가요?상황:시도해본 것: 개인 비용 관리 앱 진행중 입니다. supabase와 연결해서 진행하고 있어요실습 화면에서는 좌측에 SQL 명령어가 보이고 실행버튼들 등등 실제 제가 작업하는 화면과는 좀 달라서 이게 맞는지 궁금해요 (아래 이미지처럼 간단하게만 나와요) 값 입력시 supabase에 데이터가 쌓이기는 합니다.lovable 현재버전이 업데이트된거라 수업화면과 다른건지 아니면 제가 뭘 잘못진행하고 있는건지 헷갈려서 여쭤봐요  

session.tsimport type { Session } from "@supabase/supabase-js"; import { create } from "zustand"; import { combine, devtools } from "zustand/middleware"; type State = { isLoaded: boolean; session: Session | null; }; const initialState = { isLoaded: false, session: null, } as State; const useSessionStore = create( devtools( combine(initialState, (set) => ({ actions: { setSession: (session: Session | null) => { set({ session, isLoaded: true }); }, }, })), { name: "sessionStore", }, ), ); export const useSession = () => { const session = useSessionStore((store) => store.session); return session; }; export const useIsSessionLoaded = () => { const isSessionLoaded = useSessionStore((store) => store.isLoaded); return isSessionLoaded; }; export const useSetSession = () => { const setSession = useSessionStore((store) => store.actions.setSession); return setSession; }; App.tsximport { Button } from "@/components/ui/button"; import RootRoute from "./root-route"; import supabase from "@/lib/supabase"; import { useEffect } from "react"; import { useSetSession } from "@/store/session"; export default function App() { const setSession = useSetSession(); useEffect(() => { //console.log("111"); supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); return <RootRoute />; } 코드는 강의와 동일하게 잘따라간 것 같은데개발자 도구 에서 session이랑 isLoaded가 안보입니다.새로고침을 해도, 탭을 껏다 켜도, 리액트를 껏다 켜도,제미나이한테 물어봐도 이게 해결이 안됩니다..... +추가App.tsximport { Button } from "@/components/ui/button"; import RootRoute from "./root-route"; import supabase from "@/lib/supabase"; import { useEffect } from "react"; import { useIsSessionLoaded, useSession, useSetSession } from "@/store/session"; export default function App() { const setSession = useSetSession(); const session = useSession(); const isLoaded = useIsSessionLoaded(); useEffect(() => { //console.log("111"); supabase.auth.onAuthStateChange((event, session) => { setSession(session); }); }, []); useEffect(() => { console.log("현재 세션 상태:", { session, isLoaded }); }, [session, isLoaded]); // 값이 바뀔 때마다 실행됨 return <RootRoute />; } 이렇게 하고 새로고침하면 콘솔에는 찍히긴 합니다 단순한 리덕스 툴킷 버그인지콘솔에 찍히니까 넘어가도 상관없는지 모르겠습니다. 

💬 좋은 질문 예시[진도] 2주차 8강 AI, 이제 피그마를 직접 그리게 하라[질문] curl -fsSL https://bun.sh/install | bash위 명령어를 터미널에 넣어도 Websocket server running on port 3055가 안 뜹니다. 상황: curl -fsSL https://bun.sh/install | bash위 명령어를 터미널에 넣어도 Websocket server running on port 3055가 안 뜹니다.에러 메시지: 어떻게 해결하면 될까요?

안녕하세요.next.js 강의에서도 zustand나 tanstack query 같은 리액트 라이브러리들을 다뤄주시나요?해당 강의도 도서 관련 프로젝트 실습을 하는 것 같은데 인증이나 무한스크롤, 낙관적 업데이트를 다루는 지 궁금합니다!

shadcn에서 radix ui와 base ui 차이는 뭔가요? 그리고 어떤 걸 선택해야 할까요?

제목과 같이updateTodo 함수 생성시 화살표 함수 사용 안하는 이유궁긍합니다! ai 질문하니 스타일 차이라던데 혹시 다른이유가 있을까요? this 관점에 차이가 있다고는 하는데 현재 프로젝트에서는 딱히 의미가 없을거 같아 문의 드립니다!

투두 삭제할 때 mutation 부분 코드를 강의와 똑같이// use-delete-todo-mutation.ts export function useDeleteTodoMutation() { const queryClient = useQueryClient(); return useMutation({ mutationFn: deleteTodo, onSuccess: (deletedTodo) => { queryClient.setQueryData<Todo[]>(QUERY_KEYS.todo.list, (prevTodos) => { if (!prevTodos) return []; return prevTodos.filter((prevTodo) => prevTodo.id !== deletedTodo.id); }); }, }); } 이렇게 치면 바로 삭제가 안 되고 새로고침해야 적용이되는데 export function useDeleteTodoMutation() { const queryClient = useQueryClient(); return useMutation({ mutationFn: deleteTodo, onSuccess: (_data, deletedId) => { queryClient.setQueryData<Todo[]>(QUERY_KEYS.todo.list, (prevTodos) => { if (!prevTodos) return []; return prevTodos.filter((prevTodo) => prevTodo.id !== deletedId); }); }, }); }이렇게 작성하면 바로 삭제 적용이 됩니다. 무슨 차이가 있는 걸까요?? 그리고 강의에 왜 처음 코드는 바로 삭제 반영이 안 되는 건지 궁금합니다 ㅜㅜ!

라우트 가드 학습 중 궁금한 점이 생겨서 질문드립니다!import { useSession } from "@/store/session"; import { Navigate, Outlet } from "react-router"; export default function MemberOnlyLayout() { const session = useSession(); if (!session) return <Navigate to={"/sign-in"} replace={true} />; return <Outlet />; }라우트 가드에서는 인증 정보 유무만 검사하고, 인증 정보 만료 여부는 별도로 확인하지 않나요?만약 그렇다면 인증 정보가 만료된 상황에서의 처리 방법이 궁금합니다! 고민해봤을 때 인터셉터 등 별도 로직으로 구현해 다음과 같이 처리할 것 같습니다접근한 페이지에서 인증이 필요한 요청 처리가 있다면 refreshToken을 이용해 accessToken을 재발급 한 뒤 요청을 재시도한다 refreshToken도 만료되었다면 요청을 취소하고 로그인 페이지로 리디렉션 한다 그런데 이렇게 처리하면 refreshToken도 만료된 사용자는 인증 정보가 있으므로 요청 페이지로 이동한다짧은 순간이나마 데이터가 없는 빈 화면이나 깨진 UI를 본다로그인 페이지로 리디렉션되며 혼란을 겪는다그래서 라우트 가드에서 만료된 경우 접근을 막아야 되지 않을까 생각해봤는데 매번 토큰 유효성 검증을 수행하면 성능 저하가 발생할 것 같다는 생각을 했습니다 어떻게 처리하면 좋을지 의견을 여쭤보고 싶습니다!

안녕하세요! 항상 강의 잘 듣고있습니다 :)강의에서 onAuthStateChange를 사용해서 사용자 로그인 시 세션 데이터가 변경되며 업데이트된 세션이 매개변수로 전달되고, 업데이트된 세션을 스토어에 보관했었습니다supabase를 사용하지 않는다면 세션 데이터 변경을 어떻게 감지하고, 스토어에 보관 해야될지 고민해봤는데 세션 데이터를 사용하는 곳에서 직접 저장 / 수정하는 방법 혹은 강의에서 배웠던 persist와 subscribeWithSelector를 활용한 방법도 있을 것 같은데 명확한 방법이 떠오르지 않아 강의 내용과는 조금 방향성이 다르지만 질문드리게 되었습니다! 

id를 전부 string으로 변경했음에도 계속 오류가 발생해서 ai한테 도움을 요청했더니 create-todo.ts에 header값을 붙이라고 하더라고요!그래서 해당 파일 코드에 headers: { 'Content-Type': 'application/json',}를 붙여줬더니 정삭작동하는 걸 확인할 수 있엇습니다. 왜 이 헤더를 붙여줘야 하는 건가요?import { API_URL } from '@/lib/constants'; import type { Todo } from '@/types'; export async function createTodo(content: string) { const response = await fetch(`${API_URL}/todos`, { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ content, isDone: false }), }); if (!response.ok) throw new Error('Create Todo Failed'); const data: Todo = await response.json(); return data; }

타입스크립트 강의를 따로 안들어서 그런데 컴포넌트 별로 props를 넘길때 언제는 구조분해할당으로 넘기고 언제는 그냥 타입만 선언해서 넘기던데 따로 판단하는 기준이 있을까요? CommentEditor 컴포넌트 props 넘길때 {postId}:{postId : number} 과(postId : number) 의 차이가 명확히 그려지지가 않습니다.

안녕하세요!프로젝트 만들기 시 '계속' 탭이 비활성화가 되어서 넘어가지 않는데 어떻게 해야할까요?

안녕하세요! 강사님이 얘기해주신 부분에서 구현을 다했고, 추가로 구글로그인도 적용시켰습니다!이후에, 카카오 로그인 관련해서 적용하려고 앱설정 및 AI 도움을 받아 하려했는데, 구현 부분에서 막혔습니다.잘못된 요청 (KOE205)onebite-log 서비스 설정에 오류가 있어, 이용할 수 없습니다.서비스 관리자의 확인이 필요합니다.서비스 관리자라면 아래를 확인해보세요.왜 에러가 발생하나요?접기설정하지 않은 카카오 로그인 동의 항목을 포함해 인가 코드를 요청했습니다.설정하지 않은 동의 항목: account_email어떻게 해결할 수 있나요?접기앱 관리 페이지의 [카카오 로그인] > [동의항목]에서 동의 항목 설정을 변경하거나, 설정하지 않은 동의 항목을 제외하고 재요청합니다.이걸 해결하기 위해선 동의항목에 가서 비즈앱으로 전환하는 방법 밖에 없는 지 궁금하여 문의드립니다!

안녕하세요! ui 관련해서 궁금한 것이 있어 질문드립니다.Popover와 같이 radix-ui 와 @/components/ui (shadcn/ui ..?) 있는 컴포넌트의 경우, 어떤 것을 사용하는지에 대한 기준이 있을까요?? PopoverClose 는 @radix-ui 에서 받아오는데, 어떤 것은 @/components/ui 에서 가져와서 사용하고 그래서 혹시나 기준이 있나 궁금해서 질문드립니다!

섹션2 1-3 강의를 수강 중입니다.아래 화면과 같이 supabase 연동이 되지 않습니다.무시하고 수업을 들으려 했는데 구글 로그인 연동부터는 막혀서 질문을 올립니다.(가계부 페이지는 또 새창 띄우기를 안 해도 구글 로그인이 되긴 합니다)supabase가 연동 된 것처럼 보이나, supabase에서 lovable의 프로젝트나 데이터를 볼 수 없습니다.