묻고 답해요
164만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결Next + React Query로 SNS 서비스 만들기
cache 질문
이전 faker 를 사용했을 때 이미지가 바뀌는 문제때문에 getPostRecommend 함수 부분에 cache : "force-cache" 를 작성하셨었는데 실제 데이터를 받아오는 현시점에선 cache:"no-store" 를 작성하는게 맞을까요 ?
-
미해결Next + React Query로 SNS 서비스 만들기
서버 액션과 api route의 차이가 어떤게 있을까요?
안녕하세요! 강의 도중 궁금한게 생겨 여쭤보기 위해 질문 드립니다!다름이아니라, 서버 액션과 api route의 차이가 속도 말고 어떤 때에 서버 액션을 써야하고, api route를 사용해야하는지 여쭤보고싶습니다!찾아본 바로는 서버 액션은 POST, PATCH 등 폼 제출 시에 사용하는 것이라는데, 폼 제출 시에는 무조건 서버액션을 사용하는 것이 맞는지, 아니라면 단지 개발자 판단 하에 사용하면 되는 것인지 여쭤보고싶습니다!
-
미해결Next + React Query로 SNS 서비스 만들기
세션 만료로 인해 미들웨어에서 로그인 페이지로 redirect 되는 경우 발생하는 오류.(인터셉팅 라우트)
로그인하여 /home에 접속해 있는 도중, 세션이 만료된 상태에서 사용자 정보가 필요한 /message 또는 /explore 등으로 클라이언트 네비게이션을 통해 페이지를 이동하는 경우,미들웨어의 세션 검사를 거쳐 로그인 페이지로 이동되지 않고 not-found 페이지가 뜨는 오류가 있습니다./ / middleware.tsimport { NextResponse } from "next/server"; import { auth } from "./auth"; export { auth } from "./auth"; export async function middleware() { const session = await auth(); if (!session) { return NextResponse.redirect(`http://localhost:3000/i/flow/login`); } } export const config = { matcher: ["/compose/tweeet", "/home", "/explore", "/messages", "/search"], }; 로그인 이 후 쿠키를 삭제를 통해 세션을 없애고 클라이언트 네비게이션을 통해 페이지 이동을 하면 미들웨어의 세션 검사에 걸려 redirect가 진행됩니다. /i/flow/login 페이지로 url이 변경되긴 했지만 병렬 라우트 및 인터셉팅 라우트로 인한 간섭이 있어 제대로 된 page를 찾지 못하는 것으로 보이는데 정확한 원인을 알 수 없어 문의 드립니다.
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
npx create-react-app cra-react-app 실행시 에러가 발생합니다.
뭔가 잘 모르겠는데.. 아래 확인 부탁드려도 될까요?설정한것도 없는것 같은데 기본 생성 명령어자체가 실행이 안된다니..ㅠㅠㅠㅠ manijang2@gimseonman-ui-MacBookAir VSProjects % npx create-react-app cra-react-app Creating a new React app in /Users/manijang2/VSProjects/cra-react-app. Installing packages. This might take a couple of minutes. Installing react, react-dom, and react-scripts with cra-template... added 1324 packages in 40s 268 packages are looking for funding run `npm fund` for details Initialized a git repository. Installing template dependencies using npm... npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: cra-react-app@0.1.0 npm error Found: react@19.0.0 npm error node_modules/react npm error react@"^19.0.0" from the root project npm error npm error Could not resolve dependency: npm error peer react@"^18.0.0" from @testing-library/react@13.4.0 npm error node_modules/@testing-library/react npm error @testing-library/react@"^13.0.0" from the root project npm error npm error Fix the upstream dependency conflict, or retry npm error this command with --force or --legacy-peer-deps npm error to accept an incorrect (and potentially broken) dependency resolution. npm error npm error npm error For a full report see: npm error /Users/manijang2/.npm/_logs/2025-02-03T13_23_36_276Z-eresolve-report.txt npm error A complete log of this run can be found in: /Users/manijang2/.npm/_logs/2025-02-03T13_23_36_276Z-debug-0.log `npm install --no-audit --save @testing-library/jest-dom@^5.14.1 @testing-library/react@^13.0.0 @testing-library/user-event@^13.2.1 web-vitals@^2.1.0` failed manijang2@gimseonman-ui-MacBookAir VSProjects %
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
AccessToken 만료시 홈화면 이동이 안되는거 같은데요?
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.모든 강의를 듣고나서 이것저것 공부를 하던 중 실습에서도 AccessToken 만료 테스트를 하신적이 없는거같아서 서버단 .env 에서 JWT_ACCESS_TOKEN_EXPIRATION=1m요렇게 두고number.ts 소스에서도 ACCESS_TOKEN_REFRESH_TIME: 1000 * 60 * 1 - 1000 * 60 * 0.7,이렇게 바꾸어 1분만에 만료되게 해서 테스트 해보니만료는 되는데 만료된 후 이렇게 401 에러가 뜨면서 홈화면으로 넘어가지를 않네요... 선생님 전체소스를 받아서 테스트를 해보아도 마찬가지입니다..AccessToken 만료시 테스트가 이루어지지 않은 소스인건지.. 아니면 제가 누락한 부분이 있는걸까요?
-
해결됨[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
react 19버전에서는 recoil사용이 어렵나요?
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다.💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡평일중에는 퇴근 이후(저녁 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 라이브러리를 사용해도 진행에 무리없을까요?
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
AWS EC2+RDS+S3 배포하여 서버 백그라운드 실행질문
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.강의를 전부 듣고나서 AWS에 EC2+RDS+S3 까지 셋팅하고EC2에 깃험 클론하여 소스 가져오고EC2 백그라운드에 서버를 상주시키고 싶은데 방법을잘모르겠습니다. 좀더 자세히 알려주실 수 있으실까요?현재는 matzip폴대내 front, server 소스를 EC2 에 가져온 상태이고요 우분투에서 npm run start dev 로 서버를 실행시켜서스마트폰에 실제 배포해서 해보니 EC2, RDS, S3 전부 잘연결되서 실행되는것은 확인했습니다. 그런데 npm run start dev로 실행하는거말고 ec2 서버에 백그라운드에 항상 서버를 동작시키고 싶은데 어떻게 해야할까요?도와주세요.
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
윈도우에서 Android를 실행하면 welcome 페이지 안 나오고 핸드폰 화면이 나오는데 혹시 이유를 아실까요?
"react": "18.3.1", "react-native": "0.77.0"
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
에러가 나옵니다
말씀하신대로 ruby의 버전을 2.7.6 버전을 맞췄음에도 불구하고위와 같이 에러가 나와서 에러 해결시에 필요하다고 안내받은 sudo gem install cocoapods를 설치했는데 설치시에도 버전이 안맞다고 에러가 나와서그에 맞는 버전으로 설치했지만결국 위 와같은 에러가 나옵니다 많은 시간을 투자했지만 되고 있지않습니다. ㅠㅠㅠ
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
react-native-gesture-handler 에러 해결 부탁드려요
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
npx react-native@0.72.6 init MatzipApp --version 0.72.6 오류
npx react-native@0.72.6 init MatzipApp --version 0.72.6ruby 2.7.6 -> ruby 3.1.0시작이 안되고 있어요. 도와주세요.
-
미해결Next + React Query로 SNS 서비스 만들기
auth.ts 에서 오류가 납니다.
안녕하세요, 클론코딩 강좌 따라하던중 오류가 나는데 강사님 깃헙 클론해서 완성본 봐도 같은 오류가 나는것 같은데 무슨오류일까요..?
-
해결됨[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
6강 강의 듣는 중 FeedHomeHeaderLeft(navigation) 의 navigation 파라미터 넘기는 부분 에러발생
❗질문 작성시 꼭 참고해주세요현재 문제(또는 에러)와 코드(또는 github)를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요. (일부만 자르거나 복사하지말아주세요.) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다.다음의 코드에서 <Stack.Screen name={feedNavigations.FEED_HOME} component={FeedHomeScreen} options={({navigation}) => ({ headerTitle: '피드', headerLeft: () => FeedHomeHeaderLeft(navigation), })} /> FeedHomeHeaderLeft(navigation)부분에 navigation이 에러가 나는데에러는 다음과 같습니다.Argument of type 'StackNavigationProp<FeedStackParamList, "FeedHome", undefined>' is not assignable to parameter of type 'FeedHomeHeaderLeftProps'.Type 'Omit<NavigationHelpersCommon<FeedStackParamList, StackNavigationState<FeedStackParamList>>, "getParent"> & { ...; } & EventConsumer<...> & PrivateValueStore<...> & StackActionHelpers<...>' is missing the following properties from type 'Omit<Omit<NavigationHelpersCommon<FeedStackParamList, StackNavigationState<FeedStackParamList>>, "getParent"> & ... 9 more ... & { ...; }, "getParent" | ... 13 more ... | keyof EventConsumer<...>>': jumpTo, openDrawer, closeDrawer, toggleDrawerts(2345)(parameter) navigation: StackNavigationProp<FeedStackParamList, "FeedHome", undefined> FeedHomeHeaderLeft.tsx 에서 type FeedHomeHeaderLeftProps = CompositeNavigationProp< StackNavigationProp<FeedStackParamList>, DrawerNavigationProp<MainDrawerParamList> >; function FeedHomeHeaderLeft(navigation: FeedHomeHeaderLeftProps) { return ( <HeaderButton icon={<Ionicons name="menu" color={colors.BLACK} size={25} />} onPress={() => navigation.openDrawer()} /> ); } 요렇게 되어있는데 넘겨받는 파라미터랑 넘겨주는 쪽이 맞지않아서... 그런거 같은데.. 강의 6강 듣고있는 중이구요... 도저히 해결이 안되서 질문드립니다. 무엇이 잘못된걸까요?? 선생님 github 소스내려받아도 저는 navigation 저부분이 계속 빨간줄 쳐지면서 에러가 발생합니다.. 새해 복 많이 받으세요.
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
iOS세팅 및 pod install오류
https://www.inflearn.com/community/questions/1500441/ios오류-pod-install오류 여기서 질문을 드렸던 학생입니다! 그때 강사님께 답변을 받고 시도해 보았으나 동일한 혹은 비슷한 오류들로 인해 여전히 ios설정을 하지 못하고있습니다 도와주시면 감사하겠습니다 .. ㅠㅠ arch -x86_64 pod install --repo-update는 인텔 맥에서 사용하는 명령어라해서 pod install --repo-update를 사용하였습니다. (m4 pro칩 맥북입니다.)하지만 동일하게 오류가 발생하였습니다..ㅠㅠpod install이 실행되지않아 xcworkspace 파일이 생기질 않아 그 이후로는 따라 진행을 하지 못했습니다. 저기 오류에 나와있는대로sha256 값도 오류 내용대로 바꿔보았고 동일하게 진행이 되지 않았습니다pod update 나 캐시 삭제 등 해볼수있는걸 다. 진행해 봣으나 계속 동일한 곳에서 동일한 에러만 발생하여 너무 막막합니다.해결방법이 없을까요?..아 그리고 그냥 만들어본 리엑트 네이티브 최신버전 파일에서는 ios빌드가 그냥 되긴했었습니다.하지만 강의 프로젝트는 이미 0.72.6버전으로 만들어 진행을 하고있고강의를 보며 졸업작품을 만들고있는 다른 프로그램 또한 동일한 0.72.6버전으로 만들고있어 해결이 되면 진짜 너무너무 감사하겠습니다.
-
미해결Next + React Query로 SNS 서비스 만들기
Streaming을 사용하지 않아도 미리 정적인 컴포넌트들을 서버에서 응답을 받습니다
loading.tsx나 Suspense를 사용했을 때, Next의 Streaming이 동작하여 병렬적으로 미리 준비된 컴포넌트는 사용자의 브라우저에서 먼저 보이게 되고, fetch가 완료된 이후에 서버에서 데이터를 클라이언트로 보내줘서 사용자가 보이는걸로 알고 있습니다.하지만, 개발자 도구 Network 탭을 확인해본결과 새로고침을 하였을 때, loading.tsx나 Suspense를 사용을 모두 빼고서 prefetchQuery와 HydrationBoundary, useQuery만을 사용했을 시 Streaming 동작 방식처럼 fetch문 실행이 완료되기 전에 미리 NavMenu나 글자 같이 정적인 요소들이 fetch가 끝나기 전에 이미 브라우저에 도착해있는걸 확인하였습니다.하지만, 딱 한가지 다른 점은 후자 같은 경우는 정적인 컴포넌트가 브라우저에 도착했음에도 화면에 보이질 않고, 전자 같은 경우는 로딩창이나 다른 정적인 요소들은 이미 화면에 미리 보입니다.그렇다면, Next 15 공식문서에 있는 fetch 실행이 끝날때까지 HTML 파일을 서버 사이드에서 렌더링 하는 것이 Blocking 된다는 논리가 이해가 되질 않습니다. (https://nextjs.org/docs/app/building-your-application/routing/loading-ui-and-streaming)위의 코드는 /home의 추천탭을 기준으로 확인하였습니다.이러한 현상이 발생하는 원인이 무엇인지 알 수 있을까요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
useAuth 401 error
일단 윈도우유저입니다. 코드는 강사님 코드 그대로라.. 뭐 보여드릴게없습니다. 3-8 듣고있습니다. 에러같은경우는 401에러 axios error입니다. 이상한게 onSuccess가 계속 실행이 안되는데 onSettled은 또 실행이되고.. 확인을해보니 백엔드에서 문제가 있는것같습니다.백엔드에서 확인을해보니 autoguard에 막히는것같아서 일단 지워보고 진행을햇는데도 id가없다고합니다 autoguard를 못뚫으니 토큰문제같기는한데.. 궁금합니다.
-
미해결Next + React Query로 SNS 서비스 만들기
인터셉팅 라우팅 적용 도중 무한 새로고침(리디렉션)이 되는 원인이 궁금합니다.
안녕하세요.강의 잘 시청중입니다. 진행 하고있던 도중 궁금한게 생겼습니다. 섹션2 - 로그인 모달에서 발생하는 문제 해결하기(router.replace) 4:06 경에 개발자 도구쪽을 보면 x개수가 빠르게 늘어나는것을 보실 수 있을텐데,제 기준에서는 저 때 무한 새로고침이 되고있더라구요. next.js콘솔에서는 GET 요청으로 /i/flow/login이 계속 되고있고 제가 직접 새로고침을 하거나 페이지를 벗어나면 멈추는데, 저 뒤로 강의 내용에 맞게 useRouter를 사용하면 문제는 없지만 저런 현상이 벌어진 이유가 궁금합니다. 혼자서 이것저것 바꿔가면서 해봤는데 /login -> redirect -> (인터셉팅 라우트)/i/flow/login 형태만 되면 계속 새로고침 되는 이유를 도무지 모르겠는데 원인이 너무 궁금해요
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
pdgadmin 이상해요
일단 만들지도 않은 postgresql 17서버가 자꾸생기구요. 만들떄 비밀번호 치명적오류가 나오는데 username을 또 안바꾸면 잘만들어집니다.이해가안되서요.. 그러면 앞으로도 계쏙 username을 못바꾸고써하는건지 일단 윈도우입니다.
-
미해결Next + React Query로 SNS 서비스 만들기
SSR prefetchQuery를 사용하는데 왜 UserInfo에서 데이터를 한번 더 가져오는지 모르겠습니다,,,
안녕하세요! 강의 수강 중 헷갈리는 게 있어 질문 드립니다!!다름이아니라, 강의 초반에 프로필 페이지가 SSR인 것과 prefetchQuery를 사용하는 것에 이해를 했는데, 왜 하위 컴포넌트인 UserInfo에서 다시 userQuery를 통해 데이터를 가져오는지 모르겠습니다!서버사이드 환경인 page.tsx에서 데이터를 가져오기 위해 PrefetchQuery를 사용하는 것으로 알고있는데, 그렇다면 UserInfo에서 useQuery를 통해 데이터를 가져오는 것이 아닌 데이터를 props로 넘겨줄 수 있는게 아닌가 싶습니다!혹시 최상위 page에서 prefetchQuery를 통해 데이터를 먼저 가져와야 그 하위 컴포넌트들 내부의 클라이언트 컴포넌트에서 useQuery를 통해 데이터를 가져올 수 있는건가요?그렇다면 prefetchQuery없이 클라이언트 컴포넌트에서 userQuery만 사용해도 되나요?
-
미해결[리뉴얼] 맛집 지도앱 만들기 (React Native & NestJS)
Stack.navigator오류가 있어요
똑같이 해도 어떨떄는 문제가 있다고 하고 어떨떄는 문제가없다고 하는데[{ "resource": "/c:/Porject/ReactNative/pr/acliet/src/app/stack/AuthStackNavigator.tsx", "owner": "typescript", "code": "2741", "severity": 8, "message": "Property 'id' is missing in type '{ children: Element[]; }' but required in type '{ id: undefined; }'.", "source": "ts", "startLineNumber": 17, "startColumn": 6, "endLineNumber": 17, "endColumn": 21, "relatedInformation": [ { "startLineNumber": 63, "startColumn": 5, "endLineNumber": 63, "endColumn": 7, "message": "'id' is declared here.", "resource": "/c:/Porject/ReactNative/pr/acliet/node_modules/@react-navigation/core/lib/typescript/module/src/types.d.ts" } ]}] 오류로 id가 없다고 하네요import React from 'react'; import {createStackNavigator} from '@react-navigation/stack'; import AuthHomeScreen from '../../pages/AuthHomeScreen'; import LoginHomeScreen from '../../pages/LoginHomeScreen'; import SignupHomeScreen from '../../pages/SignupHomeScreen'; import {authNavigator} from '../../config/AuthNavigator'; export type AuthStackParams = { [authNavigator.AUTH_HOME]: undefined; [authNavigator.LOGIN]: undefined; [authNavigator.SIGNUP]: undefined; }; const Stack = createStackNavigator<AuthStackParams>(); const AuthStackNavigator = () => { return ( <Stack.Navigator> <Stack.Screen name={authNavigator.AUTH_HOME} component={AuthHomeScreen} /> <Stack.Screen name={authNavigator.LOGIN} component={LoginHomeScreen} /> <Stack.Screen name={authNavigator.SIGNUP} component={SignupHomeScreen} /> </Stack.Navigator> ); }; export default AuthStackNavigator; 대한 정보가 없을경우 답변이 어렵습니다.