Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
안녕하세요! 좋은 강의 잘 들었습니다! 강의 중 내용에 관한 질문이 있어 여쭙니다. 현업에서 작은 사이드 프로젝트를 운영중인데 기존에는 Firebase를 사용하다가 SQL DB가 필요해 Supabase로 이전을 고려하다 강의를 듣게 되었습니다. 다름이 아니라 Supabase에서도 REST API 형태를 지원하는 것으로 알고 있는데 강의 내용을 보면, REST API 형태를 사용하는 것이 아닌, 직접 Supabase의 Database에 CRUD 하는 것으로 여겨집니다. 보안이나 코드의 유지 / 보수, 또는 프론트 개발자와 백엔드 개발자의 역할 분리 등 여러 측면을 고려하였을 때 REST API 형태가 아닌 프론트 코드 내에 직접 CRUD 코드가 구현된 이유가 무엇인지 궁금합니다.
안녕하세요 로펀님. 강의 잘 듣고 있습니다. useInfiniteQuery에서 반환하는 hasNextPage를 이용해 fetchNextPage를 하는데 searchMovies에서 작성한 const hasNextPage = count > page * pageSize 는 사용하지 않는 것 같아서 질문 올립니다! {data?.pages ?.map((page) => page.data) ?.flat() ?.map((movie) => ( <MovieCard key={movie.id} movie={movie} /> ))} 에서도 searchMovies 에서 반환하는 page, pageSize, hasNextPage를 제외하고 data만 쓰시길래 작성하신 이유가 궁금합니다. useInfiniteQuery에서 반환하는 hasNextPage와는 다른 건가요??
Supabase의 DB로 로그인 검증 기능을 만들려고 해요 그런데 로그인 검증을 하기 위해서 예외처리를 테스트 하는데 error 400 (Bad request) 가 발생 합니다. 데이터 값이 있으면 로그인은 됩니다. 하지만 존재 하지 않는 값의 예외처리를 할려 하는데 무조건 error 400 (Bad request) 가 나타나내요 이 문제를 해결해 줄 수 있는분 답변 부탁 드립니다. const handleLogin = async (e) => { e.preventDefault(); if (!email || !password) { alert('이메일과 비밀번호를 입력해주세요.'); return; } // 이메일 형식 확인 (정규식 사용) const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; if (!emailPattern.test(email)) { alert('올바른 이메일 형식을 입력해주세요.'); return; } if (password.length < 6) { alert('비밀번호는 최소 6자 이상이어야 합니다.'); return; } try { const { data, error } = await supabase.auth.signInWithPassword({ email, password, }); if (error) { alert('이메일 또는 비밀번호가 잘못되었습니다.'); return; } if (data?.user) { alert('로그인이 완료되었습니다.'); navigate('/'); } else { alert('회원 정보가 존재하지 않습니다.'); } } catch (err) { console.error('오류 발생:', err); alert('오류가 발생했습니다. 잠시 후 다시 시도해주세요.'); } };
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
Supabase 가 업데이트 되면서, 강의 화면과 다른 부분이 있어서 질문드립니다. Direct connection / Transaction pooler / Session pooler 차이가 무엇인가요? 강의를 따라가기 위해 Transaction pooler 를 사용해서 연결은 하긴 했습니다.
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 안녕하세요. recoil 강의 부분에서 하나의 에러로 인해서 진행이 막힌 상태입니다! TypeError: Cannot destructure property 'ReactCurrentDispatcher' of ' {imported module [project]/nodemodules/next/dist/compiled/react/index.js [app-client] (ecmascript)} .default.__SECRET_INTERNALS_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' as it is undefined. "dependencies": { "next": "15.1.6", "react": "^19.0.0", "react-dom": "^19.0.0", "recoil": "^0.7.7" }, next 15 & react 19 버전으로 진행중이었는데 구글링을 해보아도 다들 더이상 recoi은 사용하지말라 이런 답만 알려주고있어 해결하기가 어려운 상태네요. 결국 버전문제인 것 같은데, 최신 버전으로 해당 문제가 해결이 어렵다면 다른 상태관리 라이브러리를 사용하며 진행하고싶은데요, Zustand 라이브러리를 사용해도 진행에 무리없을까요?
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
강의를 본격적으로 듣기에 앞서 Live Demo를 살펴보려했는데, 링크 접속 자체에는 문제가 없으나, 로그인 클릭시 리다이렉트 url이 잘못되었는지 정확한 이유는 모르곘으나 "This site can't be reached" 에러가 뜨네요?! 확인 좀 해주실 수 있을까요?!
플러터플로우에서 cloud_functions를 배포할 때 위와 같은 에러가 발생해서 파이어베이스의 Authentication의 설정에보면 차단함수가 열려있지 않습니다. 이것을 열고 함수를 설정하는 부분이 나오는데 아마도 변경된것같아요. 참고 링크 남겨드립니다. https://firebase.google.com/docs/auth/extend-with-blocking-functions?hl=ko&authuser=0&_gl=1*xve8tr*_ga*MTAyNjM2NTU2Ni4xNzI2ODIxNzcw*_ga_CW55HF8NVT*MTczNjczOTQ5Mi4yMDkuMS4xNzM2NzQxMTE4LjYwLjAuMA..&gen=2nd
3. Android 설정방법 및 플러터플로우에서 실행하기를 따라하였습니다. 첨부해주신 유튜브에서 자바 환경변수까지 작업을 수행하였습니다. https://www.youtube.com/watch?v=yP9LdwxVaNk 첫번째 영상의 url이나 동영상이 현재 존재하지 않습니다. 현재 2번을 수행하려고 하는데 url을 요청드립니다.
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 깃허브에 올라온 선생님 코드를 모두 복붙해봐도 없어지지 않는데 무엇이 문제일까요? 선생님 코드와 같은데..
컴포넌트 클라이언트인 ThemeProvider를 최상위 layout의 children을 감싸면 정적인 서버 컴포넌트를 더 이상 활용할 수 없는 제약이 생기지 않나요?? nextjs에서 지향하는 방법인지 잘 모르겠습니다. 이렇게 사용해도 되는것인가요? 아니면 단순 빠른 예제실습을 위해 그렇게 하신건가요?
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
강의를 듣다가 궁금한 점이 생겨서 질문드립니다. 브라우저에서 실행되는 코드에서는 브라우저 클라이언트를 사용하고, 서버에서 실행되는 코드에서는 서버 클라이언트를 사용합니다. - [ Creating a Supabase client for SSR ]( https://supabase.com/docs/guides/auth/server-side/creating-a-client?queryGroups=framework&framework=nextjs&queryGroups=environment&environment=client#create-a-client ) @supabase/ssr 라이브러리를 사용해서 2가지 유형의 클라이언트를 생성합니다. 클라이언트 컴포넌트 클라이언트(createBrowerClient) - 브라우저에서 실행되는 클라이언트 컴포넌트에서 Supabase에 접근 서버 컴포넌트 클라이언트(createServerClient) - 서버에서만 실행되는 서버 컴포넌트, 서버 액션 및 라우트 핸들러에서 Supabase에 접근 서버 컴포넌트로 동작하는 page 컴포넌트에서 각 클라이언트를 사용해 번갈아 API 호출을 해봤는데 동일하게 작동하는 것 같았습니다. 서버 컴포넌트에서 Supabase의 클라이언트/서버 클라이언트가 동작하는 방식의 차이가 있는지, 렌더링 방식에 차이가 있는지 궁금합니다. 서버와 클라이언트 개념과 렌더링 방식(SSR, CSR)이 자꾸 혼동되어 헷갈리네요.. import { getTodos as getTodosClient } from '@/apis/todos'; import { getTodos as getTodosServer } from '@/actions/todos'; export default async function page() { const todos = await getTodos...(); } // todos.ts import { createBrowserSideClient } from "@/lib/client/supabase"; export const getTodos = async() => { const supabase = await createBrowserSideClient(); const result = await supabase.from("todos").select("*"); return result.data; } // todos.action.ts import { createServerSideClient } from "@/lib/server/supabase"; export const getTodos = async() => { const supabase = await createServerSideClient(); const result = await supabase.from("todos").select("*"); return result.data; }
영화목록 컴포넌트 만들기 영상에서 Movies 컴퍼넌트로 분리할때 좋아요 버튼 작동이 안되니까 handleLike 함수를 프롭스로 넘겨주는데요. 영상에서는 잘 되는데 동일하게 소스도 쳐보고 올려주신 github 소스도 가지고 와서 붙여넣어봐도 console창에서는 data 안의 likeCount 값이 버튼을 클릭하면 변경되는게 보이는데 실제로 화면에서는 변경이 되지 않습니다. 왜 그럴까요. 그리고 작동이 되는 게 영상에서도 보이는데, 저한테는 왜 안되는지도 궁금합니다. ;;;; 아래 .toUpperCase() 도 저는 왜 실행이 안될까요.;;
너무 첫 부분이라 민망하긴 한데요. 강의 영상에서는 "hello".toUpperCase() 라고 하니까 HELLO로 잘 변환되는데 제가 직접해보니 그 부분 값이 아예 공백으로 표시가 됩니다. 개발자모드로 봐도 소스에 아예 비워져서 나가더라구요. 스크립트 부분에 let text="hello"로 하고 html 부분에서 text.toUpperCase라고 쓰니까 또 잘되고요. 이거 왜 이런가요? 궁금합니다.
안녕하세요 선생님, 올려주신 두 강의 모두 잘 보고 있습니다. 제가 flutter flow를 통해 만든 앱의 경우 앱이 백그라운드로 전환된 상태에서도 작동이 계속 되도록 하고 싶습니다(음악플레이어처럼) 해당 기능을 flutter flow로 구현이 가능할까요? 현재 여러 방식을 트라이 해봤으나 정상적인 작동이 안되고 계속 꺼지네요,, 혹시 방법을 아시는지요?
현재 날짜를 포매팅하는 함수는 아래와 같습니다, const formatDate = function() { return new Date().toLocaleDateString('ko-KR', { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long', }); } 위 함수는 현재 기준으로 날짜를 포매팅해주기 때문에 db에서 불러온 일기 날짜들이 모두 오늘 날짜로 포맷팅 되는 문제가 발생하는 것으로 이해했습니다. 따라서 파라미터로 받은 날짜를 포맷팅 해주도록(일기 쓰기 부분에선 위 함수가 필요하니 별도의 함수로 구현) 수정해야 할 것 같은데 제가 잘못 이해한 부분이 있을까요??
안녕하세요, "delete로 글 삭제하기" 강의를 듣던 중 궁금한 점이 생겨 질문드립니다. 삭제 후 다시 supabase에서 글 목록을 조회하고, 조회한 글들로 홈 화면의 게시글 목록을 구성하기 위해 goto 대신 location.reload() 함수를 사용하신 내용을 이해했는데요, 홈 화면에서 삭제하는 경우가 아닌 글 조회 후 /read/{diary_id} 경로에서 삭제 버튼을 누르게 되면 해당 경로에서 reload가 되기 때문에 문제가 발생하지 않나요? 따라서 말씀하신 location.reload() 대신 location.href = '/' 만 사용할 수 있는것이 아닌지 여쭤봅니다, 감사합니다!
