안녕하세요 개발자님.백엔드를 만약 구축한다고했을때구글링해보면 보통 prisma랑 mongoDB를 같이 쓰더라구요저는 이때까지 mongoDB만 써서 백엔드를 구축했는데 풀스택으로 만든다고 하면 prisma, mongoDB를 같이 쓰는게 좋나요?둘 사이에 쓰임에 대해서 어떤 다른 목적이 있나요? 아마 목적에 따라 사용하는게 다를 것 같긴한데.. 개발자님께서는 어떻게 생각하시나요?

안녕하세요, next-auth 5 베타를 사용하다가 "r is not a function"이라는 에러 메시지 때문에 next-auth 버전을 "^4.24.5"로 낮추었더니 해결되었습니다. 그런데 vercel에 배포하려하니 자꾸 아래의 사진과 같은 에러 때문에 어려움을 겪고 있습니다...ㅜ 해당 에러 구글에 찾아봐도 해결방법을 모르겠던데 도와주실 수 있으실까요ㅠㅠㅠ 

아래와 같은 에러가 발생하는 이유가 제가 처음부터 파일구조를 강사님과 다르게 해서 그런가 싶어서 이미 코드는 짜놓은 상태이지만 src폴더를 만들고 그 안에 app 폴더를 넣어 구조를 똑같이 하니 레이아웃이 깨져서(원인은 아직 못 찾았습니다만 단순 import 위치 문제는 아님은 확실합니다.) 다시 src가 없는 상태로 회귀했습니다.auth.ts 파일을 app 폴더와 같은 위치에 두라고 강의에서 말씀하셔서 그대로 두기도 해보았고 혹시나해서 app 폴더 안에 위치시켰으나 handler를 못찾는 에러는 동일했습니다. 혹시 create next 이후에 다시 src를 만들어서 넣는것이 불가능한가요?불가능하다면 auth.ts와 middleware.ts의 위치를 현재 제 파일 구조상태에서 어느 위치에 두는 것이 맞나요?

/home 페이지에서 prefetch를 해주지 않고 PostRecommends & followingPosts에서 useQuery로만 데이터를 불러와도 상관없나요 ??1번이 맞다고 하면 prefetch를 통해서 dehydrated를 해주는 이유가 궁금합니다.아니면 서버 컴포넌트에서 react-query를 이렇게도 사용할 수 있다를 보여주신건지 궁금합니다:)

deviceHeight > 700 ? .. : ..강사님께서 700을 분기점으로 잡으셨는데요.혹시 700인 이유가 있는걸까요? 아니면 700이라는 수치는 의미가 없고, 분기가 가능하다는 걸 가르쳐주시려는 의도인건가요? 

뭔가요?

프로젝트를 실행했는데 강의와 달리 App.tsx 파일이 없습니다. 다운그레이드를 해서 실행해야 할까요? 만약 그렇다면 버전을 알려주시면 감사하겠습니다.  

안녕하세요 강의 수강 후에 자체 프로젝트를 진행하고 있는데 소셜 로그인 처리 중 궁금한 점이 있어 질문 드립니다.기존에는 Google, Naver, Kakao, Facebook 등 5가지 소셜 로그인을 각각 OAuth 리디렉션 방식으로 구현했으나, 이번에는 NextAuth를 활용하여 간편하게 통합적으로 구현하려고 합니다.소셜 로그인은 authorization code 발급용으로만 사용하고 실제 access, refresh token 발급은 자체 서버에서 처리를 하려고 합니다. 따라서 인가 과정만 next auth를 활용하고 callbacks 내부에서 인가 코드를 전달하여 access token 발급 과정을 진행하려 했습니다./api/auth/[...nextauth]/route.ts const authOptions = { // Configure one or more authentication providers providers: [ GoogleProvider({ clientId: process.env.GOOGLE_ID ?? "", clientSecret: process.env.GOOGLE_SECRET ?? "", }), ], callbacks: { async signIn({ account, profile }: any) { if (account.provider === "google") { const response = await fetch( `${process.env.GATEWAY_SERVER_URL}/auth/v1`, { method: "POST", headers: { "Content-Type": "application/json", devicetype: "1", }, body: JSON.stringify({ sns_type: "GOOGLE", key: 인가코드, }), } ); } return true; // Do different verification for other providers that don't have `email_verified` }, }, }; const handler = NextAuth(authOptions); export { handler as GET, handler as POST };하지만 알아본 결과 NextAuth의 callbacks에서는 access token이 발급되고 authorization code는 받을 수 없게 되어있는 것 같은데 authorization code 발급용으로만 사용하기에는 next auth를 사용하는것이 적합하지 않은 것인지 궁금합니다.또한 authorization code를 받을 수 있는 방법이 있다면 알려주시면 감사하겠습니다! 

안녕하세요 강사님. 리액트를 배울때, 컴포넌트 내에서 object를 초기화하면 성능 문제가 생길 수 있다고 배웠습니다. 근데, [2-4] 네비게이션 타이핑 강의(1:29)를 보면, function AuthStackNavigator() {const Stack = createStackNavigator();return (~~)} 와 같이, 컴포넌트 내부에 Stack이 선언되어 있습니다.이러면 화면이 재랜더링 될 때 마다, Stack이 선언되어 성능문제가 생기는건 아닌가요?

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요! 로그아웃 클릭 후 로그인 및 회원가입 버튼누르면 아래처럼 로그아웃안된것처럼 나오며  아래처럼 Warning로그가나오는데 혹시 이게문제인가요??구글찾아봐도 해결이안되서 게시판에 글 올립니다 ㅠㅠ  

"[1-2] 맥-IOS 환경 설정"을 보고 있습니다.  저는 node를 설치하지 않고, nvm만 설치해서 사용하고 있는데요. 강사님께서는 brew install node 이후에 nvm을 설치하시네요. 저는 이렇게 하면 글로벌 node가 있고, nvm도 있는거라 혹시 꼬일까봐 node 설치 없이 nvm만 설치했는데요. 강사님 의견도 궁금합니다.

서버랑 피그마 파일도 직접 제작하신건가요? 강사님 정말 대단하시네요. 강사님 처럼 되려면 어떻게 해야 하나요? (어떻게 셋 다 잘하나요?)

마커찍을때 위경도 가져오는걸로 알고있는데, 그때 지올로케이션 사용했엇거든요 라이브러리 근데 화면 내려갈때나 다른앱 사용할떄 백그라운드 환경으로 변하잖아요 근데 내가 그떄동안 걷고있으면 걷고있던길을 색으로 칠하고 싶다면 백그라운드에서도 해당 위도 경도를 받아와야하는데 즉 백그라인드에서 데이터 받을수있는 부분 강의에있나요 ?

영상을 3:29 이 부분을 똑같이 하려고하는데,http://localhost:3000/home로 접속하면 파일이 없다고 합니다..app 안에 (afterLogin) (beforeLogin)로 나뉘고,home 폴더를 만들어서 layout.tsx 와 page.tsx를 만들어홈페이지와 홈 레이아웃을 작성하여루트 레이아웃과 층계별 확인하려고 http://localhost:3000/를 들어가면 루트레이아웃은 잘나오는데http://localhost:3000/home는 페이지가 없다고 나옵니다.. (afterLogin) 안이 아니라 밖으로 app/home/layout.tsx 와 page.tsx가 있어야만 http://localhost:3000/home가 잘나오는데 왜이럴까요?

failed to retrieve generated types: {"message":"Your account does not have the necessary privileges to access this endpoint. For more details, refer to our documentation https://supabase.com/docs/guides/platform/access-control"}generate-types씨 발생하는 에러 해결방법이 궁금합니다.

채팅을 계속 올려서 몇개월 치를 사용자가 본다면 위로 채팅 기록이 엄청 쌓일텐데, 실무에서 메모리가 넘치는걸 방지하는 방법으로 사용하시는게 있는지 어떤걸 사용하시는지 궁금합니다.찾아보니 react-window 같은 라이브러리를 사용해서 실제 랜더링 하는 요소 갯수를 제한하고 스크롤을 유지 시켜서 성능 향상을 하는 글을 봤습니다. 실제로 실무에서 이런 방법을 주로 쓰는지 궁금합니다.

import {useEffect} from 'react'; import {useMutation, useQuery} from '@tanstack/react-query'; import {queryClient} from 'containers/TanstackQueryContainer.tsx'; import {getAccessToken, logout, postLogin, postSignup, socialLogin} from 'apis'; import {UseMutationCustomOptions} from 'types/mutations/common.ts'; import { numbers, removeEncryptStorage, removeHeader, setEncryptStorage, setHeader, } from 'utils'; import {queryKeys, storageKeys} from 'constants/storageKeys/keys.ts'; function useSignup(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: postSignup, throwOnError: error => Number(error.response?.status) >= 500, ...mutationOptions, }); } function useLogin(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: postLogin, onSuccess: data => { // 토큰 저장. const accessToken = data.result.accessToken; const refreshToken = data.result.refreshToken; setEncryptStorage(storageKeys.ACCESS_TOKEN, accessToken); setEncryptStorage(storageKeys.REFRESH_TOKEN, refreshToken); setHeader('Authorization', accessToken); }, onSettled: () => { queryClient.refetchQueries({ queryKey: [queryKeys.AUTH, queryKeys.GET_ACCESS_TOKEN], }); }, throwOnError: error => Number(error.response?.status) >= 500, ...mutationOptions, }); } function useSocialIdTokenLogin(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: socialLogin, onSuccess: ({result}) => { setHeader('Authorization', result.accessToken); setEncryptStorage(storageKeys.REFRESH_TOKEN, result.refreshToken); }, onSettled: () => { queryClient.refetchQueries({ queryKey: [queryKeys.AUTH, queryKeys.GET_ACCESS_TOKEN], }); }, throwOnError: error => Number(error.response?.status) >= 500, ...mutationOptions, }); } function useGetRefreshToken() { const {data, error, isSuccess, isError, isPending} = useQuery({ queryKey: [queryKeys.AUTH, queryKeys.GET_ACCESS_TOKEN], queryFn: getAccessToken, staleTime: numbers.ACCESS_TOKEN_REFRESH_TIME, refetchInterval: numbers.ACCESS_TOKEN_REFRESH_TIME, refetchOnReconnect: true, refetchIntervalInBackground: true, }); useEffect(() => { if (isSuccess) { setHeader('Authorization', `Bearer ${data?.result.accessToken}`); setEncryptStorage(storageKeys.ACCESS_TOKEN, data.result.accessToken); setEncryptStorage(storageKeys.REFRESH_TOKEN, data.result.refreshToken); console.log(isSuccess, '성공'); } }, [isSuccess]); useEffect(() => { if (isError) { removeHeader('Authorization'); removeEncryptStorage(storageKeys.REFRESH_TOKEN); } }, [isError]); return {isSuccess, isError, error, data, isPending}; } function useLogout(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: logout, onSuccess: () => { removeHeader('Authorization'); removeEncryptStorage(storageKeys.REFRESH_TOKEN); queryClient.resetQueries({queryKey: [queryKeys.AUTH, 'getAccessToken']}); queryClient.clear(); }, throwOnError: error => Number(error.response?.status) >= 500, ...mutationOptions, }); } function useAuth() { const signUpMutation = useSignup(); const loginMutation = useLogin(); const socialIdTokenMutation = useSocialIdTokenLogin(); const getNewAccessToken = useGetRefreshToken(); const logoutMutation = useLogout(); const isLogin = getNewAccessToken.isSuccess; const isLoginLoading = getNewAccessToken.isPending; return { signUpMutation, loginMutation, socialIdTokenMutation, isLogin, logoutMutation, isLoginLoading, getNewAccessToken, }; } export default useAuth; // RootNavigator.tsx import FeedTabNavigator from '../tab/FeedTabNavigator.tsx'; import AuthStackNavigator from '../stack/AuthStackNavigator.tsx'; import {useEffect} from 'react'; import SplashScreen from 'react-native-splash-screen'; import useAuth from '../../hooks/queries/AuthScreen/useAuth.ts'; export default function RootNavigator() { const {isLogin, getNewAccessToken} = useAuth(); console.log(isLogin); useEffect(() => { setTimeout(() => { SplashScreen.hide(); }, 1000); }, []); return <>{isLogin ? <FeedTabNavigator /> : <AuthStackNavigator />}</>; } 안녕하세요, 강사님, 강사님 강의를 전체 모두 듣고, 비슷한 느낌으로 풀스택으로 앱개발을 진행하고있습니다.강사님 강의처럼 쿼리를 활용하여 로그인 기능을 구현하고 싶어 useLogout훅에 onSettled를 넣었을 때는 강사님처럼 동일한 이상증상이 발생했고, 이를 해결하기 위해 강사님께서는onSuccess부분에queryClient.resetQueries({queryKey: [queryKeys.AUTH]});이 부분을 넣어주셔서 해결을하셨는데, 저는 해당 부분을 넣어도, 로그아웃이 되었다가, 바로 refreshToken으로 accessToken을 재발급받아, 로그인이 되지 않는 현상이 일어나고있습니다. clear()나 이런 것들을 활용했지만, 제대로 로그아웃이 동작하지 않아. 어떻게 해결할 수 있을지 의견을 구하고자 질문을 남깁니다.

회원가입 페이지에서 프로필 이미지를 한글이 포함된 이미지명로 업로드했을때,nextjs의 서버 Formdata에서 한글 파일명이 깨지는 현상이 있습니다. 해결방법이 있을까요??Step1. 회원가입 페이지Step2. 서버 에러 결과회원가입 페이지 경로 : D:\z-com\src\app\(beforeLogin)\_lib\signup.ts업로드시 한글 파일명 출력 확인을 위해 아래코드를 추가해봤습니다. formData.getAll("image").map((data, idx) => { console.log(data); });업로드 이미지명에 한글이 포함되었을때 출력 -- 한글파일명이 깨져서 출력되고 데이터베이스에 저장됩니다.

안녕하세요.이 인강을 듣기 전에는 db에 데이터를 GET 하고 POST하기 위해서는 Rest API를 통해서 했었습니다.하지만 이 강의에서는 supabase를 통해서 create,select 등을 이용해서 data를 다루던데 supabase를 통해서는 rest api를 통해서 data를 만들고, 가지고올수도 있나요?만약 둘다 된다면 어떤 방식을 통해서 주로 data를 다루는게 좋을까요? 현업에서는 어떤 방식을 더 추구하나요?현재 대학생이라 개인플젝을 할때 db가 필요해서 강의를 오늘부터 듣게되었는데 db를 어떻게 다뤄야할지 감이 안잡히네요.아직 개념이 좀 잡히지 않아서 헷갈립니다.추가적으로 저는 팀이나 , 특히 개인프로젝트를 하면서 사용자 정보(id,pw)나 여러 데이터들을 저장하고 싶어서 mongodb를 혼자서 공부하다가 어려워서 여러가지를 찾던 중 supabase(serverless)를 알게되어서 강의를 듣고있습니다.하지만 그냥 mongodb를 공부해서 db를 다루는게 나은지 아니면 supabase를 공부해서 db를 저장하는게 나은지 잘 모르겠습니다.긴 글 읽어주셔서 감사합니다..!

제가 알기로는 require는 commonjs에서 쓰는걸로 알고 있는데 useEffect내부에서 쓰시는걸 보고 궁금점이 생겨 질문드립니다.require 대신에 dynamic import를 쓰는건 보았는데 require도 클라이언트에서 사용이 가능한가요?