176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server. 이라는 에러가 뜨고 유저리스트가 빈배열 리턴되는데 이런 경우 어떻게 처리해야하나요?
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
무한 스크롤 구현 중에, 스크롤을 내리면 자연스럽게 다음 페이지로 이어지는 게 아니라, 한번 아래로 내려갔다가 다시 스크롤했던 위치로 돌아옵니다. 이 문제는 어떻게 해결할 수 있을까요?
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
'use client'; import React, { useEffect, useState } from 'react'; import { Auth } from '@supabase/auth-ui-react'; import { ThemeSupa } from '@supabase/auth-ui-shared'; import { createSupabaseBrowserClient } from '@/lib/client/supabase'; import useHydrate from '@/app/hooks/useHydrate'; const AuthUI = () => { const supabase = createSupabaseBrowserClient(); const isMount = useHydrate(); const [user, setUser] = useState(); const getUserInfo = async () => { const result = await supabase.auth.getUser(); console.log(result); if (result?.data?.user) setUser(result?.data?.user); }; const handleLogout = async () => { supabase.auth.signOut(); window.location.reload(); }; useEffect(() => { getUserInfo(); }, []); if (!isMount) return null; return ( <section className="w-full"> <div>{user ? `로그인 됨${user?.email}` : '로그아웃'}</div> <> {user && ( <button onClick={handleLogout} className="border-2 border-black"> 로그아웃 </button> )} </> <div className="mx-auto max-w-[500px]"> <Auth redirectTo={process.env.NEXT_PUBLIC_AUTH_REDIRECT_TO} supabaseClient={supabase} appearance={{ theme: ThemeSupa }} onlyThirdPartyProviders providers={['google']} /> </div> </section> ); }; export default AuthUI; {"code":400,"error_code":"validation_failed","msg":"Unsupported provider: provider is not enabled"} 구글 로그인 시 해당 에러가 발생합니다 설정 같은 부분은 강의에 맞게 설정하였습니다
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
# Material Tailwind 와 연관된 라이브러리 설치 npm install @emotion/react @emotion/styled @material-tailwind/react @mui/icons-material --save npm install @tailwindcss/typography autoprefixer --save-dev 지난주 공개된 next.js 15에서 Material Tailwind 설정하려니 안되서 도움 부탁드립니다. 아직 초보라 이런 부분들이 개인적으로 좀 어렵네요~~^^;
미해결
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
강좌 잘 보고 있습니다. package.json 버전은 모두 같습니다. 강좌에 있는데로 모두 supabase.com 에서 셋팅을 했습니다. 구글 로그인 코드도 다 정상 작동이 되는데 http://localhost:3000 으로 이동을 하네요. Redirect URLs 에는 http://localhost:3000/auth 로 작성해 둔 상태입니다. ㅠㅠ; "use client"; import useHydrate from "@/hooks/useHydrate"; import { createSupabaseBrowserClient } from "@/lib/client/supabase"; import { Auth } from "@supabase/auth-ui-react"; import { ThemeSupa } from "@supabase/auth-ui-shared"; import { useEffect, useState } from "react"; export default function AuthUI() { const [user, setUser] = useState(); const supabase = createSupabaseBrowserClient(); const isMount = useHydrate(); const getUserInfo = async () => { const result = await supabase.auth.getUser(); console.log(result); }; useEffect(() => { getUserInfo(); }, []); if (!isMount) return null; return ( <section className="w-full"> <div className="mx-auto max-width-[500px]"> <Auth // redirectTo={process.env.NEXT_BUBLIC_AUTH_REDIRECT_TO} redirectTo="http://localhost:3000/auth" supabaseClient={supabase} appearance={{ theme: ThemeSupa, }} onlyThirdPartyProviders providers={["google", "github"]} /> </div> </section> ); }
해결됨
프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)
안녕하세요, 강의에서 메모리 절약을 위해 인터벌을 제거하는 내용을 듣던 중 궁금한 점이 생겼는데요 만약 이벤트창이 닫혔을 때 인터벌을 종료시키고 싶다면 App.svelte가 아닌 Event.svelte 내에 OnDestroy를 작성해주면 되는거겠죠? App.svelte에 OnDestroy를 작성하신 이유는 이벤트 인덱스를 증가시키는 로직과 이벤트 텍스트 관리를 App.svelte에서 하고있으니 이벤트 창이 열리거나 닫힌 여부와는 상관 없이 App.svelte가 살아있는 동안에는 계속 이벤트배열 인덱스를 증가시키기 위해라고 이해했는데 제가 이해한 내용이 맞을까요??
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
안녕하세요! 강의 잘 듣고있습니다. 강의를 듣던 중 cannot be used as it is not authorized 라는 오류가 떠서 찾아봤는데 supabase에서 SMTP설정이 필수적으로 정책이 변경된 것 같아요.
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
카카오 로그인 까지 구현 후 vercel에 배포 까지 한 상태이고 아직 도메인은 등록 하지않았습니다만 집에서 할 때는 vscode로 로컬 서버를 열어놔서 몰랏었는데 로컬 서버를 열어놨을 때는 잘되지만 밖에서 제가 vercel에 배포한 사이트를 들어가서 카카오 로그인을 시도해보니 localhost에서 연결을 거부했습니다. ERR_CONNECTION_REFUSED 에러가 나오는데 어디가 문제 인걸까요? ㅠ
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
$ npm run build > instagram-clone@0.1.0 build > next build ▲ Next.js 14.2.12 - Environments: .env Creating an optimized production build ... ✓ Compiled successfully Linting and checking validity of types .Failed to compile. Linting and checking validity of types ...next/types/app/page.ts:8:13 Type error: Type 'OmitWithTag<typeof import("D:/Study/React/next/Supabase/instagram-clone/app/page"), "config" | "generateStaticParams" | "revalidate" | "dynamic" | "dynamicParams" | "fetchCache" | "preferredRegion" | ... 6 more ... | "generateViewport", "">' does not satisfy the constraint '{ [x: string]: never; }'. Property 'matadata' is incompatible with index signature. Type 'Metadata' is not assignable to type 'never'. 6 | 7 | // Check that the entry is a valid entry > 8 | checkFields<Diff<{ | ^ 9 | default: Function 10 | config?: {} 11 | generateStaticParams?: Function 빌드할때 오류뜹니다 .next 안에 있는 오류인데 지웠다 다시 해도 똑같아요 어떻게 해야 할까요??
미해결
[플러터플로우] 실전! 앱 출시를 위한 끝장 노하우!
Error: The given sign-in provider is disabled for this Firebase project. Enable it in the Firebase console, under the sign-in method tab of the Auth section. 강의 내용대로 설정을 마치고 실행을 했더니 위와같은 오류 메시지가 나타납니다. 로그인 버튼을 누르면 새창이 열리다가 종료되면서 해당 메시지가 보여집니다. 어떤 부분을 더 확인해봐야 할까요?
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
안녕하세요, 채팅 관련 부분에, reverseInfiniteQuery를 적용할 수 있을 것 같아, 도전해보던 찰나에 잘 안되어서 질문드립니다!! 혹시 역무한스크롤 방식으로 할 수 있는 방법이 있을까요?? 보통 실무에서 채팅을 어떠한 방식으로 구현하는지 매우 궁금합니다. 1. 역무한 스크롤 방식 2. 계속해서 refetch를 하는 방식
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
안녕하세요, Supabase 인증강좌를 너무 잘 들었습니다! 혹시 smtp 추가 강좌는 언제 추가 될 예정인지 알 수 있을까요?? 또 추가적으로, Supabase에 큰 관심이 생겨서, 학습해보면서, 개인 블로그를 제작해보고자 하는데 보통 서버비용을 얼마정도로 예상하면 될지, 뭔가 요금 같은거를 대시보드 형태로 쉽게 볼 수 있는 방법이 있는지도 궁금합니다!
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
회원가입과 로그인 기능에서 이메일 형식과 비밀번호 최소 길이 등에 대한 유효성 검사를 추가해 주실 수 있는지 궁금합니다. 현재 학습 중인데, 이 부분에 대한 자료를 추가로 올려주시면 감사드리겠습니다.
미해결
[플러터플로우] 실전! 앱 출시를 위한 끝장 노하우!
안녕하세요 선생님! 앞에 다른 질문이 있었는데, 내용이 달라서 따로 질문 드립니다 앞의 강의는 FF + firebase 에서 구글로그인 뒤의 강의는 FF + firebase 에서 kakao 로그인이 있는데 FF + supabase 사용 시 다른 소셜로그인은 어떤식으로 하시는지 궁금합니다. 감사합니다.
미해결
[플러터플로우] 실전! 앱 출시를 위한 끝장 노하우!
안녕하세요 선생님! 강의 잘 보고 있습니다. 궁금한게 있는데 혹시 FF + supabase 사용 시 push notification 은 어떻게 사용하고 계신지 궁금합니다! 감사합니다!
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
npm run dev 접속이 안되는데 무슨 오류인지 모르겠습니다 전체 코드 따라했는데 이렇게 뜹니다 layout? middleware? 이쪽 같아서 계속 건드려보다가 안되서 질문 남깁니다
해결됨
[플러터플로우] 실전! 앱 출시를 위한 끝장 노하우!
아래 두 강의 내용이 동일합니다. [인앱결제] 10. 플러터플로우-RevenueCat 연결 및 구현 [인앱결제] 11. iOS에서 인앱결제 테스트하기
해결됨
[풀스택 입문] Firebase보다 10배 좋은 Supabase
https://join.slack.com/t/lopun-lecture/shared_invite/zt-2mkxcgt5h-7Bq~fMnMJ8Scle17fzFYCQ 영상에선 supabase 설치안했는데 npm i supabase 하니깐 실행되는데.. 누락된건가요 ?
해결됨
프로젝트로 쉽게 배우는 Svelte(SvelteKit + Supabase)
영상 마지막 로직에 대해 질문드리려고 문의드립니다. onMount와 onDestory 함수로 setInterval과 clearInterval을 생명주기에 맞게 실행시키게되어 setInerval과 clearInterval을 한번씩만 실행시키는 거 같은데 $(리액티브선언문) 으로 setInterval과 clearInterval 를 작성 시 setInterval과 clearInterval이 반복적으로 호출되어 생성되었다 지웠다 하는것 같아 보이는데 이 방식이 메모리 영역에서 괜찮은건지 궁금합니다! <script> let intervalEventText; let eventIndex = 0; const eventText = [ "영화 정보 업데이트", "신규 영화 추가", "이벤트 진행중" ] import { onMount, onDestroy } from 'svelte' /** 리액티브 선언문 방식 */ $: { // 이벤트 인터벌 제거 clearInterval(intervalEventText); console.log(eventIndex) // 일정 시간 경과 후 eventIndex를 1 증가 intervalEventText = setInterval(() => { eventIndex += 1; if (eventIndex >= eventText.length) { eventIndex = 0; } }, 1000); } /** onMount & onDestory 방식 */ // onMount(()=>{ // intervalEventText = setInterval(() => { // eventIndex += 1; // if (eventIndex >= eventText.length) { // eventIndex = 0; // } // }, 1000); // }); // onDestroy(()=>{ // console.log(eventIndex) // clearInterval(intervalEventText); // }) </script> <p>{eventText[eventIndex]}</p>
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
getImageUrl을 얻는 방식을 강의 방식이 아닌 getPublicUrl을 사용해서 얻으려면 어떻게 해야 하나요?
