묻고 답해요
137만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next + React Query로 SNS 서비스 만들기
5:42 임포트 단축키
뭔가요?
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
App.tsx 가 없습니다.
프로젝트를 실행했는데 강의와 달리 App.tsx 파일이 없습니다. 다운그레이드를 해서 실행해야 할까요? 만약 그렇다면 버전을 알려주시면 감사하겠습니다.
-
미해결Next + React Query로 SNS 서비스 만들기
NextAuth를 활용한 소셜 로그인 시 authorization code 발급 방법
안녕하세요 강의 수강 후에 자체 프로젝트를 진행하고 있는데 소셜 로그인 처리 중 궁금한 점이 있어 질문 드립니다.기존에는 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를 받을 수 있는 방법이 있다면 알려주시면 감사하겠습니다!
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
컴포넌트 안에서 createStackNavigator를 선언하면, 안좋은거 아닌가요?
안녕하세요 강사님. 리액트를 배울때, 컴포넌트 내에서 object를 초기화하면 성능 문제가 생길 수 있다고 배웠습니다. 근데, [2-4] 네비게이션 타이핑 강의(1:29)를 보면, function AuthStackNavigator() {const Stack = createStackNavigator();return (~~)} 와 같이, 컴포넌트 내부에 Stack이 선언되어 있습니다.이러면 화면이 재랜더링 될 때 마다, Stack이 선언되어 성능문제가 생기는건 아닌가요?
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
로그아웃 버튼 클릭 후 로그인, 회원가입 버튼 누를시 로그아웃 화면 그대로 유지되는 이슈
❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요! 로그아웃 클릭 후 로그인 및 회원가입 버튼누르면 아래처럼 로그아웃안된것처럼 나오며 아래처럼 Warning로그가나오는데 혹시 이게문제인가요??구글찾아봐도 해결이안되서 게시판에 글 올립니다 ㅠㅠ
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
node도 설치하고 nvm도 설치하시는 이유는 뭔가요?
"[1-2] 맥-IOS 환경 설정"을 보고 있습니다. 저는 node를 설치하지 않고, nvm만 설치해서 사용하고 있는데요. 강사님께서는 brew install node 이후에 nvm을 설치하시네요. 저는 이렇게 하면 글로벌 node가 있고, nvm도 있는거라 혹시 꼬일까봐 node 설치 없이 nvm만 설치했는데요. 강사님 의견도 궁금합니다.
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
피그마 파일도 직접 만드신거에요?
서버랑 피그마 파일도 직접 제작하신건가요? 강사님 정말 대단하시네요. 강사님 처럼 되려면 어떻게 해야 하나요? (어떻게 셋 다 잘하나요?)
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
메일 남겼는데 ㅠㅠ 읽지 않으셔셔 결제하고남깁니다.
마커찍을때 위경도 가져오는걸로 알고있는데, 그때 지올로케이션 사용했엇거든요 라이브러리 근데 화면 내려갈때나 다른앱 사용할떄 백그라운드 환경으로 변하잖아요 근데 내가 그떄동안 걷고있으면 걷고있던길을 색으로 칠하고 싶다면 백그라운드에서도 해당 위도 경도를 받아와야하는데 즉 백그라인드에서 데이터 받을수있는 부분 강의에있나요 ?
-
미해결Next + React Query로 SNS 서비스 만들기
http://localhost:3000/home 오류 문의드립니다.
영상을 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가 잘나오는데 왜이럴까요?
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
generate-types씨 발생하는 에러 해결방법
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씨 발생하는 에러 해결방법이 궁금합니다.
-
해결됨Next + React Query로 SNS 서비스 만들기
실무에서 리버스 인피니트 스크롤링 최적화 방법
채팅을 계속 올려서 몇개월 치를 사용자가 본다면 위로 채팅 기록이 엄청 쌓일텐데, 실무에서 메모리가 넘치는걸 방지하는 방법으로 사용하시는게 있는지 어떤걸 사용하시는지 궁금합니다.찾아보니 react-window 같은 라이브러리를 사용해서 실제 랜더링 하는 요소 갯수를 제한하고 스크롤을 유지 시켜서 성능 향상을 하는 글을 봤습니다. 실제로 실무에서 이런 방법을 주로 쓰는지 궁금합니다.
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
로그아웃 관련해서 질문 있습니다.
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()나 이런 것들을 활용했지만, 제대로 로그아웃이 동작하지 않아. 어떻게 해결할 수 있을지 의견을 구하고자 질문을 남깁니다.
-
미해결Next + React Query로 SNS 서비스 만들기
프로필 업로드시 파일명 한글깨짐 현상
회원가입 페이지에서 프로필 이미지를 한글이 포함된 이미지명로 업로드했을때,nextjs의 서버 Formdata에서 한글 파일명이 깨지는 현상이 있습니다. 해결방법이 있을까요??Step1. 회원가입 페이지Step2. 서버 에러 결과회원가입 페이지 경로 : D:\z-com\src\app\(beforeLogin)\_lib\signup.ts업로드시 한글 파일명 출력 확인을 위해 아래코드를 추가해봤습니다. formData.getAll("image").map((data, idx) => { console.log(data); });업로드 이미지명에 한글이 포함되었을때 출력 -- 한글파일명이 깨져서 출력되고 데이터베이스에 저장됩니다.
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
api 에 대한 질문있습니다.
안녕하세요.이 인강을 듣기 전에는 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를 저장하는게 나은지 잘 모르겠습니다.긴 글 읽어주셔서 감사합니다..!
-
해결됨Next + React Query로 SNS 서비스 만들기
require 문법 질문드립니다.
제가 알기로는 require는 commonjs에서 쓰는걸로 알고 있는데 useEffect내부에서 쓰시는걸 보고 궁금점이 생겨 질문드립니다.require 대신에 dynamic import를 쓰는건 보았는데 require도 클라이언트에서 사용이 가능한가요?
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
isPending vs isLoading
안녕하세요 로펀님tanstackquery에서 최근에 isPending이 생겨서 어느 블로그에선가 봤는데 이제 isPending을 사용하면 된다고 했던 것 같은데혹시 둘의 차이가 있을까요?어느 시점에서는 이것을 사용해야 한다라는 가이드가 있을까요?
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
Link태그와 useRouter
혹시 Next.js에서 Link태그와 useRouter를 제공하고 있는데 서로 차이점이 있을까요?? 이미지나 버튼이 있으면 거기에 onClick 달고 라우터 쓰고 있긴한데 이미지나 버튼에 링크를 감싸버리면 뭔가 이상할 것 같아서 어떤식으로 쓰면 좋을까요<Link href="/" ><Image ... /></Link><Image ... onClick={()=>router.push("/")} />
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
BundleIdentifier관련 질문이있습니다.
강사님, 최근에 강사님 강의를 듣고, 실제 프로젝트를 진행하면서 앱 배포 관련해서 이런저런 공부를 하고 있는데 궁금한 점이 생겨 질문드립니다.XCode 에서 BundleIdentifier을 com.xxx.xxxx 이런식으로 제공해주고 있는데. 해당 부분을 URL Scheme으로 활용하여 네이버 로그인을 개발 중에 있습니다. 이 부분을, 그럼@implementation AppDelegate - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options { if([RNKakaoLogins isKakaoTalkLoginUrl:url]) { return [RNKakaoLogins handleOpenUrl: url]; } if ([url.scheme isEqualToString:@"{{ CUSTOM URL SCHEME }}"]) { return [[NaverThirdPartyLoginConnection getSharedInstance] application:app openURL:url options:options]; } return NO; } CUSTOM URL SCHEME을 BundleIdentifier로 사용해도 괜찮은지 여부와, 해당 값을 환경변수 처리 없이, 공개적으로 적용해도 되는지 아래와 같이 입니다. if ([url.scheme isEqualToString:@"com.matzip"]) { return [[NaverThirdPartyLoginConnection getSharedInstance] application:app openURL:url options:options]; } return NO; } 혹시 만약에 되지 않는다면 AppDelegate.mm에서 환경변수를 처리하는 방법과, 소셜 로그인시 필요한 URL Scheme은 보통 현업에서 어떠한 식으로 선정하여 처리하는지 궁금하여 질문드립니다.
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
File 처리 관련 궁금사항
안녕하세요, Drag & Drop 강의 도중 궁금한 점이 생겨 질문드립니다. File Upload 처리 같은 경우는, SupaBase가 아니어도, 보통은 이러한 방식으로 File 객체를 전달하는 것이 맞을까요??어떤 방법이 조금 더 일반적인지 궁금합니다!
-
해결됨맛집 지도앱 만들기 (React Native + NestJS)
폰트 관련 궁금사항입니다.
안녕하세요, 강사님, 강사님 강의를 들으며, 개인적인 프로젝트를 RN으로 진행중에 비슷한 상황이 발생하여 질문을 남겨봅니다.아이콘같은 경우도, 이전에 잘 동작하다가 빌드 후, 에러가 발생하면 빌드 페이즈에 추가로 파일을 넣어서 해결하였습니다.이번에 제가 추가한 폰트도, 이전에 잘 동작하다가, 해당 브랜치를 develop에 머지한 후, 새로 다른 브랜치를 만들어 작업중인데, 이전에 잘 동작했지만 동작하지 않습니다.빌드 페이즈에 들어가있는걸 확인했는데 잘 동작하지 않는 경우는 어떻게 해결할지 의견을 구하고자 질문을 남깁니다.