176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
개발환경 윈도우 안드로이드 ReactNative 버전 react-native-cli : 2.0.1 react-native : 0.76.1 Node 버전 : v22.11.0
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
function useLogout(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: logout, onSuccess: () => { console.log("before storage empty: ", getEncryptStorage(storageKeys.ACCESS_TOKEN)); removeHeader('Authorization'); removeEncryptStorage(storageKeys.REFRESH_TOKEN); queryClient.resetQueries({queryKey: [queryKeys.AUTH]}); console.log("storage empty: ", getEncryptStorage(storageKeys.ACCESS_TOKEN)); }, ...mutationOptions, }); } 이게 강사님께서 쓰신 로그아웃 코드인데 removeEncryptStorage를 비동기 함수로 구현하셨었습니다. 제가 로그아웃 버튼을 누르는데 'localhost:제가 만든 서버 포트':auth/logout 이런식으로 클라이언트에 요청했을 때 로그를 살펴보니깐 LOG Access token after remove: {"_h": 0, "_i": 0, "_j": null, "_k": null} LOG Access token removed: false LOG isLogIn: false //이건 Navigation/root/RootNavigator.tsx에 isLogin값이 false인지 true인지 확인하기 위해 콘솔로그 찍음 이런식으로 출력되었었습니다. 로그아웃 직후에 바로 로그인이 된 상태로 작동했습니다. removeEncryptStorage는 비동기 함수이기 때문에 await 없이 호출되면 로그아웃 관련된 비동기 작업이 완려되기 전에 onSuccess내의 코드들이 실행된거 같습니다. function useLogout(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: async () => { removeHeader('Authorization'); await removeEncryptStorage(storageKeys.REFRESH_TOKEN); }, onSettled: () => { // 관련 쿼리 무효화하여 캐시 초기화 queryClient.invalidateQueries({queryKey: [queryKeys.AUTH]}); }, ...mutationOptions }); } 그래서 이런식으로 await async로 토큰 제거 작업이 완료된 후 까지 기다리게 만들어서 하니깐 로그아웃이 잘 작동되고 서버 내에 db랑 연결된 users 테이블 내의 refresh_token도 사라진걸 확인할 수 있었습니다. 제가 혹시 놓친 부분이 있었는지 왜 이런 차이가 나는지 정확한 이유를 몰라서 질문 남깁니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
$ npm start > MatzipApp@0.0.1 start > react-native start ▒▒▓▓▓▓▒▒ ▒▓▓▓▒▒░░▒▒▓▓▓▒ ▒▓▓▓▓░░░▒▒▒▒░░░▓▓▓▓▒ ▓▓▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▓▓ ▓▓░░░░░▒▓▓▓▓▓▓▒░░░░░▓▓ ▓▓░░▓▓▒░░░▒▒░░░▒▓▒░░▓▓ ▓▓░░▓▓▓▓▓▒▒▒▒▓▓▓▓▒░░▓▓ ▓▓░░▓▓▓▓▓▓▓▓▓▓▓▓▓▒░░▓▓ ▓▓▒░░▒▒▓▓▓▓▓▓▓▓▒░░░▒▓▓ ▒▓▓▓▒░░░▒▓▓▒░░░▒▓▓▓▒ ▒▓▓▓▒░░░░▒▓▓▓▒ ▒▒▓▓▓▓▒▒ Welcome to Metro v0.76.8 Fast - Scalable - Integrated r - reload the app d - open developer menu i - run on iOS a - run on Android info Opening the app on Android... info JS server already running. info Launching emulator... info Installing the app... > Task :gradle-plugin:compileKotlin UP-TO-DATE > Task :gradle-plugin:compileJava NO-SOURCE > Task :gradle-plugin:pluginDescriptors UP-TO-DATE > Task :gradle-plugin:processResources UP-TO-DATE > Task :gradle-plugin:classes UP-TO-DATE > Task :gradle-plugin:jar UP-TO-DATE > Task :gradle-plugin:inspectClassesForKotlinIC UP-TO-DATE > Task :app:buildCodegenCLI SKIPPED > Task :app:generateCodegenSchemaFromJavaScript SKIPPED > Task :app:generateCodegenArtifactsFromSchema SKIPPED > Task :app:generatePackageList > Task :app:preBuild > Task :app:preDebugBuild > Task :app:compileDebugAidl NO-SOURCE > Task :app:compileDebugRenderscript NO-SOURCE > Task :app:generateDebugBuildConfig UP-TO-DATE > Task :app:javaPreCompileDebug UP-TO-DATE > Task :app:checkDebugAarMetadata UP-TO-DATE > Task :app:generateDebugResValues UP-TO-DATE > Task :app:mapDebugSourceSetPaths UP-TO-DATE > Task :app:generateDebugResources UP-TO-DATE > Task :app:mergeDebugResources UP-TO-DATE > Task :app:createDebugCompatibleScreenManifests UP-TO-DATE > Task :app:extractDeepLinksDebug UP-TO-DATE > Task :app:processDebugMainManifest UP-TO-DATE > Task :app:processDebugManifest UP-TO-DATE > Task :app:processDebugManifestForPackage UP-TO-DATE > Task :app:processDebugResources UP-TO-DATE > Task :app:compileDebugJavaWithJavac UP-TO-DATE > Task :app:mergeDebugShaders UP-TO-DATE > Task :app:compileDebugShaders NO-SOURCE > Task :app:generateDebugAssets UP-TO-DATE > Task :app:mergeDebugAssets UP-TO-DATE > Task :app:compressDebugAssets UP-TO-DATE > Task :app:processDebugJavaRes NO-SOURCE > Task :app:mergeDebugJavaResource UP-TO-DATE > Task :app:checkDebugDuplicateClasses UP-TO-DATE > Task :app:desugarDebugFileDependencies UP-TO-DATE > Task :app:mergeExtDexDebug UP-TO-DATE > Task :app:mergeLibDexDebug UP-TO-DATE > Task :app:dexBuilderDebug UP-TO-DATE > Task :app:mergeProjectDexDebug UP-TO-DATE > Task :app:mergeDebugJniLibFolders UP-TO-DATE > Task :app:mergeDebugNativeLibs UP-TO-DATE > Task :app:stripDebugDebugSymbols UP-TO-DATE > Task :app:validateSigningDebug UP-TO-DATE > Task :app:writeDebugAppMetadata UP-TO-DATE > Task :app:writeDebugSigningConfigVersions UP-TO-DATE > Task :app:packageDebug UP-TO-DATE > Task :app:createDebugApkListingFileRedirect UP-TO-DATE > Task :app:installDebug FAILED 38 actionable tasks: 2 executed, 36 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 Warning: SDK processing. This version only understands SDK XML versions up to 3 but an SDK XML file of version 4 was encountered. This can happen if you use versions of Android Studio and the command-line tools that were released at different times. FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':app:installDebug'. > com.android.builder.testing.api.DeviceException: No connected devices! * 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 15s info Run CLI with --verbose flag for more details. 프로젝트 버전을 0.72.6로 했던 것 같은데, 아니네욤 $ npx react-native doctor Common ✓ Node.js - Required to execute JavaScript code ✓ npm - Required to install NPM dependencies 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 - Versions found: N/A - Version supported: 33.0.0 ✓ ANDROID_HOME - Environment variable that points to your Android SDK installation Errors: 2 Warnings: 0 Android ✖ Adb √ Select the device / emulator you want to use » Emulator Pixel_5_API_33 (disconnected) ✔ Adb ✔ Android SDK configured. You might need to restart your PC for all changes to take effect.! C:\Users[사용자이름]\AppData\Local\Google\AndroidStudio2024.1\log idea.log WARN - Emulator: Medium Phone API 35 - Emulator terminated with exit code -529697949 C:\Windows\System32>npx react-native -v 11.3.7 C:\Windows\System32>java -version openjdk version "17.0.8.1" 2023-08-24 OpenJDK Runtime Environment Temurin-17.0.8.1+1 (build 17.0.8.1+1) OpenJDK 64-Bit Server VM Temurin-17.0.8.1+1 (build 17.0.8.1+1, mixed mode, sharing) 사용자 변수의 PATH 사용자 변수 해결이 잘 안 되네요 ㅠㅠ ANDROID_HOME 환경 변수는 C 드라이브 밑에 제가 만든 폴더 경로(SDK 설치 단계에서 한 경로)로 잘 해두었습니다. Graphics 설정을 Software로 변경해보고 Windows 보안에서 폴더 제거해보고 인텔 그래픽 드라이버 업데이트해보고 메모리도 키워 보고
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
Error: async/await is not yet supported in Client Components, only Server Components. This error is often caused by accidentally adding 'use client' to a module that was originally written for the server. 이라는 에러가 뜨고 유저리스트가 빈배열 리턴되는데 이런 경우 어떻게 처리해야하나요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 일부만 복사해서 올려주시면 답변이 어렵습니다. ) 처음에 java 버전이 낮다고 해서 17로 업데이트했는데 계속 java 오류가 생겨요.. .
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요 강사님.. pod install 과정에서 아래와 같이 오류가 발생하는데 구글에 검색해보니 버전을 15.5 업그레이드 하라고 나와있는데.. 혹시 업그레이드 해도 되는걸까요..!? 현재는 13.0 버전입니다..!! https://stackoverflow.com/questions/78829036/pod-error-conflicting-versions-library-ssziparchive-react-native-code-push-with
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
맥북 / ios/ react-native 0.76.1/ node v18.18.0 즐겨찾기로 들어와서 즐겨찾기된 항목을 선택하면 페이지 이동이 안됩니다. ㅜㅜ The action 'NAVIGATE' with payload {"name":"FeedDetail","params":{"id":18}} was not handled by any navigator. Do you have a screen named 'FeedDetail'? If you're trying to navigate to a screen in a nested navigator, see https://reactnavigation.org/docs/nesting-navigators#navigating-to-a-screen-in-a-nested-navigator . If you're using conditional rendering, navigation will happen automatically and you shouldn't navigate manually. This is a development-only warning and won't be shown in production. ❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 일부만 복사해서 올려주시면 답변이 어렵습니다. )
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
padding을 0% 설정!!
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
(사진)
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요 강사님 잠시 후 다시 시도해주세요 페이지 로딩 후에 아래와 같이 오류가 발생하는데 해결 방법이 있을까요..
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
윈도우 안드로이드 설치 1-4 강좌를 끝내고 왔습니다. 강좌에서 SDK? 에 다운로드 중 경로에 한글이 있어 C드라이브 밑에 다운로드한 것 외에는 다르게 한 것이 없다고 생각합니다. 환경변수 또한 잘 설정해서 adb? 도 잘 나왔습니다 npx react-native@0.72.6 init MatzipApp --version 0.72.6 /c/Program Files/nodejs/npx: line 65: 1715 Segmentation fault "NODE_EXE" "$NPX_CLI_JS" "$@" 어떤걸 고쳐야할까요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 next-auth로 토큰 갱신 로직을 개발하는 중에 해결되지 않는 문제가 발생하여 질문 드립니다. 현재 클라이언트에서 api 요청을 하면 middleware에서 const token = await auth(); 이런식으로 세션 정보를 가져와 accessToken을 헤더에 삽입하는 방식을 구현하였습니다. if (request.nextUrl.pathname.startsWith("/gateway")) { const session = await auth(); const accessToken = session?.accessToken; const { device } = userAgent(request); const localeFromCookie = cookieStore.get("dp_lang")?.value as string; const defaultLocale = getLanguageCodeFromLocale(localeFromCookie); request.headers.set("Accept", "*/*"); request.headers.set("Authorization", `Bearer ${accessToken}`); request.headers.set("Access-Control-Allow-Origin", "*"); request.headers.set("deviceType", "1"); request.headers.set("deviceId", getDeviceIdFromCookie(cookieStore)); request.headers.set("osType", getOsTypeFromCookie(cookieStore)); request.headers.set("User-Agent", device.model ?? ""); request.headers.set("locale", localeFromCookie); request.headers.set("language", defaultLocale); const response = NextResponse.next({ request: { headers: request.headers, }, }); return response; } 따라서 미들웨어에서 세션에 접근하는 순간에 jwt콜백이 실행되어 jwt 토큰에 저장되어 있는 토큰 expire 시간을 비교하여 만료여부를 판단 한 뒤에 토큰 갱신이 되도록 구현을 하였습니다. async jwt({ token, account, user }) { // Initial sign in if (account && user) { return { accessToken: user.accessToken, expiresAt: new Date( Date.now() + (user?.expiresIn ?? 0) ).toISOString(), refreshToken: user.refreshToken, serviceAvailable: true, }; } // Return previous token if the access token has not expired yet if ( new Date() < new Date(new Date(token.expiresAt as string).getTime() - 5000) ) { console.log("@@@@@@valid"); return token; } else { if (token.error === "RefreshTokenInvalid") { return token; } // Access token has expired, try tㄴo update it try { console.log("@@@@@@expired"); const refreshedTokens = await authApi.refreshAuthToken({ refreshToken: token.refreshToken as string, accessToken: token.accessToken as string, }); console.log("==========token refreshed========"); // reissue token return { ...token, accessToken: refreshedTokens.accessToken, expiresAt: new Date( Date.now() + (refreshedTokens.expiresIn ?? 18000) ).toISOString(), refreshToken: refreshedTokens.refreshToken ?? token.refreshToken, error: null, }; } catch (error) { console.error("Token refresh failed", error); if (error.status === RestApiErrorType.invalidTokenException) { return { ...token, error: "RefreshTokenInvalid", }; } return { ...token, error: "RefreshAccessTokenError" }; } } }, 기존에는 세션에 접근을 할때 next-auth의 jwt 콜백이 돌고 값이 리턴되면 쿠키의 session-token값에 암호화된 값들이 업데이트 되는 걸로 알고 있었는데 찾아보니 현재 세션에 접근하고 갱신하는 부분이 서버단에 있어서 쿠키가 업데이트 되지 않는다고 합니다. 따라서 현재 토큰이 만료된 후 한번에 3가지의 api 콜을 요청했을때 첫번째 api요청에서는 정상적으로 토큰 refresh가 요청이 되며 middleware에서 세션에 접근해 갱신된 토큰이 가져와져 요청이 성공되나 그 뒤 요청부터는 쿠키에 업데이트가 되지 않아서인지 세션에서 갱신 전 토큰이 가져와지는 현상이 발생하고 있습니다. 클라이언트에서 세션 업데이트 후 세션에 접근을 해야 쿠키값이 갱신이 된다고 하는데 다른 방법이 있는지 문의드립니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
react-native를 이용해서 강의를 따라가고있었는데요, 어느순간부터 환경설정이 꼬인것같아서 빌드에 엄청 애를먹고있습니다.. 찾아보니 최근 rn에서 expo를 많이 밀어주고있고 한번 튜토리얼 따라해보니 환경설정도 너무 편하고 코드도 별 다른걸 못느꼈습니다.. 그래서 expo를 사용해보려고 하는데요. expo로 진행하면 강의를 잘 따라갈수 있을까요?
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 프로젝트 진행 중에 해결되지 않는 부분이 있어 질문 드립니다. middleware에서 쿠키의 값을 업데이트 하려고 하는데 업데이트 되지 않는 현상이 발생하고 있습니다. 아래의 코드와 같이 NextResponse.next() 실행 후에 response에 쿠키를 업데이트를 하려 하는데 반영이 되지 않습니다. request에서 세팅해도 마찬가지입니다. 쿠키 세팅이 되지 않는 원인에 대해 알고 계신가요?? export default async function middleware(request: NextAuthRequest) { if (request.nextUrl.pathname.startsWith("/gateway")) { const token = await getToken({ req: request, secret: process.env.AUTH_SECRET as string, secureCookie: process.env.NODE_ENV === "production", }); const accessToken = token?.accessToken; const { device } = userAgent(request); request.headers.set("Accept", "*/*"); request.headers.set("Authorization", `Bearer ${accessToken}`); request.headers.set("Access-Control-Allow-Origin", "*"); request.headers.set("deviceType", "1"); request.headers.set("User-Agent", device.model ?? ""); request.headers.set("locale", localeFromCookie); request.headers.set("language", defaultLocale); const response = NextResponse.next({ request: request.headers }); response.cookies.set("test", "test"); return response; } ... }
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 일부만 복사해서 올려주시면 답변이 어렵습니다. ) MapHomeScreen.tsx 37번째 줄의 아래의 코드에서 CompositeNavigationProp의 첫번째 인자는 StackNavigationProp 이 아닌DrawerNavigationProp가 먼저와야 하는것 아닌가요? 코드는 에러없이 잘 작동하지만 단순히 궁금해서 여쭤봅니다~ type Navigation = CompositeNavigationProp< StackNavigationProp<MapStackParamList>, DrawerNavigationProp<MainDrawerParamList> >;
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
무한 스크롤 구현 중에, 스크롤을 내리면 자연스럽게 다음 페이지로 이어지는 게 아니라, 한번 아래로 내려갔다가 다시 스크롤했던 위치로 돌아옵니다. 이 문제는 어떻게 해결할 수 있을까요?
미해결
Next + React Query로 SNS 서비스 만들기
const onClickHot = () => { setCurrent('hot'); router.replace(`/search?q=${searchParams.get('q')}`) } 이 코드가 있으면 q=null일때 주소가 http://localhost:3000/search?q=null 이렇게 이동되는데 제로초님은 아무런 검색어가 없는데 어떻게 null로 안나오죠? null체크를해서 주소를 2개 분기해도 될거같긴한데 제로초님은 q가 null일땐 주소창의 쿼리가 안생기더라고요 . 뭐가다른건지 모르겠네요ㅠ
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 일부만 복사해서 올려주시면 답변이 어렵습니다. ) [2-5]RN Drawer 관련 강의를 들으며, 따라한 이후,,, 빌드도 오류가 나고,,, 하기의 에러 메세지가 나와서, 이후 진도를 따라갈 수가 없습니다... 😂 😂 강사님 강의를 들으며,, 이전에 동일한 오류로 질문을 올려주신 분들의 레퍼런스도 다 해보고,, 구글링한 결과로도 해봤는데,,, 어느 부분이 문제인지,,, 3일째,,, 진도를 못나가고 있습니다...ㅠ 어떤 부분을 수정해야 할 지,,, 도움을 주시면,,,, 감사하겠습니다...! github: https://github.com/SooyeonBack/ReactNative.git 개발환경 윈도우 안드로이드 ReactNative 버전: 0.72.6 에러메세지 > Task :react-native-reanimated:compileDebugJavaWithJavac FAILED Deprecated Gradle features were used in this build, making it incompatible with Gradle 9.0. You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins. See https://docs.gradle.org/8.0.1/userguide/command_line_interface.html#sec:command_line_warnings 80 actionable tasks: 69 executed, 11 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 Warning: SDK processing. This version only understands SDK XML versions up to 3 but an SDK XML file of version 4 was encountered. This can happen if you use versions of Android Studio and the command-line tools that were released at different times. ``` 37 errors FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':react-native-reanimated:compileDebugJavaWithJavac'. > Compilation failed; see the compiler error output for details. * 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 13s info Run CLI with --verbose flag for more details.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요 강사님 회원탈퇴는 정상적으로 처리되서 팝업까지는 올라오는데 로그아웃이 실행되지 않습니다.. 😭 https://github.com/KMSKang/react
미해결
Next + React Query로 SNS 서비스 만들기
Next에서 자체적으로 제공하는 에러 바운더리인 error.js 와 서스펜스인 loading.js는 '서버 컴포넌트'의 에러와 로딩만 처리하는 것인가요? 예를 들어 서버 컴포넌트인 page.tsx의 하위 클라이언트 컴포넌트에서 에러가 발생했을 때는 error.js에서 캐치가 안 되는 것인가요...?
