묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨맛집 지도앱 만들기 (React Native & NestJS)
프로젝트 세팅후 실행시 오류가 발생합니다
환경변수 세팅, 안드로이드 스튜디오 세팅 완료 후 실행했는데 아래와 같은 오류가 발생합니다> react-native run-android info JS server already running. info Launching emulator... error Failed to launch emulator. Reason: It took too long to start and connect with Android emulator: Medium_Phone_API_33. You can try starting the emulator manually from the terminal with: C:\Users\user\AppData\Local\Android\Sdk/emulator/emulator @Medium_Phone_API_33. warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch. info Installing the app... > Task :app:compileDebugJavaWithJavac FAILED 19 actionable tasks: 2 executed, 17 up-to-date info 💡 Tip: Make sure that you have set up your development environment correctly, by running react-native doctor. To read more about doctor command visit: https://github.com/react-native-community/cli/blob/main/packages/cli-doctor/README.md#doctor FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:compileDebugJavaWithJavac'. > Could not resolve all files for configuration ':app:androidJdkImage'. > Failed to transform core-for-system-modules.jar to match attributes {artifactType=_internal_android_jdk_image, org.gradle.libraryelements=jar, org.gradle.usage=java-runtime}. > Execution failed for JdkImageTransform: C:\Users\user\AppData\Local\Android\Sdk\platforms\android-33\core-for-system-modules.jar. > Error while executing process C:\Program Files\Java\bin\jlink.exe with arguments {--module-path C:\Users\user\.gradle\caches\transforms-3\a716a49384427b91aa8778761f7fa6d1\transformed\output\temp\jmod --add-modules java.base --output C:\Users\user\.gradle\caches\transforms-3\a716a49384427b91aa8778761f7fa6d1\transformed\output\jdkImage --disable-plugin system-modules} * Try: > Run with --stacktrace option to get the stack trace. > Run with --info or --debug option to get more log output. > Run with --scan to get full insights. * Get more help at https://help.gradle.org BUILD FAILED in 5s error Failed to install the app. info Run CLI with --verbose flag for more details. Process finished with exit code 1 adb 버전choco, java 버전 react-native 프로젝트 버전buildscript { ext { buildToolsVersion = "33.0.0" minSdkVersion = 21 compileSdkVersion = 33 targetSdkVersion = 33 // We use NDK 23 which has both M1 support and is the side-by-side NDK version from AGP. ndkVersion = "23.1.7779620" } repositories { google() mavenCentral() } dependencies { classpath("com.android.tools.build:gradle") classpath("com.facebook.react:react-native-gradle-plugin") } } 환경변수안드로이드 스튜디오 doctor 실행시엔 에뮬레이터가 없다고 표시되는데, 에뮬레이터 실행까진 정상적으로 됩니다. 앱 빌드시 오류가 발생하는것 같아요Android ✖ Adb - No devices and/or emulators connected. Please create emulator with Android Studio or connect Android device. ✓ JDK - Required to compile Java code ✓ Android Studio - Required for building and installing your app on Android ✓ Android SDK - Required for building and installing your app on Android ✓ ANDROID_HOME - Environment variable that points to your Android SDK installation
-
미해결Next + React Query로 SNS 서비스 만들기
로그인과 인증 관련 질문드립니다!
안녕하세요. 강의를 마치고 혼자 구현을 해보고 있는데, 로그인과 인증 관련해서 궁금한 부분이 있습니다.프론트에 로그인한 유저인지의 판단을 미들웨어에서 auth함수로 next 서버를 통해 하고있는데,로그인 후에 접속 가능한 페이지를 이동할때마다 무조건 서버에 체크를 해주어야 하나요?데이터 페칭은 리액트 쿼리를 설명하며 말씀해주신것 처럼 컨텐츠에 따라 판단해서 캐싱하고 새로 받아오고의 개념이 이해가 되었는데, 세션체크라고 해야 할까요? 로그인 후에 이 유저가 로그인이 되어있는지에 대한 체크를 서버에 얼마나 자주 해주어야 하는지 모르겠습니다.현재는 미들웨어에서 로그인이 필요한 페이지에 auth함수를 호출하여 프론트 서버에서 체크를 하고, api를 호출할때는 쿠키에 next-auth의 세션 토큰과 서버에서 발급한 세션 아이디를 담아서 서버에서 로그인과 인증 확인을 하고있는것으로 이해를 했습니다. 현재는 혼자서 nestjs를 통해 jwt 토큰 2개 (access,refresh)을 발급해서 구현을 해보고있는데, 로그인이 필요한 페이지로 이동한다면 무조건 미들웨어에서 토큰 확인을 서버를 통해 해주어야 하는건가 잘 모르겠어서 질문 드립니다..강의 정말 잘 듣고 도움이 많이 됐습니다. 감사합니다.
-
해결됨맛집 지도앱 만들기 (React Native & NestJS)
코드스타일 문의드립니다.
import {deletPost} from '@/api'; import queryClient from '@/api/queryClient'; import {queryKeys} from '@/constants'; import {UseMutationCustomOptions} from '@/types'; import {useMutation} from '@tanstack/react-query'; function useMutateDeletePost(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: deletPost, onSuccess: () => { queryClient.invalidateQueries({ queryKeys: [queryKeys.POST, queryKeys.GET_POST], }); queryClient.invalidateQueries({ queryKey: [queryKeys.MARKER, queryKeys.GET_MARKERS] })\ } }); } export default useMutateDeletePost; 안녕하세요. 궁금한 게 있습니다.다름아니라 재갱신을 위해서 invalidataQueies를 호출할때 쿼리클라이언트를 여러개로 쪼개신 이유가 무엇인가요?해당 키들을 한개의 invalidataQueries로만 호출이 가능할텐데, 여러개로 쪼개신 이유가 갑자기 궁금해서 문의드립니다. onSuccess: () => { queryClient.invalidateQueries({ queryKey: [ queryKeys.POST, queryKeys.GET_POST, queryKeys.MARKER, queryKeys.GET_MARKERS, ], }); }
-
미해결React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
Counter 컴포넌트 전부 리렌더링 되는 현상
<Counter onTotal={handleTotal} /><hr/><Counter onTotal={handleTotal}/><hr/><Counter onTotal={handleTotal}/>여기서 Counter.jsx에서 console.log 를 추가했고버튼 세 개 중 하나만 눌러도 <Counter /> 세 개 전체가 리렌더링 됩니다. (log 가 세번찍힘)왜그런건가요 ?
-
미해결맛집 지도앱 만들기 (React Native & NestJS)
변수 형식 선언이 안 됐다는 에러
CustomDrawerContent에서 문자 형식이 안 됐다는 에러가 있습니다.
-
해결됨맛집 지도앱 만들기 (React Native & NestJS)
common의 폴더명을 @common 으로 하셨나요?
common의 폴더명을 @common 으로 하신 특별한 이유가 있나요?
-
해결됨맛집 지도앱 만들기 (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.
-
미해결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 저부분이 계속 빨간줄 쳐지면서 에러가 발생합니다.. 새해 복 많이 받으세요.