176만명의 커뮤니티!! 함께 토론해봐요.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
"[1-2] 맥-IOS 환경 설정"을 보고 있습니다. 저는 node를 설치하지 않고, nvm만 설치해서 사용하고 있는데요. 강사님께서는 brew install node 이후에 nvm을 설치하시네요. 저는 이렇게 하면 글로벌 node가 있고, nvm도 있는거라 혹시 꼬일까봐 node 설치 없이 nvm만 설치했는데요. 강사님 의견도 궁금합니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
서버랑 피그마 파일도 직접 제작하신건가요? 강사님 정말 대단하시네요. 강사님 처럼 되려면 어떻게 해야 하나요? (어떻게 셋 다 잘하나요?)
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
마커찍을때 위경도 가져오는걸로 알고있는데, 그때 지올로케이션 사용했엇거든요 라이브러리 근데 화면 내려갈때나 다른앱 사용할떄 백그라운드 환경으로 변하잖아요 근데 내가 그떄동안 걷고있으면 걷고있던길을 색으로 칠하고 싶다면 백그라운드에서도 해당 위도 경도를 받아와야하는데 즉 백그라인드에서 데이터 받을수있는 부분 강의에있나요 ?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
import {useEffect} from 'react'; import {useMutation, useQuery} from '@tanstack/react-query'; import {queryClient} from 'containers/TanstackQueryContainer.tsx'; import {getAccessToken, logout, postLogin, postSignup, socialLogin} from 'apis'; import {UseMutationCustomOptions} from 'types/mutations/common.ts'; import { numbers, removeEncryptStorage, removeHeader, setEncryptStorage, setHeader, } from 'utils'; import {queryKeys, storageKeys} from 'constants/storageKeys/keys.ts'; function useSignup(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: postSignup, throwOnError: error => Number(error.response?.status) >= 500, ...mutationOptions, }); } function useLogin(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: postLogin, onSuccess: data => { // 토큰 저장. const accessToken = data.result.accessToken; const refreshToken = data.result.refreshToken; setEncryptStorage(storageKeys.ACCESS_TOKEN, accessToken); setEncryptStorage(storageKeys.REFRESH_TOKEN, refreshToken); setHeader('Authorization', accessToken); }, onSettled: () => { queryClient.refetchQueries({ queryKey: [queryKeys.AUTH, queryKeys.GET_ACCESS_TOKEN], }); }, throwOnError: error => Number(error.response?.status) >= 500, ...mutationOptions, }); } function useSocialIdTokenLogin(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: socialLogin, onSuccess: ({result}) => { setHeader('Authorization', result.accessToken); setEncryptStorage(storageKeys.REFRESH_TOKEN, result.refreshToken); }, onSettled: () => { queryClient.refetchQueries({ queryKey: [queryKeys.AUTH, queryKeys.GET_ACCESS_TOKEN], }); }, throwOnError: error => Number(error.response?.status) >= 500, ...mutationOptions, }); } function useGetRefreshToken() { const {data, error, isSuccess, isError, isPending} = useQuery({ queryKey: [queryKeys.AUTH, queryKeys.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?.result.accessToken}`); setEncryptStorage(storageKeys.ACCESS_TOKEN, data.result.accessToken); setEncryptStorage(storageKeys.REFRESH_TOKEN, data.result.refreshToken); console.log(isSuccess, '성공'); } }, [isSuccess]); useEffect(() => { if (isError) { removeHeader('Authorization'); removeEncryptStorage(storageKeys.REFRESH_TOKEN); } }, [isError]); return {isSuccess, isError, error, data, isPending}; } function useLogout(mutationOptions?: UseMutationCustomOptions) { return useMutation({ mutationFn: logout, onSuccess: () => { removeHeader('Authorization'); removeEncryptStorage(storageKeys.REFRESH_TOKEN); queryClient.resetQueries({queryKey: [queryKeys.AUTH, 'getAccessToken']}); queryClient.clear(); }, throwOnError: error => Number(error.response?.status) >= 500, ...mutationOptions, }); } function useAuth() { const signUpMutation = useSignup(); const loginMutation = useLogin(); const socialIdTokenMutation = useSocialIdTokenLogin(); const getNewAccessToken = useGetRefreshToken(); const logoutMutation = useLogout(); const isLogin = getNewAccessToken.isSuccess; const isLoginLoading = getNewAccessToken.isPending; return { signUpMutation, loginMutation, socialIdTokenMutation, isLogin, logoutMutation, isLoginLoading, getNewAccessToken, }; } export default useAuth; // RootNavigator.tsx import FeedTabNavigator from '../tab/FeedTabNavigator.tsx'; import AuthStackNavigator from '../stack/AuthStackNavigator.tsx'; import {useEffect} from 'react'; import SplashScreen from 'react-native-splash-screen'; import useAuth from '../../hooks/queries/AuthScreen/useAuth.ts'; export default function RootNavigator() { const {isLogin, getNewAccessToken} = useAuth(); console.log(isLogin); useEffect(() => { setTimeout(() => { SplashScreen.hide(); }, 1000); }, []); return <>{isLogin ? <FeedTabNavigator /> : <AuthStackNavigator />}</>; } 안녕하세요, 강사님, 강사님 강의를 전체 모두 듣고, 비슷한 느낌으로 풀스택으로 앱개발을 진행하고있습니다. 강사님 강의처럼 쿼리를 활용하여 로그인 기능을 구현하고 싶어 useLogout훅에 onSettled를 넣었을 때는 강사님처럼 동일한 이상증상이 발생했고, 이를 해결하기 위해 강사님께서는 onSuccess부분에 queryClient.resetQueries({queryKey: [queryKeys.AUTH]}); 이 부분을 넣어주셔서 해결을하셨는데, 저는 해당 부분을 넣어도, 로그아웃이 되었다가, 바로 refreshToken으로 accessToken을 재발급받아, 로그인이 되지 않는 현상이 일어나고있습니다. clear()나 이런 것들을 활용했지만, 제대로 로그아웃이 동작하지 않아. 어떻게 해결할 수 있을지 의견을 구하고자 질문을 남깁니다.
미해결
핸즈온 리액트 네이티브
강사님 안녕하세요 ! 데스크탑을 껐다가 키면 환경변수 설정이 바뀌는 것 같습니다...! 아래와 같이 오류가 나오는 상황입니다. › Opening on Android... Failed to resolve the Android SDK path. ANDROID_HOME is set to a non-existing path: %LOCALAPPDATA%\Android\Sdk Failed to resolve the Android SDK path. ANDROID_HOME is set to a non-existing path: %LOCALAPPDATA%\Android\Sdk Error: 'adb'��(��) ���� �Ǵ� �ܺ� ����, ������ �� �ִ� ���α�, �Ǵ� ��ġ ������ �ƴմϴ�. 환경변수를 삭제하고, 재부팅하면 문제가 해결되는 것처럼 보이는데, 다음 날 데스크탑을 또 켜면 똑같은 오류가 발생합니다 ㅠㅠ 이를 방지할 해결방법이 있을까요...? 감사합니다 :)
미해결
핸즈온 리액트 네이티브
안녕하세요, 강사님 윈도우 데스크탑에서 expo login을 하고, npm start로 실행한 후 iOS 실물 기기에서 expo 프로젝트를 열려고 하는데 열리지가 않습니다..! 어떤 부분을 확인하면 되는지 알 수 있을까요? 감사합니다 :)
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
강사님, 최근에 강사님 강의를 듣고, 실제 프로젝트를 진행하면서 앱 배포 관련해서 이런저런 공부를 하고 있는데 궁금한 점이 생겨 질문드립니다. XCode 에서 BundleIdentifier을 com.xxx .xxxx 이런식으로 제공해주고 있는데. 해당 부분을 URL Scheme으로 활용하여 네이버 로그인을 개발 중에 있습니다. 이 부분을, 그럼 @implementation AppDelegate - (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options { if([RNKakaoLogins isKakaoTalkLoginUrl:url]) { return [RNKakaoLogins handleOpenUrl: url]; } if ([url.scheme isEqualToString:@"{{ CUSTOM URL SCHEME }}"]) { return [[NaverThirdPartyLoginConnection getSharedInstance] application:app openURL:url options:options]; } return NO; } CUSTOM URL SCHEME을 BundleIdentifier로 사용해도 괜찮은지 여부와, 해당 값을 환경변수 처리 없이, 공개적으로 적용해도 되는지 아래와 같이 입니다. if ([url.scheme isEqualToString:@"com.matzip"]) { return [[NaverThirdPartyLoginConnection getSharedInstance] application:app openURL:url options:options]; } return NO; } 혹시 만약에 되지 않는다면 AppDelegate.mm 에서 환경변수를 처리하는 방법과, 소셜 로그인시 필요한 URL Scheme은 보통 현업에서 어떠한 식으로 선정하여 처리하는지 궁금하여 질문드립니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요, 강사님, 강사님 강의를 들으며, 개인적인 프로젝트를 RN으로 진행중에 비슷한 상황이 발생하여 질문을 남겨봅니다. 아이콘같은 경우도, 이전에 잘 동작하다가 빌드 후, 에러가 발생하면 빌드 페이즈에 추가로 파일을 넣어서 해결하였습니다. 이번에 제가 추가한 폰트도, 이전에 잘 동작하다가, 해당 브랜치를 develop에 머지한 후, 새로 다른 브랜치를 만들어 작업중인데, 이전에 잘 동작했지만 동작하지 않습니다. 빌드 페이즈에 들어가있는걸 확인했는데 잘 동작하지 않는 경우는 어떻게 해결할지 의견을 구하고자 질문을 남깁니다.
미해결
핸즈온 리액트 네이티브
구글링을 통해 no-console: warn 규칙을 작성하였습니다. npx eslint .을 터미널에 실행하면 규칙에 따라 warning이 뜹니다. 그런데, 강사님의 화면에서 vscode에 App.js파일에 바로 밑줄이 그어지는 것과는 달리 저는 그런 작용이 없어서 질문드립니다... Extension에서 ESLint도 설치했는 데 왜 이럴까요?? ㅠㅠ
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요, 강사님 강의처럼 Signing & Capabilites부분에서 +버튼을 누르면 Signinwith apple 부분이 보이지 않습니다. 이 부분은 어떻게 해결해야하나요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
❗ 질문 작성시 꼭 참고해주세요 최대한 상세히 현재 문제(또는 에러)와 코드(또는 github) 를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다. 맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경 도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황 을 올려주세요! 안녕하세요. vs code 터미널에서 안드로이드 시뮬레이터를 켜기위해 $ npx react-native run-android를 실행하면 error Failed to install the app. Make sure you have an Android emulator running or a device connected. 디바이스가 연결되어있는지 확인하라고 뜨고 Android Studio 를 켜서 virtual deivce manager 에서 디바이스를 연결해놓고 하면 잘되는데 원래 Android Studio에서 디바이스를 연결해놓고 $ npx react-native run-android 를 실행하는게 맞는건가해서요.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
계속 에러를 해결해보려했지만 어디부분이 잘못된건지 알고싶어 글 남깁니다 처음에 프로젝트를 생성하고 나서 안드로이드는 실행되지만 해당 프로젝트 화면은 나오지않아 npx react-native run-android로 다시 실행하면 사진과 같은 에러가 발생합니다.Gradle , JDK와 관련된 에러같은데 삭제를 시도해보고 다시 설치해봣지만해결되지 않네요 ㅠ 어디 부분이 문제인지 몰라 일단 몇개 사진 첨부합니다.! zshrc
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
맛집 파일 업로드 하려고 하면 unable to import file 이라고 뜨네요.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
양질의 강의 잘 듣고있습니다. queryKey: [queryKeys.POST, queryKeys.GET_POSTS], 쿼리키에 다음과 같이 굳이 POST를 넣어주는 이유가 그룹화 하기위함인가요? 나중에 서비스가 커질 경우 어떤 항목의 get_posts인지 구분이 힘들어질수 있어서 그런것인지 궁금합니다. 만일 그렇다면 useMutateDeletePost() 에서 queryClient.invalidateQueries({queryKey: [queryKeys.POST]}); 로 처리하면 POST관련 모든 캐시가 지워지는건가요?
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요. map 에서 marker 가 깜빡거리는 문제가 있어서 질문드립니다. (map home 에서 아무 동작도 하지 않고 있는 상태, marker 가 지속적으로 깜빡거림) 동영상을 업로드할 수 없어서 동영상 촬영후 깜빡거리기 전후를 캡쳐했습니다. 안드로이드에서만 발생하고, virtual device 와 실제 기기에서 모두 발생하고 있습니다. 혹시 계속해서 마커를 새로 조회해오거나, 제 실수로 리렌더링이 무한히 되는게 아닌가 싶어서, CustomMarker 컴포넌트랑, marker 조회하는 api 에 로그 추가해봤지만 한번 호출되고 그 후에는 함수가 실행되지 않는것으로 확인했습니다. 추가로 이 문제가 아이폰 simulator 에서는 발생하지 않고 있습니다. 혹시 제가 더 확인해 볼만한 포인트가 있을까요,,,? 같은 문제를 겪으신 분이 혹시 계실까요,,
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요. 강의 내용에 대한 질문은 아니고, 코드 스타일에 대한 질문입니다. 함수 정의하실 때 어쩔 때는 function 키워드 사용하시고 어쩔때는 arrow function 사용하시는데 특별한 기준이 있으신가요? 아니면 그냥 그때그때 생각나는거로 쓰시는건가요? 아니면 this scope 고려해서 상황에 따라 선택하시는건가요? 특별한 기준이 혹시 있는건지 궁금합니다.
해결됨
맛집 지도앱 만들기 (React Native & NestJS)
안녕하세요. [5-3] 장소 등록하기(4) - 주소 조회 with Google API 강의에서 질문이 있습니다. useGetAddress() hook 에서 get 요청 API 에 API Key 를 그대로 넣는데, 혹시 API key 가 노출될 위험이 없는 걸까요? 보통 웹 환경이었으면 클라이언트가 서버로 LatLng 를 넘겨서 요청하면, 서버에서 API Key 로 address 얻어서 클라이언트 사이드로 넘겨주었을것 같은데, 모바일은 이렇게 프리(?)하게 사용해도 보안상 큰 문제가 없는지 궁금합니다! (특히 Production 환경에 배포하는 코드에서도 문제가 없을지 궁금합니다.) 모바일 환경에서의 개발은 이 강의로 처음 하는거라 프로덕션 레벨까지 올렸을 때 어떻게 대응하는지에 대해 궁금한 점이 종종 생기는것같습니다.
해결됨
핸즈온 리액트 네이티브
Expo 프로젝트 생성 후 수업과 다른 파일 구조로 생성이 되서요. tsx 파일로 보입니다. 재설치 해야 할 까요?
해결됨
배달앱 클론코딩 [with React Native]
MainApplication.java 가 아닌 MainApplication.kt (Kotlin) 일 경우 @공식문서 @Override protected String getJSBundleFile() { return CodePush.getJSBundleFile(); } 대신 override fun getJSBundleFile(): String { return CodePush.getJSBundleFile() } 추가하시면 됩니다.
미해결
따라하며 배우는 리액트 네이티브 기초
이것들이 도대체 뭘까요 .... 안드로이드는 나오지도 않네요 .... 제발 알려주세요 ... "type": "module" 이거 에러는 왜자꾸 나는걸까요 ㅠㅠ node버전 확인해보면 22이상이라 에러가 안 떠야 하는데 계속 뜨네요 ㅠㅠ 지금 에러 때문에 아무것도 안되는데 제발 도와주세요 ..
