[진도] 실용적인 도구 만들기 1: 개인 비용 관리 앱 (Supabase, 로그인 기능)[질문]강의에서는 supabase 를 사용해서 카카오 로그인을 추가 했으나현재 lovable 에서는 업데이트가 되어서ai 로 명령시 supabase 를 추가로 연결 하지 않고 자동 Lovable Cloud 기능을 탑재합니다. 이경우카카오 기능 추가를 명령하면 아래와 같이 지원이 안된다고 나옵니다. 그럼 supabase 추가로 연결 해야하나요? 카카오 로그인은 Lovable Cloud에서 기본 지원하지 않습니다. 현재 사용 가능한 소셜 로그인은 다음과 같습니다:지원되는 소셜 로그인:Google ✅ (현재 활성화됨)GitHubFacebookAppleDiscordTwitterSlackSpotify카카오 로그인을 원하시면 커스텀 OAuth 구현이나 카카오 REST API를 직접 연동해야 하는데, 이는 복잡한 작업입니다.추천 방안:구글 로그인 사용 (대부분의 한국 사용자가 구글 계정 보유)이메일/비밀번호 로그인 사용카카오 로그인은 Lovable Cloud에서 기본 지원하지 않습니다. 현재 사용 가능한 소셜 로그인은 다음과 같습니다:지원되는 소셜 로그인:Google ✅ (현재 활성화됨)GitHubFacebookAppleDiscordTwitterSlackSpotify카카오 로그인을 원하시면 커스텀 OAuth 구현이나 카카오 REST API를 직접 연동해야 하는데, 이는 복잡한 작업입니다.추천 방안:구글 로그인 사용 (대부분의 한국 사용자가 구글 계정 보유)이메일/비밀번호 로그인 사용

Google Search Console에 Sitemaps로 이동하여 sitemap.xml, rss.xml, robots.txt를 제출하였습니다.robots.txt는 오류 발생, rss.xml, sitemap.xml은 가져올 수 없음 이라는 상태가 발생하였는데GPT나 Cursor에게도 물어봤는데 같은 에러 발생하였습니다.어떻게 해결하면 될까요?네이버 서치 어드바이저에는 등록을 완료하였는데 특이사항은 없습니다.

enum 부분 강의를 듣고 있는데, 강의 자료에 public폴더가 없습니다.

현재 수강 진도를 함께 알려주세요! "1주차 3강까지 완료" 또는 "2주차 실습 중"처럼 어디까지 들으셨는지 적어주시면 맞춤형 답변을 드릴 수 있어요구체적인 상황과 함께 질문해주세요! "AI가 안 된다"보다는 "Claude에서 이런 프롬프트를 입력했는데 이런 에러가 나와요"처럼 상세하게 적어주시면 더 정확한 답변을 드릴 수 있어요스크린샷이나 코드를 첨부해주세요. 에러 화면, 현재 진행 상황을 보여주시면 문제 해결이 10배 빨라집니다! 마크다운 코드 블록(```)을 활용하면 더 깔끔하게 정리할 수 있어요커뮤니티 검색을 먼저 해보세요. 같은 문제로 고민하신 분들이 이미 해결책을 찾았을 수도 있어요. 검색 후 못 찾으시면 언제든 새로 질문해주세요!서로 도우며 함께 성장해요. 나도 모르는 건 "저도 궁금해요!"라고 댓글 달아주시고, 아는 건 적극적으로 공유해주세요. 가르치면서 더 잘하게 됩니다바이브코딩 관련 질문은 환영, 기술 세부사항은 GPT 활용! 프롬프트 작성법, AI 도구 사용법은 여기서, 복잡한 코딩 문법은 ChatGPT에게 물어보시는 게 더 빨라요진도나 과제 관련 문의는 1:1 문의를 이용해주세요. 개인적인 학습 계획, 환불, 수강 기간 연장 등은 따로 문의해주시면 더 자세히 상담드릴게요실패 사례도 공유해주세요! "이렇게 했더니 망했어요" 같은 경험담도 다른 수강생들에게 큰 도움이 됩니다. 실패도 소중한 학습 자료예요 1-7강에서 hook을 배우고 있는데 window 환경에서 cursor를 이용해서 선생님 수업 따라가는 중에 전달자료대로 세팅을 해도 claude가 setting.json을 일고 실행한 뒤에 실행 되는 게 아니고 그냥 hook 자체가 적용이 안되는데 이 문제에 대한 해결 방법을 알려주시면 감사드리겠습니다

6.3강의 3분29초~ 쯤의 서스펜스 실습을 위한 async키워드를 제거하는 과정에서 입니다.이전부터 강의를 좀 따라오다가 버전이 많이 업그레이드 되어 5챕터? 쯤이였을까요 params를 이용해 데이터패칭을 해오던때였던거 같습니다만 타입오류가 나서 챗지피티, Q&A등을 보며 Promise타입을 붙여주고 수정하여 첫번째 사진과 같이 사용하고 있었습니다. 6.3강의부터 비동기작업을 수행하지않도록 async 키워드를 제거하기 위해 분리작업도중 일어난 고민입니다. 두번째 사진처럼 수정을 하였습니다만 여기서 Page컴퍼넌트의 async 키워드를 를 뗄수있는가? 에 대해 고민을 좀했는데 챗지피티에게선 async 키워드가 있어도 서스펜스 실습엔 문제가 없다고해서 그냥 두번째 사진과 같이 작성한후에 서스펜스 실습을 따라가면 될지가 의문스러워 질문남깁니다.  추가로 버전업이 많이되어 영상과 다른점을 수정하면서 하고있는데 제가 올바른 방향으로 실습하고 있는지도 조금 궁금합니다!

업데이트가 되었는지스미더리와 피그마 페이지에 들어가보면 cursor-talk-to 피그마가 나오지 않습니다. 피그마 연결 업데이트 부분부터 진행을 못하고 있습니다..ㅠㅜ

사용되지 않은 props나 img태그로인해 에러문구가 뜨면서 빌드가 되지 않는데코드를 봐도 정환님 강의에서도 img 태그를 그대로 쓰고계신데 왜 저는 에러가 나는걸까요? 추가적으로 eslint 경고가 있으면 빌드가 안되는 것으로 알고있는데 어떻게 빌드해야하나요?

36강을 보고 소스코드를 가져오려고 하는데 깃에 src/app/(beforeLogin)/@modal/(.)i/flow/signup/page.tsx파일을 업데이트하려고하는데 깃에는 강의와 다른 코드가 올라와있습니다.3-1 코드에도 그렇고 완성 코드도 <난 가로채기지롱> 이 코드만 나와있는데 어디서 찾을 수 있나요?

안녕하세요. 강사님. 다름이 아니라 1)커서룰을 종종 커서가 찾지 못하는 경우가 발생해서 매번 커맨드 창에 직접 @으로 명시를 해주는 상황이 발생됩니다. 프롬프트 문장에 조건 커서룰) @01-common.mdc 명시된 이 부분을 찾지 못하더라구요.2)추가로 프롬프트 파일 화면 우클릭 후 new Chat 하면 해당 파일을 참조로 물고가면 좋겠는데 강의와는 다르게 참조가 누락되어 이것도 매번 드래그해서 참조를 걸어줍니다. 그에 대한 강사님만에 팁이 있을까요?

안녕하세요. 다름이 아니라 프롬프트를 실행 할 경우매번 md 파일로 만들어져서 루트 디렉토리에 쌓이게 되더라구요. 이게 많아지면서 뭔가 자꾸 컨텍스트를 들고 가는지 요구사항을 제대로 못지키는 현상이 발생되는 것 같아 md-files를 만들고 옮겨두었더니 이젠 거기에 md 파일을 생성합니다. 이럴 경우 컨텍스트가 늘어나 원하는 프롬프트 요구사항을 제대로 이행하지 못하는게 맞을까요? 강사님이라면 해당 md 파일 생성은 하지말라는 프롬프트를 추가하셨을까요?

리액트 쿼리의 suspense 스트리밍 기능 구현 중 버그가 발생해 인사이트를 얻고자 질문드립니다.상위 컴포넌트에서 useInfiniteQuery로 promise를 반환하고, 해당 promise를 자식 컴포넌트의 props로 넘긴 뒤 React의 use hook으로 감싸서 data를 반환하도록 구현했습니다. 그리고 promise를 throw하는 자식 컴포넌트를 Suspense로 감싸서 promise를 캐치하도록 했는데요.페이지 렌더링 자체는 정상적으로 되는데, request가 완료되지 않는 문제가 있습니다. 크롬 개발자도구의 Network 탭에서 document를 확인하면 "Caution: request is not finished yet"이라는 경고가 표시됩니다.TanStack Query 공식 문서에도 useInfiniteQuery의 promise 사용 시 "This can be used with React.use() to fetch data"라고 명시되어 있어 React use와 함께 사용하라고 안내하고 있는데, 혹시 이 문제의 원인을 알 수 있을까요?참고로 prefetch는 안했습니다. 그리고 prefetch 안하는 방법으로 suspense 스트리밍을 구현하고 싶습니다. 코드는 아래와 같습니다. 감사합니다! export default function DetailReviewWrapper({ pid, userId }: DetailReviewProps) { const { infoData, observerRef, isFetchingNextPage, refetch, promise } = useReviewListInfinity({ userId, pid, }) return ( <Suspense fallback={<DetailReviewLoading />}> <DetailReview pid={pid} userId={userId} promise={promise} refetch={refetch} isFetchingNextPage={isFetchingNextPage} observerRef={observerRef} /> </Suspense> ) }export default function DetailReview({ pid, userId, promise, refetch, isFetchingNextPage, observerRef, }: DetailReviewProps) { const data = use(promise) return ( <> <section> <ReviewListView userId={userId} pid={pid} data={data?.list || []} className={cn('review-list')} refetch={refetch} showPoint /> {isFetchingNextPage && <Loading />} <div ref={observerRef} /> </section>export function useReviewListInfinity(params: UseReviewListInfinityProps) { const section = useSearchParams().get('contentType') as SectionType const orderType = useRecoilValue(commentOrderState) const filterType = useRecoilValue(filterTypeState) const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch, promise } = useInfiniteQuery({ queryKey: [REVIEW_LIST_KEY, params, orderType, filterType, section], queryFn: ({ pageParam = 1 }) => getReviewApi({ uid: params.userId, pid: params.pid, section, pageInfo: { curPage: pageParam, pageSize: 20, }, orderType: orderType === 'RECOMMENDED' ? 'like' : 'date', filterType, }), select: (data) => { return { list: data.pages.flatMap((page) => page.data.list), info: data.pages[0].data.info, } }, getNextPageParam: (lastPage) => { const nextPage = lastPage.data.pageInfo.curPage + 1 return nextPage <= lastPage.data.pageInfo.pageCount ? nextPage : undefined }, initialPageParam: 1, }) const { observerRef } = useIntersectionObserver({ onScroll: () => { if (hasNextPage && !isFetchingNextPage) { fetchNextPage() } }, }) return { isLoading, isFetchingNextPage, observerRef, refetch, promise, } }const getQueryClient = (): QueryClient => new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, refetchInterval: false, refetchOnReconnect: true, refetchOnMount: true, staleTime: Infinity, gcTime: Infinity, retry: false, experimental_prefetchInRender: true, }, }, }) 무한 로딩 시 개발자 도구 캡쳐이미지입니다.  

리액트 쿼리의 suspense 스트리밍 기능 구현 중 버그가 발생해 인사이트를 얻고자 질문드립니다.상위 컴포넌트에서 useInfiniteQuery로 promise를 반환하고, 해당 promise를 자식 컴포넌트의 props로 넘긴 뒤 React의 use hook으로 감싸서 data를 반환하도록 구현했습니다. 그리고 promise를 throw하는 자식 컴포넌트를 Suspense로 감싸서 promise를 캐치하도록 했는데요.페이지 렌더링 자체는 정상적으로 되는데, request가 완료되지 않는 문제가 있습니다. 크롬 개발자도구의 Network 탭에서 document를 확인하면 "Caution: request is not finished yet"이라는 경고가 표시됩니다.TanStack Query 공식 문서에도 useInfiniteQuery의 promise 사용 시 "This can be used with React.use() to fetch data"라고 명시되어 있어 React use와 함께 사용하라고 안내하고 있는데, 혹시 이 문제의 원인을 알 수 있을까요?참고로 prefetch는 안했습니다. 그리고 prefetch 안하는 방법으로 suspense 스트리밍을 구현하고 싶습니다. 코드는 아래와 같습니다. 감사합니다! export default function DetailReviewWrapper({ pid, userId }: DetailReviewProps) { const { observerRef, isFetchingNextPage, refetch, promise } = useReviewListInfinity({ userId, pid, }) return ( <Suspense fallback={<DetailReviewLoading />}> <DetailReview pid={pid} userId={userId} promise={promise} refetch={refetch} isFetchingNextPage={isFetchingNextPage} observerRef={observerRef} /> </Suspense> ) }export default function DetailReview({ pid, userId, promise, refetch, isFetchingNextPage, observerRef, }: DetailReviewProps) { const data = use(promise) return ( <> <section> <ReviewListView userId={userId} pid={pid} data={data?.list || []} className={cn('review-list')} refetch={refetch} showPoint /> {isFetchingNextPage && <Loading />} <div ref={observerRef} /> </section>export function useReviewListInfinity(params: UseReviewListInfinityProps) { const section = useSearchParams().get('contentType') as SectionType const orderType = useRecoilValue(commentOrderState) const filterType = useRecoilValue(filterTypeState) const { fetchNextPage, hasNextPage, isFetchingNextPage, isLoading, refetch, promise } = useInfiniteQuery({ queryKey: [REVIEW_LIST_KEY, params, orderType, filterType, section], queryFn: ({ pageParam = 1 }) => getReviewApi({ uid: params.userId, pid: params.pid, section, pageInfo: { curPage: pageParam, pageSize: 20, }, orderType: orderType === 'RECOMMENDED' ? 'like' : 'date', filterType, }), select: (data) => { return { list: data.pages.flatMap((page) => page.data.list), info: data.pages[0].data.info, } }, getNextPageParam: (lastPage) => { const nextPage = lastPage.data.pageInfo.curPage + 1 return nextPage <= lastPage.data.pageInfo.pageCount ? nextPage : undefined }, initialPageParam: 1, }) const { observerRef } = useIntersectionObserver({ onScroll: () => { if (hasNextPage && !isFetchingNextPage) { fetchNextPage() } }, }) return { isLoading, isFetchingNextPage, observerRef, refetch, promise, } }const getQueryClient = (): QueryClient => new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, refetchInterval: false, refetchOnReconnect: true, refetchOnMount: true, staleTime: Infinity, gcTime: Infinity, retry: false, experimental_prefetchInRender: true, }, }, }) 무한 로딩 시 개발자 도구 캡쳐이미지입니다. 

퀴즈에 1., 2. 이런 문자들이 있어서 보기가 조금 불편합니당 ..! 그래도 이해는 가능합니다 ..ㅎㅎ

Cursor를 업데이트하고 기능을 확인하던 중에 Rules 말고도 Commands 라는 기능을 있는걸 봤어요.  설명을 읽어보고, 몇 번 실행해 보긴 했는데 Rules 를 배우고 적용해보는게 이번이 처음이라서 그런지 두 개가 비슷해보이고 차이점을 잘 모르겠네요. 제가 이해할 수 있는건 Rules는 코드를 바꿀 수 있고, Commands 바꿀 수 없다 정도인 것 같아요. Commands를 잘 쓰면 팀에서 쓰기도 좋을 것 같은데, 혹시 현재 쓰고 계신다면 라이브 강의에서 간단하게 라도 설명해주실 수 있나요? 아래는 Commands 관련 공식 링크 입니다:https://cursor.com/ko/docs/agent/chat/commands

안녕하세요. 좋은 강의로 Next.JS 수강을 마쳤습니다.그런데 수업노트에 있는 강의 피드백 폼 링크가 엉뚱한 곳으로 연결 됩니다. https://forms.gle/MhvAagJvttQCtS1f6 링크 주소를 치고 들어가면 제대로 들어 접근하는데..링크를 클릭하면 다른 곳으로 연결됩니다. 수정이 필요합니다.

안녕하세요. next.js 16 버전으로 해당 강의를 보며 달리고 있는데요.revalidateTag 설정에서 파라미터 값이 하나 더 늘어나 있습니다.revalidateTag(tag: string, profile: string | { expire?: number }): void; tag 파라미터 뒤에 profile 파라미터를 넣어야 하네요.기본적으로는 'max' 값을 넣었고, expire로 사용자 지정 만료 동작을 위한 값을 지정하게 되어 있습니다.이것이 구체적으로 어떤 매개변수인지 궁금합니다.그리고 이전의 tag 파라미터만 있을 경우 와 같은 조건의 매개변수 값은 어떻게 되는지 알고 싶습니다.    

💬 좋은 질문 예시[진도] 1주차 5강 웹사이트 만들기[질문] Lovable 에 자체 클라우드가 생기면서 supabase를 연동하기 힘들어 졌습니다.Lovable유료결제 까지 하면서 원인을 찾아보려고 했는데 일주일 동안 찾지 못 했습니다.전에 같은 질문을 하신분의 답변에 다른 분의 영상을 봤는데도, 그것으로는 해결이 되지 않는 상황입니다.아예 베이스가 없기 때문에 supabase가 뭔지도 모르는 상황이고 이 둘을 어떻게 연결해야 할지도 모르는 상황입니다. 현재 바뀐 상황을 들여다 본 후 답변 주셨으면 좋겠습니다.혹은, supabase 연동 없이 Lovable 자체 클라우드를 활용해서 강의를 진행해도 괜찮을지 알려주시면 supabese 없이 Lovable 클라우드로 진행해 보겠습니다.제가 변화에 대처하질 못하는 상황이지만, 항상 질 높은 강의 감사드립니다.

안녕하세요. 에러가 발생해서 질문드립니다.경로는 아무리 봐도 맞게 쓴거 같은데 찾지를 못 합니다.Build ErrorModule not found: Can't resolve '@/app/(afterLogin)/_component/FollowRecommend'./Desktop/FRONT/z-com/src/app/(afterLogin)/layout.tsx (10:1)Module not found: Can't resolve '@/app/(afterLogin)/_component/FollowRecommend' 8 | import LogoutButton from "@/app/(afterLogin)/_component/LogoutButton"; 9 | import TrendSection from "@/app/(afterLogin)/_component/TrendSection"; > 10 | import FollowRecommend from "@/app/(afterLogin)/_component/FollowRecommend"; | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ 11 | 12 | export default function AfterLoginLayout({ children }: { children: ReactNode }) { 13 | return ( Import map: aliased to relative './src/app/(afterLogin)/_component/FollowRecommend' inside of [project]/Desktop/FRONT/z-com/src https://nextjs.org/docs/messages/module-not-found

개인적으로 오픈 채팅방이나 카페는 별로 선호하지 않아서 혹시 안내된 디스코드 같은 경우에는 링크가 없을까요?

안녕하세요. layout 컴포넌트는 레이아웃 용도에 맞게 컴포넌트 함수명을 짓는데..page 컴포넌트는 일관되게 Page 로 컴포넌트 명을 사용하는 이유가 있나요?page 컴포넌트도 IndexPage, SearchPage, BookDetailPage 식으로 의미를 부여했으면 합니다.