현재 위치 누르면 지도가 이동되긴 하는데 안드로이드 아이폰 모두 이상한곳으로 이동됩니다.. 뭐가 잘못된걸까요? 

안녕하세요.[3-8] React Query 도입(1) 강의를 수강하던 중 질문이 생겼습니다. 저는 백엔드 개발자로 일하고 있고, RN 을 취미로 공부하고 있는 개발자입니다. 보통 웹 환경에서는 보안상의 이유로 refresh token 을 서버에서 secure cookie 로 set 하고, 클라이언트측에서는 읽거나 수정하지 못하게 하고, 로그아웃 시에도 서버에서 해당 refresh token cookie 를 날려(delete)주는데, 모바일 환경에서는 refresh token 을 response body 로 받는 방법밖에 없는걸까요? (웹 브라우저 환경처럼 다른 선택지가 있는지 ex. 쿠키) refresh token 을 상용 앱 개발에서도 이렇게 다루는지 궁금합니다! (response body 로 받아서 Encrypted storage 에 저장해서 사용)만약 그렇다면 이렇게 했을때 보안적으로 큰 문제가 없기 때문에 이렇게 사용하는 것일까요? 감사합니다.

[3-1] 홈 스크린 구현하기 4:13에서 버튼 스타일 망가진걸 수정하시면서 flexDirection: 'row' 를 container, large, medium 객체에 추가하시고, styles[size] 를 <Text> 로 옮기셨는데 어떤 이유에서 이렇게 하신건지 잘 이해가 안됩니다.혹시 이유에 대해 조금 더 보충설명 해 주실 수 있으신가요? flexDirection 이 뭔지는 이해하고 있는데, 이 상황에서 이게 어떻게 스타일을 고친건지 감이 잘 안잡히네요.  감사합니다.

피그마 파일을 받기위해 Matzip.zip 파일을 받아서 압축해제 했으나 Matzip.fig 파일이 없습니다. 확인 부탁드립니다. 

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!빌드와 코드 자체에 오류는 딱히 없는데 앱이 splash 이미지까지만 켜지고 강제 종료됩니다. 여기 저기 검색해서 나온 방법 다 해본 것 같은데 해결이 안됩니다. logcat에는 systemserver와 pid 관련 오류가 많이 보입니다. 강의는 2-3까지 진행하였습니다.

하나를 켜고 나머지 하나를 키려고 하면 아래 에러가 뜨는데 두개 동시에 열고 싶으면 어떻게 해야하나요?error listen EADDRINUSE: address already in use :::8081.

강의에서 가끔씩 깃허브 참고하시라고 하시고 답변으로도 그렇게 말씀해주셔서 찾아보려고 노력했는데 깃허브 링크를 못찾겠더라구요😖 혹시 괜찮으시다면 공유 부탁드려도 될까요?

발생: FeedDetailScreen진도: Calendar 구현하기 도입내용: Rendered more hooks than during the previous render v Previous render Next render ------------------------------------------------------ 1. useContext useContext 2. useContext useContext 3. useContext useContext 4. useEffect useEffect 5. useState useState .... 29. undefined useEffect ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ in FeedDetailScreen (created by SceneView)useEffect의 위치에 따라 저런 에러가 발생하는데 왜 그런지 혹시 알 수 있을까요??const { id } = route.params; ... const { } = useHooks; //! useEffect <<<<< 에러 발생 x if (isError || isPending) return null; //! 아래로 에러 발생 //! useEffec <<<< 에러 발생 handler 1 handler 2 return (View) 

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요! 맥 m1 pro입니다. 리액트 네이티브 버전은 강사님과 같이 진행하고 있습니다. 아이폰은 문제 없이 진행되는 반면 안드로이드가 작동되지 않아 질문올립니다. 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 14sinfo Run CLI with --verbose flag for more details. 

API를 body형태로 필요할 떄 마다 상태값을 전달하는 방식으로 사용하고 있었습니다.쿼리클라이언트를 사용하여 params 형태로 전달하면 가지는 이점이 어떤 것이 있을지 궁금합니다.항상 감사드립니다.❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!

안녕하세요. 좋은 강의 감사드립니다.질문 1: RootStackParamList로 현업에서는 사용을 안하는지 궁금합니다.네비게이션을 각 기능별로 나누어 ParamList를 관리하면, 예상되는 이점은 네비게이션 시 필요한 리소스만 가지게 되는 이점이 있을 것 같은데요. 이렇게 생각하면 맞는지 궁금합니다.RootStackParamList로 화면의 타입을 관리하고 있었습니다.해당 부분의 리팩토링은 필수 적일까요? 항상 감사드립니다.   ❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!

안녕하세요, 강사님구글맵을 사용할때 AndroidManifest.xml, AppDelegate.mm 파일에 직접적으로 구글키를 넣어주는데 이렇게 된다면, 키값이 노출이 될 것 같은데, 이 파일은 git ignore을 해도 되는 파일인가요??

error: node_modules\react-native-reanimated\src\reanimated2\index.ts: Cannot find module 'babel-plugin-module-resolver'Require stack:- C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\@babel\core\lib\config\files\plugins.js- C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\@babel\core\lib\config\files\index.js- C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\@babel\core\lib\index.js- C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\metro-transform-worker\src\index.js- C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\metro\src\DeltaBundler\Worker.flow.js- C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\metro\src\DeltaBundler\Worker.js- C:\Users\gimse\Documents\dogfoot\dogfeet\front\node_modules\jest-worker\build\workers\processChild.jsMake sure that all the Babel plugins and presets you are using are defined as dependencies or devDependencies in your package.jsonfile. It's possible that the missing plugin is loaded by a presetyou are using that forgot to add the plugin to its dependencies: youcan workaround this problem by explicitly adding the missing packageto your top-level package.json.

실무에서 사용하기 위해 일부러 강의버전과 다르게 최신버전으로만 진행중입니다.그래서 많은 에러가 나고 있는데.. ios는 잘 열리는데 android만 안열려서 이것저것 해보다 방법을 찾아서 공유합니다. 우선 에러는 아래와 같았고 문제는 ndkVersion버전이었습니다. * What went wrong: A problem occurred configuring project ':react-native-reanimated'. > [CXX1101] NDK at /Users/name/Library/Android/sdk/ndk/26.1.10909125 did not have a source.properties file 제가 해결 한 방법은 아래와 같습니다.cf) 현재 ndkVersion과 호환되는 ndkVersion버전은 저랑 다를 수 있습니다. 저는 23.1.7779620버전으로 진행했는데 호환되는 버전으로 변경하신다음 진행하시면 됩니다.0.Android Studio에서 변경하고자 하는 NDK 버전 설치1.프로젝트 루트 디렉터리로 이동합니다2.local.properties 파일을 생성하거나 엽니다 vim local.properties3.local.properties 파일에 SDK 및 NDK 경로를 추가합니다sdk.dir=/Users/wini/Library/Android/sdkndk.dir=/Users/wini/Library/Android/sdk/ndk/23.1.77796204.파일을 저장하고 닫습니다. : Esc, :wq, Enter5.android/build.gradle파일에서 ndkVersion 버전을 변경합니다. ndkVersion = "23.1.7779620"6.잘못된 NDK 폴더 삭제rm -rf /Users/wini/Library/Android/sdk/ndk/26.1.109091257.Gradle 캐시 및 빌드 파일 정리cd android ## 안드로이드 파일에서 진행./gradlew clean8.Metro 번들러 재시작 및 Android 앱 실행cd .. ## front폴더에서 npx react-native start --reset-cachenpx react-native run-android 

캐시도 다 지워보고, 앱도 삭제해보고, 재설치도 해보고 해봤는데 원인을 모르겠네요...강사님 코드로 바꿔넣어도, 동일하게 아래와 같은 에러가 발생합니다.이유를 알고싶습니다..!!ERROR TypeError: Cannot read property 'PINK_700' of undefined This error is located at: in CustomButton (created by AuthHomeScreen) in RCTView (created by View) in View (created by AuthHomeScreen) in RCTSafeAreaView (created by AuthHomeScreen) in AuthHomeScreen (created by SceneView) in StaticContainer in EnsureSingleNavigator (created by SceneView) in SceneView (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View (created by CardContainer) in RCTView (created by View) in View in CardSheet (created by Card) in RCTView (created by View) in View (created by Animated(View)) in Animated(View) (created by PanGestureHandler) in PanGestureHandler (created by PanGestureHandler) in PanGestureHandler (created by Card) in RCTView (created by View) in View (created by Animated(View)) in Animated(View) (created by Card) in RCTView (created by View) in View (created by Card) in Card (created by CardContainer) in CardContainer (created by CardStack) in RNSScreen (created by Animated(Anonymous)) in Animated(Anonymous) (created by InnerScreen) in Suspender (created by Freeze) in Suspense (created by Freeze) in Freeze (created by DelayedFreeze) in DelayedFreeze (created by InnerScreen) in InnerScreen (created by Screen) in Screen (created by MaybeScreen) in MaybeScreen (created by CardStack) in RNSScreenContainer (created by ScreenContainer) in ScreenContainer (created by MaybeScreenContainer) in MaybeScreenContainer (created by CardStack) in RCTView (created by View) in View (created by Background) in Background (created by CardStack) in CardStack (created by HeaderShownContext) in RNCSafeAreaProvider (created by SafeAreaProvider) in SafeAreaProvider (created by SafeAreaProviderCompat) in SafeAreaProviderCompat (created by StackView) in RCTView (created by View) in View (created by GestureHandlerRootView) in GestureHandlerRootView (created by StackView) in StackView (created by StackNavigator) in PreventRemoveProvider (created by NavigationContent) in NavigationContent in Unknown (created by StackNavigator) in StackNavigator (created by AuthStackNavigator) in AuthStackNavigator (created by RootNavigator) in RootNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in _QueryClientProvider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MatzipApp(RootComponent), js engine: hermes ERROR TypeError: Cannot read property 'WHITE' of undefined This error is located at: in RetryErrorBoundary (created by RootNavigator) in RootNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in _QueryClientProvider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MatzipApp(RootComponent), js engine: hermes ERROR TypeError: Cannot read property 'WHITE' of undefined This error is located at: in RetryErrorBoundary (created by RootNavigator) in RootNavigator (created by App) in EnsureSingleNavigator in BaseNavigationContainer in ThemeProvider in NavigationContainerInner (created by App) in _QueryClientProvider (created by App) in App in RCTView (created by View) in View (created by AppContainer) in RCTView (created by View) in View (created by AppContainer) in AppContainer in MatzipApp(RootComponent), js engine: hermes

강의를 보다가 해당 useEffect 의존성 배열 부분에 빈 배열을 넣어야 한다고 생각해서 넣었었는데 이러면 등록 버튼 눌렀을 때 에러가 뜹니다.그러다가 어쩔 때는 등록이 되기도 하네요 왜 이럴까요? 혹시 오타나 제가 잘못 작성한 부분이 있는걸까요?등록 눌러도 응답이 없길래 onError이용해서 찍어보니위 사진과 같이 계속 400 에러가 뜨고 있었어요 그래서 의존성 부분에 빈배열 빼고 강의에서 작성해주신 것처럼 아무것도 안넣었더니 정상적으로 작동했습니다!저와 비슷한 생각으로 의존성 관련 질문 주신분 있어서 답변 보니 빈배열 넣어야 한다고 하셨는데 전 왜 에러가 뜰까요? 스스로 해결해 보려다가 아직 부족한게 많아서 글 작성해봅니다! 코드도 같이 첨부합니당https://github.com/HYEJUNGYANG/Matzip

강사님은 const {} = getProfileQuery.data || {};에서왼쪽 {} 안에 email, nickname 등 변수명 입력할 때마다 Profile.nickname 이런식으로 타입 바로바로 인식하는 것 같은데 전 인식을 못하는 것 같아요. 제가 코드를 잘못 작성한 부분이 있을까요?빨간줄 그어져 있어서 확인해보면 이렇게 뜨네요getProfileQuery.data를 콘솔에 찍으면위에 사진처럼 잘 나옵니다. 도와주시면 감사하겠습니다!! 

안녕하세요 강사님 강의 정말 잘 듣고있습니다. 안드로이드에선 잘되는데 IOS에선 아이콘이 잘뜨지 않아서요처음 부터 다시 해보기도하고 캐시도 삭제하고 실행해도 제대로 아이콘이 나오질 않네요x-code에서 다시 빌드할때 에러는아니고 워닝이 690개로 너무 많이 뜨는데 그거랑도 상관이 있을까요? 이유를 몰라서 해보다가 질문남깁니다.

안녕하세요. Kyo 강사님최근 강의를 듣고 이것 저것 기능 추가하고 있습니다.#1 엑세스 토큰이 만료 된후에 재인증을 받아야 하는데요.1시간 지나면 인증이 풀리고 로그 아웃하고 다시 받아야 하네요..찾아보니 인터셉터라는 기능을 써서 401이냐 419 코드에 따라 처리 해야 하는 것 같은데요.401 일때는 리프래쉬 토큰이 있으면 자동으로 재인증 받고 처리419 코드 일 경우 메인 스크린으로 리다이렉트 되어야 할 것 같은데요.잘 안되네요.. 핵심 코드만 보고 적용 하기에는 아직 무리가 있습니다. #2. 구글 메세지 push 기능도 추가하고 있는데요.. FCM서버에서 메세지 전송 / 앱에서 받기 가르침 부탁드립니다. 혹시 참고 강의가 있을까요? 감사합니다.

안드로이드에서는 초기화 문제 없는데 ios에서만 그러네요..ㅠ일단 오류 확인에 있어 필요하다는 코드 위주로 올렸는데 더 필요한 코드가 있다면 알려주세요! SignupScreen.tsximport {SafeAreaView, StyleSheet, Text, TextInput, View} from 'react-native'; import React, {useRef} from 'react'; import InputField from '../../components/InputField'; import useForm from '../../hooks/useForm'; import CustomButton from '../../components/CustomButton'; import {validateSignup} from '../../utils'; function SignupScreen() { const passwordRef = useRef<TextInput | null>(null); const passwordConfirmRef = useRef<TextInput | null>(null); const signup = useForm({ initialValue: {email: '', password: '', passwordConfirm: ''}, validate: validateSignup, }); const handleSubmit = () => { console.log(signup.values); }; return ( <SafeAreaView style={styles.container}> <View style={styles.inputContainer}> <InputField autoFocus placeholder="이메일" error={signup.errors.email} touched={signup.touched.email} inputMode="email" returnKeyType="next" // return키가 아닌 다른 키 옵션을 주고 싶을때 blurOnSubmit={false} // next와 같은 키를 눌러도 키가 닫히지 않음 (false) onSubmitEditing={() => passwordRef.current?.focus()} // next키를 눌렀을 때 다음 input으로 이동 {...signup.getTextInputProps('email')} /> <InputField key="password" ref={passwordRef} placeholder="비밀번호" textContentType="oneTimeCode" // ios에서 강력한 암호 뜨게 하는걸 방지 error={signup.errors.password} touched={signup.touched.password} secureTextEntry returnKeyType="next" blurOnSubmit={false} onSubmitEditing={() => passwordConfirmRef.current?.focus()} {...signup.getTextInputProps('password')} /> <InputField key="passwordConfirm" ref={passwordConfirmRef} placeholder="비밀번호 확인" textContentType="oneTimeCode" error={signup.errors.passwordConfirm} touched={signup.touched.passwordConfirm} secureTextEntry onSubmitEditing={handleSubmit} {...signup.getTextInputProps('passwordConfirm')} /> </View> <CustomButton label="회원가입" /> </SafeAreaView> ); } export default SignupScreen; const styles = StyleSheet.create({ container: { flex: 1, margin: 30, }, inputContainer: { gap: 20, marginBottom: 30, }, }); useForm.ts// 리액트 hook form 같은 리액트 라이브러리를 사용해도 괜찮지만 // 복잡하고 많은 input을 다루지 않기 때문에 직접 구현함 import {useEffect, useState} from 'react'; interface UseFormProps<T> { initialValue: T; validate: (values: T) => Record<keyof T, string>; } function useForm<T>({initialValue, validate}: UseFormProps<T>) { const [values, setValues] = useState(initialValue); const [touched, setTouched] = useState<Record<string, boolean>>({}); const [errors, setErrors] = useState<Record<string, string>>({}); const handleChangeText = (name: keyof T, text: string) => { setValues({ ...values, [name]: text, }); }; const handleBlur = (name: keyof T) => { setTouched({ ...touched, [name]: true, }); }; const getTextInputProps = (name: keyof T) => { const value = values[name]; const onChangeText = (text: string) => handleChangeText(name, text); const onBlur = () => handleBlur(name); return {value, onChangeText, onBlur}; }; useEffect(() => { const newErrors = validate(values); setErrors(newErrors); }, [validate, values]); useEffect(() => { console.log('values값 뭐뭐 들어왔는지 체크용: ', values); }, [values]); return {values, errors, touched, getTextInputProps}; } export default useForm; validate.tstype UserInformation = { email: string; password: string; }; function validateUser(values: UserInformation) { const errors = { email: '', password: '', }; // email이 올바른 이메일인지 검사하는 정규표현식 // 이 테스트를 통과하지 못할경우 if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(values.email)) { errors.email = '올바른 이메일 형식이 아닙니다.'; } if (!(values.password.length >= 8 && values.password.length < 20)) { errors.password = '비밀번호는 8~20자 사이로 입력해주세요.'; } return errors; } function validateLogin(values: UserInformation) { return validateUser(values); } function validateSignup(values: UserInformation & {passwordConfirm: string}) { const errors = validateUser(values); const signupErrors = {...errors, passwordConfirm: ''}; if (values.password !== values.passwordConfirm) { signupErrors.passwordConfirm = '비밀번호가 일치하지 않습니다.'; } return signupErrors; } export {validateLogin, validateSignup}; InputField.tsximport { Dimensions, Pressable, StyleSheet, Text, TextInput, TextInputProps, View, } from 'react-native'; import React, {ForwardedRef, forwardRef, useRef} from 'react'; import {colors} from '../constants'; import {mergeRefs} from '../utils'; interface InputFieldProps extends TextInputProps { disabled?: boolean; error?: string; touched?: boolean; } // 디바이스의 높이 가져옴 const deviceHeight = Dimensions.get('screen').height; const InputField = forwardRef( ( {disabled = false, error, touched, ...props}: InputFieldProps, ref?: ForwardedRef<TextInput>, ) => { const inputRef = useRef<TextInput | null>(null); // input부분이 아닌 error msg(View컴포넌트) 부분을 클릭해도 input에 포커스를 해주기 위함 (Pressable 컴포넌트로 먼저 감싸주고나서!) const handlePressInput = () => { inputRef.current?.focus(); }; return ( <Pressable onPress={handlePressInput}> <View style={[ styles.container, disabled && styles.disabled, touched && Boolean(error) && styles.inputError, ]}> <TextInput ref={ref ? mergeRefs(inputRef, ref) : inputRef} // false일 때는 편집 가능 editable={!disabled} placeholderTextColor={colors.GRAY_500} style={[styles.input, disabled && styles.disabled]} {...props} autoCapitalize="none" // 자동 대문자 방지 spellCheck={false} autoCorrect={false} /> {/* error 메세지가 있을 때만 해당 컴포넌트 표시하기 위해 string 타입을 Boolean으로 변경 */} {touched && Boolean(error) && ( <Text style={styles.error}>{error}</Text> )} </View> </Pressable> ); }, ); export default InputField; const styles = StyleSheet.create({ container: { borderWidth: 1, borderColor: colors.GRAY_200, padding: deviceHeight > 700 ? 15 : 10, }, input: { fontSize: 16, color: colors.BLACK, padding: 0, }, disabled: { backgroundColor: colors.GRAY_200, color: colors.GRAY_700, }, inputError: { borderWidth: 1, borderColor: colors.RED_300, }, error: { color: colors.RED_500, fontSize: 12, paddingTop: 5, }, }); common.tsimport {ForwardedRef} from 'react'; // input component를 만들어서 사용할 때 해당 컴포넌트에서 사용하는 ref와 외부에서 주입하는 ref를 둘 다 사용 가능하게 함 function mergeRefs<T>(...refs: ForwardedRef<T>[]) { return (node: T) => { refs.forEach(ref => { if (typeof ref === 'function') { ref(node); } else if (ref) { ref.current = node; } }); }; } export {mergeRefs};  찾아보기도 하고 챗gpt에도 물어보고 해봤지만 도저히 모르겠어서 질문 남겨봅니다! 일단 회원가입 스크린 관련해서만 올리긴 했는데 로그인 화면에서도 마찬가지로 비밀번호 부분만 그런 현상이 발생하네요..ㅠ혹시나 해서 비밀번호 input 속성으로 secureTextEntry 전달하는거 없애보니까 이런 문제가 없긴한데 그렇다고 이걸 전달 안할 수도 없고..어찌해야 할까요?? 아니면 이건 코드가 아닌 ios 자체 문제일까요??