173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요, 강좌들으며, msw를 프로젝트에 도입하다 궁금한점이 있어 남깁니다! 현재 위와 같이 코드를, 작성하여, 로그인 성공시, 위와 같이, 데이터와, 쿠키를 동시에 세팅해주고 있는 상황입니다! 실제로 아래와 같이, response들은 잘 넘어오나 response headers에 쿠키가, 오지 않아, 실제로 스토리지에 쿠키가 담기지 않습니다! 원래, 가상으로 심어주는 쿠키는, 브라우저의 쿠키에 담기지 않는건가요?? 궁금하여 질문남깁니다!! 좋은 강의 감사합니다!
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
function useLogout(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: async () => { await axiosInstance.post('/auth/logout'); // 로그아웃 요청을 서버에 먼저 보냄 removeHeader('Authorization'); await removeEncryptStorage(storageKeys.REFRESH_TOKEN); queryClient.resetQueries({queryKey: [queryKeys.AUTH]}); }, ...mutationOptions }); } 안녕하세요 강사님 강사님의 리액트 네이티브 강의를 보면서 직접 자신만의 리액트 네이티브 프로젝트도 직접 다뤄보면서 하고 있는 학생입니다. https://github.com/Dongrang072/carPoolTeamProject-server 이게 현재 제가 작성하고 있는 로컬 서버의 코드이고 https://github.com/Dongrang072/carpoolTeamProject 이게 프론트의 코드입니다 기존의 로그아웃 코드가 잘 작동하지 않아서, 코드를 이런식으로 고치고 난 후에 실행했는데 로그아웃으로 네비게이터가 authStack에 관련된 화면을 다시 보여주고 난 후에 이후 로그인까지는 의도적으로 되지만 로그인을 다시 실행하면 이전에 스토리지가 다 지워지지 않았는지 계정을 바꿔서 로그인 할 경우 전에 있던 계정으로 로그인이 되는 현상이 발생하고 있습니다. 분명 헤더와 스토리지를 지움으로서 accessToken과 refreshToken 둘 다 지운걸로 생각했는데 이런 일이 생기는 이유가 궁금합니다. 로그아웃 엔드포인트 호출까지 진행되고 다시 화면이 랜더링 되어서 저는 괜찮았다고 생각했는데 이후 storage가 다 지워지지 않는 것이 원인인것 같습니다
미해결
Next + React Query로 SNS 서비스 만들기
nextjs dev모드로 실행하다가 코드 저장하면 자꾸 서버 다운될 때도 많고, 코드 새로 수정해도 반영 안 될 때가 있어서, 서버 껐다 키는 경우가 빈번한데.. 이런거 해결하는 방법 없나요.. 제 컴퓨터에서는 nextjs가 너무 무거워서 리로드 하는 시간도 너무 오래 걸려서요 ㅠㅠ
미해결
Next + React Query로 SNS 서비스 만들기
서버 배포후 제공해주는 쿠키의 domain이, .naver.com이고, 만약 로컬호스트로 개발 할 경우 localhost의 도메인을 갖게되어, 둘의 도메인이 달라, 쿠키가 담기지 않는 경우가 발생합니다. 모든 통신 요청을 서버와 직접 진행 할 경우, .naver.com의 쿠키로, 모든것이 공유가 가능하니, 정상적으로 접근이 가능한 것 같은데 이제 간혹, 라우트 핸들러나, 미들웨어를 거쳐서, 통신 할 경우 도메인이 localhost가 되어, 401 에러가 발생하게 됩니다!! 이를 해결하기 위해, 로컬에서 두개의 서버를 띄워서 테스트하는 방법말고, 보통 실무나, 현업에서는 배포된 쿠키 로그인 방식을 활용할 떄, 어떻게 Next.js에서 환경 구성을 하는지, 로컬호스트가 아닌, 다른 도메인으로 띄울 수 있는 방법이 있는지 궁금합니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 강사님 안녕하세요. 지금 mac m3환경에서 개발중입니다. react-native 버젼 : 0.72.6 현재 [2-5] Drawer Navigation을 수강중인데요, 아이폰은 빌드 성공했는데 안드로이드에서 계속 빌드가 실패하고 있습니다. gpt에게 한번 질문을 해보니 버전을 올리라고하더라구요. 그럼 기존에 맞춰놓은 것들이 깨질까봐 걱정되어서 질문드립니다. 어떻게 하면좋을까요? 터미널: 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 /Users/rengoku/Documents/projects/Matzip/front/node_modules/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/NodesManager.java:440: error: switch rules are not supported in -source 11 case "opacity" -> { ^ (use -source 14 or higher to enable switch rules) /Users/rengoku/Documents/projects/Matzip/front/node_modules/react-native-reanimated/android/src/main/java/com/swmansion/reanimated/layoutReanimation/AnimationsManager.java:356: error: pattern matching in instanceof is not supported in -source 11 if (props.get(Snapshot.TRANSFORM_MATRIX) instanceof ReadableNativeArray matrixArray) { ^ (use -source 16 or higher to enable pattern matching in instanceof) 2 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 3s info Run CLI with --verbose flag for more details. 버전 정보입니다. "dependencies": { "@react-native-masked-view/masked-view": "^0.3.2", "@react-navigation/drawer": "^7.0.5", "@react-navigation/native": "^7.0.3", "@react-navigation/stack": "^7.0.3", "react": "18.2.0", "react-native": "0.72.6", "react-native-gesture-handler": "^2.21.2", "react-native-reanimated": "^3.16.1", "react-native-safe-area-context": "^4.14.0", "react-native-screens": "^4.1.0" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/eslint-config": "^0.72.2", "@react-native/metro-config": "^0.72.11", "@tsconfig/react-native": "^3.0.0", "@types/react": "^18.0.24", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.2.1", "eslint": "^8.19.0", "jest": "^29.2.1", "metro-react-native-babel-preset": "0.76.8", "prettier": "^2.4.1", "react-test-renderer": "18.2.0", "typescript": "4.8.4" }, "engines": { "node": ">=16" }
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 이거 무슨 오류일까요ㅜㅜ
해결됨
Next + React Query로 SNS 서비스 만들기
https://github.com/ZeroCho/z-com/blob/master/src/auth.ts#L16 배포하신 깃헙에서 궁금한점이 생겨서 질문드립니다 1. signOut에서 백엔드로 로그아웃 요청만 보내고 authorize()처럼 쿠키값을 set해주지 않았으니 connect.sid는 남아있는게 맞나요? 2. next auth 세션값이 지워지면서 프론트서버와 인증이 끊기는데 프론트서버에서 굳이 백엔드로 요청을 보내는 이유가 뭘까요? 백엔드 서버에 로그 남기기 위해서인가요?
미해결
Next + React Query로 SNS 서비스 만들기
form으로 put, patch, delete 요청이 안되는걸로 알고있는데 그럼 msw로 목업 요청을 작성할때랑 실제 서버를 작성할때랑 컴포넌트를 두개만들어서 해야하나요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
database 연결 정보는 본인 정보로 작성...!! @Module({ imports: [ TypeOrmModule.forRoot({ username: 'root', password: '1234', database: 'matzip-server', }), ], controllers: [AppController], providers: [AppService], })
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 서버도 켰고 코드에 문제도 없어보이는데 회원가입해도 DB에 아무런 값이 안들어가네요 네트워크에러 어떻게 해결해야하나요..
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. axios.ts에서 BaseURL 바꿔도 로그인이 안됩니다...
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
CoursItem.jsx App.jsx 제 개발화면 확인 부탁드립니다:)
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 아래 두가지 오류가 계속 반복됩니다. 윈도우입니다. 그리고 영상에서 로그인을 하고 지도를 보는데 로그인 아이디 비번은 그냥 아무거나 하면 되나용?
해결됨
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
유튜브에 올라온 js강의가 너무 만족스러워서 강의를 신청하였고, 현재 강의 잘듣고 있습니다. 저는 노드 공부를 하였고, 프론트 부분을 리액트로 하고 싶어서 강의를 듣고 있는데 혹시 노드(express)와 연동 해서 프로젝트를 하고 싶은데 괜찮은 자료나 강의가 있을까요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요 문득 궁금해서 질문드립니다. 리액트쿼리 공식문서를보면 const { isPending, error, data } = useQuery({ queryKey: ['repoData'], queryFn: () => fetch('https://api.github.com/repos/TanStack/query').then((res) => res.json(), ), }) if (isPending) return 'Loading...' if (error) return 'An error has occurred: ' + error.message 이렇게 항상 값이 있다는 가정하에 데이터를 사용하게 하는데 MapHomeScreen이나 MapLegend 등에선 const {categories} = getProfileQuery.data || {}; 이런식으로 하시더라구요 실제로 저는 MapHomeScreen 스크린에서 마커가 클릭후에 나타나는 현상이 있어서 const {data: markers = [], isPending, error} = useGetMarkers(); if (isPending || error) return <></>; 이렇게 데이터가 로딩또는 에러가 아닐때 다음 구문으로 넘어가게 하니 마커가 잘 나타났습니다 제가 궁금한건 if (isPending || error) return <></>; 처리를 해줄때와 안해줘도 될 때가 따로 있는것인지 그게 궁금합니다~
해결됨
맛집 지도앱 만들기 (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 오류가 생겨요.. .
