inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

176만명의 커뮤니티!! 함께 토론해봐요.

common의 폴더명을 @common 으로 하셨나요?

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

common의 폴더명을 @common 으로 하신 특별한 이유가 있나요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
김기쁨 댓글 1 좋아요 0 조회수 85

절대 경로 적용 후 실행 안됨

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 맥에서 IOS로 실행 시 에러가 발생합니다. 리액트 네이티브는 최신버전으로 설치했습니다. 코드는 프로젝트 생성한 그 자체에서 변경이 없습니다. 설정 "extends": "@react-native/typescript-config/tsconfig.json", "compilerOptions": { "baseUrl": ".", "paths": { "@/*": ["./src/*"] // this is for importing index file } } } module.exports = { presets: ['module:metro-react-native-babel-preset'], plugins: [ 'react-native-reanimated/plugin', [ 'module-resolver', { alias: { '@': './src', }, }, ], ], }; 에러 error export CLANG_WARN_EMPTY_BODY\=YES error [SyntaxError]: /Users/youngseok/study/RN/lecture/MatzipApp/front/node_modules/react-native/Libraries/Components/ActivityIndicator/ActivityIndicator.js: Missing initializer in const declaration. (156:41) error ', error Failed to build ios project. "xcodebuild" exited with error code '65'. To debug build logs further, consider building your app with Xcode.app, by opening 'MatzipApp.xcworkspace'. error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
Young-Seok Jang 댓글 3 좋아요 0 조회수 289

cache 질문

미해결

Next + React Query로 SNS 서비스 만들기

이전 faker 를 사용했을 때 이미지가 바뀌는 문제때문에 getPostRecommend 함수 부분에 cache : "force-cache" 를 작성하셨었는데 실제 데이터를 받아오는 현시점에선 cache:"no-store" 를 작성하는게 맞을까요 ?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
심현석 댓글 2 좋아요 0 조회수 149

서버 액션과 api route의 차이가 어떤게 있을까요?

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요! 강의 도중 궁금한게 생겨 여쭤보기 위해 질문 드립니다! 다름이아니라, 서버 액션과 api route의 차이가 속도 말고 어떤 때에 서버 액션을 써야하고, api route를 사용해야하는지 여쭤보고싶습니다! 찾아본 바로는 서버 액션은 POST, PATCH 등 폼 제출 시에 사용하는 것이라는데, 폼 제출 시에는 무조건 서버액션을 사용하는 것이 맞는지, 아니라면 단지 개발자 판단 하에 사용하면 되는 것인지 여쭤보고싶습니다!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
amh6281 댓글 2 좋아요 0 조회수 231

세션 만료로 인해 미들웨어에서 로그인 페이지로 redirect 되는 경우 발생하는 오류.(인터셉팅 라우트)

미해결

Next + React Query로 SNS 서비스 만들기

로그인하여 /home에 접속해 있는 도중, 세션이 만료된 상태에서 사용자 정보가 필요한 /message 또는 /explore 등으로 클라이언트 네비게이션을 통해 페이지를 이동하는 경우, 미들웨어의 세션 검사를 거쳐 로그인 페이지로 이동되지 않고 not-found 페이지가 뜨는 오류가 있습니다. / / middleware.ts import { 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
  • next.js
  • react-query
  • next-auth
  • msw
hkjo 댓글 2 좋아요 0 조회수 219

npx create-react-app cra-react-app 실행시 에러가 발생합니다.

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

뭔가 잘 모르겠는데.. 아래 확인 부탁드려도 될까요? 설정한것도 없는것 같은데 기본 생성 명령어자체가 실행이 안된다니..ㅠㅠㅠㅠ 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
  • React-Context
  • react-router
  • tailwindcss
  • react-query
김선만 댓글 3 좋아요 1 조회수 343

AccessToken 만료시 홈화면 이동이 안되는거 같은데요?

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 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 만료시 테스트가 이루어지지 않은 소스인건지.. 아니면 제가 누락한 부분이 있는걸까요?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
sevenfingersstudio 댓글 2 좋아요 0 조회수 146

react 19버전에서는 recoil사용이 어렵나요?

해결됨

[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)

✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 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 라이브러리를 사용해도 진행에 무리없을까요?

  • firebase
  • next.js
  • tailwindcss
  • react-query
  • supabase
댓글 2 좋아요 0 조회수 1559

AWS EC2+RDS+S3 배포하여 서버 백그라운드 실행질문

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 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
  • typescript
  • nestjs
  • react-query
  • zustand
sevenfingersstudio 댓글 2 좋아요 0 조회수 155

에러가 나옵니다

미해결

맛집 지도앱 만들기 (React Native & NestJS)

말씀하신대로 ruby의 버전을 2.7.6 버전을 맞췄음에도 불구하고 위와 같이 에러가 나와서 에러 해결시에 필요하다고 안내받은 sudo gem install cocoapods를 설치했는데 설치시에도 버전이 안맞다고 에러가 나와서 그에 맞는 버전으로 설치했지만 결국 위 와같은 에러가 나옵니다 많은 시간을 투자했지만 되고 있지않습니다. ㅠㅠㅠ

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
강동우 댓글 2 좋아요 0 조회수 236

npx react-native@0.72.6 init MatzipApp --version 0.72.6 오류

미해결

맛집 지도앱 만들기 (React Native & NestJS)

npx react-native@0.72.6 init MatzipApp --version 0.72.6 ruby 2.7.6 -> ruby 3.1.0 시작이 안되고 있어요. 도와주세요.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
Seungil Jang 댓글 1 좋아요 0 조회수 355

auth.ts 에서 오류가 납니다.

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요, 클론코딩 강좌 따라하던중 오류가 나는데 강사님 깃헙 클론해서 완성본 봐도 같은 오류가 나는것 같은데 무슨오류일까요.. ?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
rhdbwls5766 댓글 2 좋아요 0 조회수 214

6강 강의 듣는 중 FeedHomeHeaderLeft(navigation) 의 navigation 파라미터 넘기는 부분 에러발생

해결됨

맛집 지도앱 만들기 (React Native & NestJS)

❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 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
  • typescript
  • nestjs
  • react-query
  • zustand
sevenfingersstudio 댓글 3 좋아요 0 조회수 180

iOS세팅 및 pod install오류

미해결

맛집 지도앱 만들기 (React Native & NestJS)

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버전으로 만들고있어 해결이 되면 진짜 너무너무 감사하겠습니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
kjm010629 댓글 1 좋아요 0 조회수 327

Streaming을 사용하지 않아도 미리 정적인 컴포넌트들을 서버에서 응답을 받습니다

미해결

Next + React Query로 SNS 서비스 만들기

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
  • next.js
  • react-query
  • next-auth
  • msw
댓글 2 좋아요 0 조회수 134

useAuth 401 error

미해결

맛집 지도앱 만들기 (React Native & NestJS)

일단 윈도우유저입니다. 코드는 강사님 코드 그대로라.. 뭐 보여드릴게없습니다. 3-8 듣고있습니다. 에러같은경우는 401에러 axios error입니다. 이상한게 onSuccess가 계속 실행이 안되는데 onSettled은 또 실행이되고.. 확인을해보니 백엔드에서 문제가 있는것같습니다. 백엔드에서 확인을해보니 autoguard에 막히는것같아서 일단 지워보고 진행을햇는데도 id가없다고합니다 autoguard를 못뚫으니 토큰문제같기는한데.. 궁금합니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
정근혁 댓글 1 좋아요 0 조회수 195

인터셉팅 라우팅 적용 도중 무한 새로고침(리디렉션)이 되는 원인이 궁금합니다.

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요. 강의 잘 시청중입니다. 진행 하고있던 도중 궁금한게 생겼습니다. 섹션2 - 로그인 모달에서 발생하는 문제 해결하기(router.replace) 4:06 경에 개발자 도구쪽을 보면 x개수가 빠르게 늘어나는것을 보실 수 있을텐데, 제 기준에서는 저 때 무한 새로고침이 되고있더라구요. next.js콘솔에서는 GET 요청으로 /i/flow/login이 계속 되고있고 제가 직접 새로고침을 하거나 페이지를 벗어나면 멈추는데, 저 뒤로 강의 내용에 맞게 useRouter를 사용하면 문제는 없지만 저런 현상이 벌어진 이유가 궁금합니다. 혼자서 이것저것 바꿔가면서 해봤는데 /login -> redirect -> (인터셉팅 라우트)/i/flow/login 형태만 되면 계속 새로고침 되는 이유를 도무지 모르겠는데 원인이 너무 궁금해요

  • react
  • next.js
  • react-query
  • next-auth
  • msw
원준 댓글 2 좋아요 0 조회수 345

pdgadmin 이상해요

미해결

맛집 지도앱 만들기 (React Native & NestJS)

일단 만들지도 않은 postgresql 17서버가 자꾸생기구요. 만들떄 비밀번호 치명적오류가 나오는데 username을 또 안바꾸면 잘만들어집니다 . 이해가안되서요.. 그러면 앞으로도 계쏙 username을 못바꾸고써하는건지 일단 윈도우입니다.

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
정근혁 댓글 2 좋아요 0 조회수 129

인기 태그

인프런 TOP Writers

주간 인기글