inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

묻고 답해요

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

3-8. 로그아웃 에러

해결됨

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

안녕하세요 강사님. 그동안 로그인 구현을 해본적이 없어서 정말 유익한 강의였습니다. 3-8 강의를 듣던 중 강의대로 했는데 로그아웃이 안 되더라구요. 혼자 해결해보려고 다양한 방법으로 해서 결국 로그인과 로그아웃이 동작은 하는데 로그아웃 버튼을 두 번 클릭해야지 AuthStackNavigator로 네비게이팅이 되는 문제가 있습니다. https://github.com/G0MTENG/MatzipApp-project/tree/3-8 깃허브에 3-8 브랜치에 올려두었습니다. src/hooks/queries/useAuth에 이에 대한 구현이 있고 추가적으로 useAuth 코드를 올려두겠습니다. 감사합니다. import { getAccessToken, postLogin, postSignUp, getProfile, logout, } from '@/apis'; import {queryClient} from '@/apis/queryClient'; import {authQueryKeys, storageKeys, numbers} from '@/constants'; import {UseMutationCustomOptions, UseQueryCustomOptions} from '@/types'; import { removeEncryptStorage, removeHeader, setEncryptStorage, setHeader, } from '@/utils'; import {useMutation, useQuery} from '@tanstack/react-query'; import {useEffect} from 'react'; export const useSignUp = (mutationOptions?: UseMutationCustomOptions) => { return useMutation({ mutationFn: postSignUp, ...mutationOptions, }); }; export const useLogin = (mutationOptions?: UseMutationCustomOptions) => { return useMutation({ mutationFn: postLogin, onSuccess: ({accessToken, refreshToken}) => { setEncryptStorage('refreshToken', refreshToken); setHeader('Authorization', `Bearer ${accessToken}`); }, onSettled: () => { queryClient.refetchQueries({ queryKey: [authQueryKeys.AUTH, authQueryKeys.GET_ACCESS_TOKEN], }); queryClient.invalidateQueries({ queryKey: [authQueryKeys.AUTH, authQueryKeys.GET_PROFILE], }); }, ...mutationOptions, }); }; export const useGetRefreshToken = () => { const {data, isSuccess, isError} = useQuery({ queryKey: [authQueryKeys.AUTH, authQueryKeys.GET_ACCESS_TOKEN], queryFn: getAccessToken, staleTime: numbers.ACCESS_TOKEN_REFRESH_TIME, refetchInterval: numbers.ACCESS_TOKEN_REFRESH_TIME, refetchOnReconnect: true, refetchIntervalInBackground: true, }); useEffect(() => { if (isSuccess) { setHeader('Authorization', `Bearer ${data.accessToken}`); setEncryptStorage(storageKeys.REFRESH_TOKEN, data.refreshToken); } }, [isSuccess, data]); useEffect(() => { if (isError) { removeEncryptStorage(storageKeys.REFRESH_TOKEN); removeHeader('Authorization'); } }, [isError]); return {isSuccess, isError}; }; export const useGetProfile = (quryOptions?: UseQueryCustomOptions) => { return useQuery({ queryKey: [authQueryKeys.AUTH, authQueryKeys.GET_PROFILE], queryFn: getProfile, ...quryOptions, }); }; export const useLogout = (mutationOptions?: UseMutationCustomOptions) => { return useMutation({ mutationFn: logout, onSuccess: async () => { await removeEncryptStorage(storageKeys.REFRESH_TOKEN); removeHeader('Authorization'); }, onSettled: () => { queryClient.resetQueries({queryKey: [authQueryKeys.AUTH]}); queryClient.invalidateQueries({queryKey: [authQueryKeys.AUTH]}); }, ...mutationOptions, }); }; export const useAuth = () => { const signupMutation = useSignUp(); const refreshTokenQuery = useGetRefreshToken(); const getProfileQuery = useGetProfile({ enabled: refreshTokenQuery.isSuccess, }); const isLogin = getProfileQuery.isSuccess; const loginMutation = useLogin(); const logoutMuatation = useLogout(); return { signupMutation, loginMutation, isLogin, getProfileQuery, logoutMuatation, }; };

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

2-5 강의 에러 (react-native-reanimated 설치 후 에러)

해결됨

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

환경 : 맥, 안드로이드 버전 : react-native 0.72.6 node 22.11.0 깃허브 : https://github.com/taeyun01/react-native-map 안녕하세요! 2-5 강의 질문도 보고 구글에도 쳐보고 했지만 계속 해결이 안되어 문의 드립니다 ㅠ 시도해본것 node_modules 삭제 Drawer Navigator 패키지 삭제 후 재설치 설치 후 npx react-native run-ios yarn install react-native-reanimated/plugin 추가 npx react-native start --reset-cache 터미널 에러 전체 (에러가 너무 길어 작성이 안되어 메모장 링크로 첨부드립니다.) https://n.lrl.kr/NkN4aH 안드로이드 에뮬레이터 화면 에러 package.json { "name": "foodMap", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-masked-view/masked-view": "^0.3.2", "@react-navigation/drawer": "^7.0.11", "@react-navigation/native": "^7.0.4", "@react-navigation/stack": "^7.0.6", "react": "18.2.0", "react-native": "0.72.6", "react-native-gesture-handler": "^2.21.2", "react-native-reanimated": "^3.16.2", "react-native-safe-area-context": "^4.14.0", "react-native-screens": "^4.3.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
  • typescript
  • nestjs
  • react-query
  • zustand
밥이네 댓글 3 좋아요 0 조회수 978

npx react-native start --reset-cache 에러

해결됨

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

환경: mac m1 npx react-native start --reset-cache를 했는데 (node:73693) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead. (Use `node --trace-deprecation ...` to show where the warning was created) ▒▒▓▓▓▓▒▒ ▒▓▓▓▒▒░░▒▒▓▓▓▒ ▒▓▓▓▓░░░▒▒▒▒░░░▓▓▓▓▒ ▓▓▒▒▒▓▓▓▓▓▓▓▓▓▓▓▓▒▒▒▓▓ ▓▓░░░░░▒▓▓▓▓▓▓▒░░░░░▓▓ ▓▓░░▓▓▒░░░▒▒░░░▒▓▒░░▓▓ ▓▓░░▓▓▓▓▓▒▒▒▒▓▓▓▓▒░░▓▓ ▓▓░░▓▓▓▓▓▓▓▓▓▓▓▓▓▒░░▓▓ ▓▓▒░░▒▒▓▓▓▓▓▓▓▓▒░░░▒▓▓ ▒▓▓▓▒░░░▒▓▓▒░░░▒▓▓▓▒ ▒▓▓▓▒░░░░▒▓▓▓▒ ▒▒▓▓▓▓▒▒ warning: the transform cache was reset. 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 warning: Watchman `watch-project` returned a warning: Recrawled this watch 1 time, most recently because: MustScanSubDirs UserDroppedTo resolve, please review the information on https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl To clear this warning, run: `watchman watch-del '/Users/teng/MatzipApp' ; watchman watch-project '/Users/teng/MatzipApp'` warning: Watchman `query` returned a warning: Recrawled this watch 1 time, most recently because: MustScanSubDirs UserDroppedTo resolve, please review the information on https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl To clear this warning, run: `watchman watch-del '/Users/teng/MatzipApp' ; watchman watch-project '/Users/teng/MatzipApp'` Recrawled this watch 1 time, most recently because: MustScanSubDirs UserDroppedTo resolve, please review the information on https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl To clear this warning, run: `watchman watch-del '/Users/teng/MatzipApp' ; watchman watch-project '/Users/teng/MatzipApp'` Recrawled this watch 1 time, most recently because: MustScanSubDirs UserDroppedTo resolve, please review the information on https://facebook.github.io/watchman/docs/troubleshooting.html#recrawl To clear this warning, run: `watchman watch-del '/Users/teng/MatzipApp' ; watchman watch-project '/Users/teng/MatzipApp'` info Opening the app on Android... info JS server already running. info Launching emulator... info Successfully launched 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 > Configure project :react-native-reanimated Android gradle plugin: 7.4.2 Gradle: 8.0.1 WARNING:Software Components will not be created automatically for Maven publishing from Android Gradle Plugin 8.0. To opt-in to the future behavior, set the Gradle property android.disableAutomaticComponentCreation=true in the `gradle.properties` file or use the new publishing DSL. (생략) > Task :react-native-gesture-handler:compileDebugLibraryResources > Task :app:mergeDebugResources > Task :app:processDebugMainManifest > Task :app:processDebugManifest > Task :app:processDebugManifestForPackage > Task :react-native-gesture-handler:parseDebugLocalResources > Task :react-native-masked-view_masked-view:compileDebugLibraryResources > Task :react-native-reanimated:parseDebugLocalResources > Task :react-native-reanimated:compileDebugLibraryResources > Task :react-native-masked-view_masked-view:parseDebugLocalResources > Task :react-native-safe-area-context:compileDebugLibraryResources > Task :react-native-safe-area-context:parseDebugLocalResources > Task :react-native-gesture-handler:generateDebugBuildConfig > Task :react-native-reanimated:generateDebugBuildConfig > Task :react-native-screens:compileDebugLibraryResources > Task :react-native-reanimated:packageNdkLibs NO-SOURCE > Task :react-native-reanimated:javaPreCompileDebug > Task :react-native-gesture-handler:javaPreCompileDebug > Task :react-native-masked-view_masked-view:generateDebugBuildConfig > Task :react-native-masked-view_masked-view:javaPreCompileDebug > Task :react-native-safe-area-context:generateDebugBuildConfig > Task :react-native-safe-area-context:javaPreCompileDebug > Task :react-native-screens:generateDebugBuildConfig > Task :react-native-screens:javaPreCompileDebug > Task :react-native-screens:parseDebugLocalResources > Task :app:mergeDebugShaders UP-TO-DATE > Task :app:compileDebugShaders NO-SOURCE > Task :app:generateDebugAssets UP-TO-DATE > Task :react-native-gesture-handler:mergeDebugShaders > Task :react-native-gesture-handler:compileDebugShaders NO-SOURCE > Task :react-native-gesture-handler:generateDebugAssets UP-TO-DATE > Task :react-native-gesture-handler:packageDebugAssets > Task :react-native-masked-view_masked-view:mergeDebugShaders > Task :react-native-masked-view_masked-view:compileDebugShaders NO-SOURCE > Task :react-native-masked-view_masked-view:generateDebugAssets UP-TO-DATE > Task :react-native-masked-view_masked-view:packageDebugAssets > Task :react-native-reanimated:mergeDebugShaders > Task :react-native-reanimated:compileDebugShaders NO-SOURCE > Task :react-native-reanimated:generateDebugAssets UP-TO-DATE > Task :react-native-reanimated:packageDebugAssets > Task :react-native-safe-area-context:mergeDebugShaders > Task :react-native-safe-area-context:compileDebugShaders NO-SOURCE > Task :react-native-safe-area-context:generateDebugAssets UP-TO-DATE > Task :react-native-safe-area-context:packageDebugAssets > Task :react-native-screens:mergeDebugShaders > Task :react-native-screens:compileDebugShaders NO-SOURCE > Task :react-native-screens:generateDebugAssets UP-TO-DATE > Task :react-native-screens:packageDebugAssets > Task :react-native-reanimated:generateDebugRFile > Task :react-native-safe-area-context:generateDebugRFile > Task :app:mergeDebugAssets UP-TO-DATE > Task :react-native-masked-view_masked-view:generateDebugRFile > Task :react-native-screens:generateDebugRFile > Task :react-native-gesture-handler:generateDebugRFile > 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 82 actionable tasks: 70 executed, 12 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 /Users/teng/MatzipApp/frontend/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/teng/MatzipApp/frontend/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 34s info Run CLI with --verbose flag for more details. 위와 같이 에러가 발생합니다. Drawer를 설치한 이후부터 계속 막히네요 ... `plugins: ['react-native-reanimated/plugin'],`도 했습니다. 추가적으로 다른 질문들도 봤는데 다 해결이 안 됐습니다 ㅜㅜ

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

cocoapod error

미해결

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

❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. npx react-native를 통해 프로젝트를 다운로드 하는데 ✖ Installing CocoaPods error error Installing Cocoapods failed. This doesn't affect project initialization and you can safely proceed. However, you will need to install Cocoapods manually when running iOS, follow additional steps in "Run instructions for iOS" section. Error: An error occured while trying to install CocoaPods, which is required by this template. Please try again manually: sudo gem install cocoapods. CocoaPods documentation: https://cocoapods.org/ 다음과 같은 에러가 발생했습니다. >> sudo gem install cocoapods Password: ERROR: Error installing cocoapods: The last version of drb (>= 0) to support your Ruby & RubyGems was 2.0.6. Try installing it with `gem install drb -v 2.0.6` and then running the current command again drb requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210 수동으로 설치했는데 안 돼서 ruby 버전을 봤는데 >> ruby -v ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin24] 루비를 2.7 버전 이상으로 만들어주기 위해 rbenv를 다운받고 rbenv install -l 3.1.6 3.2.6 3.3.6 jruby-9.4.9.0 mruby-3.3.0 picoruby-3.0.0 truffleruby-24.1.1 truffleruby+graalvm-24.1.1 rbenv install 3.3.6 ruby-build: using openssl@3 from homebrew ==> Downloading ruby-3.3.6.tar.gz... -> curl -q -fL -o ruby-3.3.6.tar.gz https://cache.ruby-lang.org/pub/ruby/3.3/ruby-3.3.6.tar.gz % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 21.1M 100 21.1M 0 0 2434k 0 0:00:08 0:00:08 --:--:-- 2470k ==> Installing ruby-3.3.6... ruby-build: using libyaml from homebrew ruby-build: using gmp from homebrew -> ./configure "--prefix=$HOME/.rbenv/versions/3.3.6" --with-openssl-dir=/usr/local/opt/openssl@3 --enable-shared --with-libyaml-dir=/usr/local/opt/libyaml --with-gmp-dir=/usr/local/opt/gmp --with-ext=openssl,psych,+ -> make -j 8 *** Following extensions are not compiled: openssl: Could not be configured. It will not be installed. /private/var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241124141446.8409.VoUaep/ruby-3.3.6/ext/openssl/extconf.rb:122: OpenSSL library could not be found. You might want to use --with-openssl-dir=<dir> option to specify the prefix where OpenSSL is installed. Check /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241124141446.8409.VoUaep/ruby-3.3.6/ext/openssl/mkmf.log for more details. psych: Could not be configured. It will not be installed. Check /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241124141446.8409.VoUaep/ruby-3.3.6/ext/psych/mkmf.log for more details. BUILD FAILED (macOS 15.1.1 on arm64 using ruby-build 20241105) You can inspect the build directory at /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241124141446.8409.VoUaep See the full build log at /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241124141446.8409.log 이렇게 에러가 발생합니다 .. 이틀째 해결방법을 찾는데 계속 막혀서 글 올립니다 감사합니다 ㅜㅜ

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

BUILD FAILED (macOS 15.0.1 on arm64 using ruby-build 20241105)

해결됨

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

❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. Macbook Ari M1 / MacOS 15.0.1 rbenv [루비버전] rbenv install 3.2.2 rbenv: /Users/teng/.rbenv/versions/3.2.2 already exists continue with installation? (y/N) y ruby-build: using openssl@3 from homebrew ==> Downloading ruby-3.2.2.tar.gz... -> curl -q -fL -o ruby-3.2.2.tar.gz https://cache.ruby-lang.org/pub/ruby/3.2/ruby-3.2.2.tar.gz % Total % Received % Xferd Average Speed Time Time Time Current Dload Upload Total Spent Left Speed 100 19.5M 100 19.5M 0 0 16.5M 0 0:00:01 0:00:01 --:--:-- 16.5M ==> Installing ruby-3.2.2... ruby-build: using readline from homebrew ruby-build: using libyaml from homebrew ruby-build: using gmp from homebrew -> ./configure "--prefix=$HOME/.rbenv/versions/3.2.2" --with-openssl-dir=/usr/local/opt/openssl@3 --enable-shared --with-readline-dir=/usr/local/opt/readline --with-libyaml-dir=/usr/local/opt/libyaml --with-gmp-dir=/usr/local/opt/gmp --with-ext=openssl,psych,+ -> make -j 8 BUILD FAILED (macOS 15.0.1 on arm64 using ruby-build 20241105) You can inspect the build directory at /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241123200520.32443.l96uOO See the full build log at /var/folders/yk/px23h3t50fn50y19rbdwp81r0000gn/T/ruby-build.20241123200520.32443.log 이렇게 오류가 발생합니다. 선생님. 2.7.6을 다운로드 했는데 deprecated 됐다고 나오고, 그래서 이 버전으로도 해봤는데 안 되더라구요... 거의 몇시간을 찾는데 관련 글도 안 나옵니다 ㅜㅜ

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

msw 쿠키 관련 궁금증!

미해결

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

안녕하세요, 강좌들으며, msw를 프로젝트에 도입하다 궁금한점이 있어 남깁니다! 현재 위와 같이 코드를, 작성하여, 로그인 성공시, 위와 같이, 데이터와, 쿠키를 동시에 세팅해주고 있는 상황입니다! 실제로 아래와 같이, response들은 잘 넘어오나 response headers에 쿠키가, 오지 않아, 실제로 스토리지에 쿠키가 담기지 않습니다! 원래, 가상으로 심어주는 쿠키는, 브라우저의 쿠키에 담기지 않는건가요?? 궁금하여 질문남깁니다!! 좋은 강의 감사합니다!

  • react
  • next.js
  • react-query
  • next-auth
  • msw
김용민 댓글 2 좋아요 0 조회수 246

[3-8] 로그아웃 관련 문의 드립니다

해결됨

맛집 지도앱 만들기 (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가 다 지워지지 않는 것이 원인인것 같습니다

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
최상현 댓글 1 좋아요 0 조회수 131

Nextjs dev모드 오류

미해결

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

nextjs dev모드로 실행하다가 코드 저장하면 자꾸 서버 다운될 때도 많고, 코드 새로 수정해도 반영 안 될 때가 있어서, 서버 껐다 키는 경우가 빈번한데.. 이런거 해결하는 방법 없나요.. 제 컴퓨터에서는 nextjs가 너무 무거워서 리로드 하는 시간도 너무 오래 걸려서요 ㅠㅠ

  • react
  • next.js
  • react-query
  • next-auth
  • msw
석봉토스트 댓글 2 좋아요 0 조회수 234

쿠키 로그인 방식에 대한 궁금한 점이 있습니다!

미해결

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

서버 배포후 제공해주는 쿠키의 domain이, .naver.com이고, 만약 로컬호스트로 개발 할 경우 localhost의 도메인을 갖게되어, 둘의 도메인이 달라, 쿠키가 담기지 않는 경우가 발생합니다. 모든 통신 요청을 서버와 직접 진행 할 경우, .naver.com의 쿠키로, 모든것이 공유가 가능하니, 정상적으로 접근이 가능한 것 같은데 이제 간혹, 라우트 핸들러나, 미들웨어를 거쳐서, 통신 할 경우 도메인이 localhost가 되어, 401 에러가 발생하게 됩니다!! 이를 해결하기 위해, 로컬에서 두개의 서버를 띄워서 테스트하는 방법말고, 보통 실무나, 현업에서는 배포된 쿠키 로그인 방식을 활용할 떄, 어떻게 Next.js에서 환경 구성을 하는지, 로컬호스트가 아닌, 다른 도메인으로 띄울 수 있는 방법이 있는지 궁금합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
김용민 댓글 1 좋아요 0 조회수 158

강사님 안녕하세요 질문 있습니다.

해결됨

맛집 지도앱 만들기 (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
  • typescript
  • nestjs
  • react-query
  • zustand
댓글 2 좋아요 0 조회수 336

[3-8]회원가입/로그인 오류

해결됨

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

❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 이거 무슨 오류일까요ㅜㅜ

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

배포하신 깃헙 auth.ts signOut 질문입니다

해결됨

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 세션값이 지워지면서 프론트서버와 인증이 끊기는데 프론트서버에서 굳이 백엔드로 요청을 보내는 이유가 뭘까요? 백엔드 서버에 로그 남기기 위해서인가요?

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

form으로 put, patch, delete 요청이 안되는걸로 알고있습니다.

미해결

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

form으로 put, patch, delete 요청이 안되는걸로 알고있는데 그럼 msw로 목업 요청을 작성할때랑 실제 서버를 작성할때랑 컴포넌트를 두개만들어서 해야하나요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
ChangJun.dev 댓글 1 좋아요 0 조회수 174

[해결 완료] npm run start:dev 오류

해결됨

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

database 연결 정보는 본인 정보로 작성...!! @Module({ imports: [ TypeOrmModule.forRoot({ username: 'root', password: '1234', database: 'matzip-server', }), ], controllers: [AppController], providers: [AppService], })

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
강프로그래머 댓글 1 좋아요 0 조회수 144

회원가입 로그인 시 아무 반응이 없어요.

해결됨

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

❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 서버도 켰고 코드에 문제도 없어보이는데 회원가입해도 DB에 아무런 값이 안들어가네요 네트워크에러 어떻게 해결해야하나요..

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

[4-0] 로그인하고 아무 반응이 없어요/axios.ts

해결됨

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

❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. axios.ts에서 BaseURL 바꿔도 로그인이 안됩니다...

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
댓글 3 좋아요 0 조회수 298

[4-0]구글 지도 계속 오류에요..

해결됨

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

❗ 질문 작성시 꼭 참고해주세요 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주세요. 맥/윈도우, 안드로이드/iOS, ReactNative, Node 버전 등의 개발환경 을 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요. ( 일부만 자르거나 복사하지말아주세요 .) 개발환경/코드에 대한 정보가 없을경우 답변이 어렵습니다. 아래 두가지 오류가 계속 반복됩니다. 윈도우입니다. 그리고 영상에서 로그인을 하고 지도를 보는데 로그인 아이디 비번은 그냥 아무거나 하면 되나용?

  • react-native
  • typescript
  • nestjs
  • react-query
  • zustand
김민솔 댓글 2 좋아요 0 조회수 332

노드(express) 연동

해결됨

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

유튜브에 올라온 js강의가 너무 만족스러워서 강의를 신청하였고, 현재 강의 잘듣고 있습니다. 저는 노드 공부를 하였고, 프론트 부분을 리액트로 하고 싶어서 강의를 듣고 있는데 혹시 노드(express)와 연동 해서 프로젝트를 하고 싶은데 괜찮은 자료나 강의가 있을까요?

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
철수 댓글 2 좋아요 0 조회수 161

useQuery 데이터 사용법 질문

해결됨

맛집 지도앱 만들기 (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
  • typescript
  • nestjs
  • react-query
  • zustand
최수렬 댓글 2 좋아요 0 조회수 177

인기 태그

인프런 TOP Writers

주간 인기글