❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!질문이 있습니다 강사님 오류는 아니고 궁금한점이있어서 문의드립니다보통 다른 네비게이터의 자식 페이지로 이동할때StackNavigator 1- Screen A- Screen BStackNavigator 2- Screen C- Screen Dnavigation.navigate('StackNavigator2', {screen: 'Screen C'}); 이렇게 이동한다고 하지만, 이게 엄청 복잡하거나 screen 안에 param 안에 screen 즉 아래와 같은 경우에는 어떻게 작업해야할까요?navigation.navigate(MAIN_NAVIGATIONS.MAP, { screen: MAP_NAVIGATIONS.LOCATION_FEED_TAB, params: { screen: LOCATION_TAB_NAVIGATIONS.LOCATION_FEED_HOME, params: { screen: LOCATION_NAVIGATIONS.LOCATION_DETAIL, params: {id}, }, }, }); [ex) 상세 페이지(detail)를 list를 통해 이동했을 경우와 calendar 에서 바로 상세페이지로 이동했을 경우 goBack()의 히스토리가 잘못되어 calendar에서 바로 상세페이지(detail)로 이동하였을경우 goBack() 올바르게 작동하지 않는 경우]3가지 방안으로 생각하였지만..(1) goBack()을 사용하지 않고 어떤 경로로 접속하였든 List로 이동시키는 방법(2) 아니면 흐름을 위하여 동일한 screen을 다른 navigation 에 각각 등록하여 따로 흐름(?)을 관리screen을 다른 navigation 에 각각 사용하는 경우도있나요?(3) 전역상태 push 관련 history를 직접 관리하여 작업해야하는 지어떤게 맞는 방법인지 혹시 다른 방법이 있는지 궁금하여 문의드립니다.

최근 Expo SDK 51이 릴리즈 되면서 React Native 공식 문서에서도 Expo를 권장하도록 수정되었던데, Bare CLI를 계속 사용해야 할까요? 개발 경험 또한 Bare CLI보다 Expo를 사용했을 때 훨씬 빠르고 편했고 빌드하면 Native Module도 사용할 수 있으니 그리 큰 차이도 없는 것 같아서요. 선생님의 생각이 궁금합니다.

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요! 환경 : 맥, 안드로이드에뮬 : Pixel 3a API 34 | Android 14.0버전 : react-native 0.72.6 node 22.2 gradle 8.0.1 openjdk version "17.0.11"강의[4-0] GoogleMap 연동하기에서 ios는 정상적으로 구글맵이 적용되었습니다. 그런데 android는 빌드할 때 아래와같은 오류가 나왔습니다.Task :react-native-maps:compileDebugJavaWithJavac FAILED시도해본것android 폴더에서 ./gradlew clean 빌드node_modules 폴더 삭제 후 yarn install 빌드 https://github.com/react-native-maps/react-native-maps/issues/5095참고해서 react-native-maps, 1.14.0 다운그레이드다운그레이드 후task ':react-native-reanimated:buildCMakeDebug[arm64-v8a]위 에러 발생시 react-native-reanimated 를 2.2.0으로 다운그레이드 후 시도하라는 글을 보고 다시 해보았지만 Task :app:checkDebugAarMetadata FAILED와 같은 에러가 나왔습니다. Task :app:checkDebugAarMetadata FAILED 관련 에러와 react-natvie-maps 에러 관련된 다른 대처들도 해보았지만 잘 감이 잡히질 않아서 글남깁니다 ㅠㅠ

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요! 윈도우 / 안드로이드yarn add @react-navigation/draweryarn add react-native-gesture-handler react-native-reanimatedbabel.configplugins: ['react-native-reanimated/plugin']npm start --reset-cache에러 발생 "dependencies": { "@react-native-masked-view/masked-view": "^0.3.1", "@react-navigation/drawer": "^6.6.15", "@react-navigation/native": "^6.1.17", "@react-navigation/stack": "^6.3.29", "react": "18.2.0", "react-native": "0.72.6", "react-native-gesture-handler": "^2.17.1", "react-native-reanimated": "^3.12.1", "react-native-safe-area-context": "^4.10.5", "react-native-screens": "^3.32.0" },> Task :react-native-reanimated:compileDebugJavaWithJavac FAILED > Task :app:processDebugResources FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':react-native-reanimated:compileDebugJavaWithJavac'.현재 reanimated 라이브러리를 설치하면 3.12.1 버전이 설치됩니다.시도해 본 것교안 버전과 같은 reanimated 3.5.4 버전 설치reanimated 3.13 버전 설치추가로 rn 버전부터 모든 라이브러리 버전을 강의와 같은 버전으로 했는데도 지난번 질문과 같은 gesture handler 등 왜 오류가 발생하는지 궁금합니다.

이걸 해결하기 위해선 ios/podfile에서 플리퍼 관련 코드를 없애야됩니다. podfile 통째로 복사해서 지피티에게 준 다음에 'flipper 안 사용하게 코드 수정해줘.' 라고 해서 깔끔하게 제거된 podfile 코드를 받아 pod install해서 해결은 했습니다.. 다른 분들은 어떻게 해결하시는지 궁금하네요.

강의 들으면서 앱 디자인도 만져보고 파이어베이스도 연동해보고 하고 있는데 갑자기 사진과 같이 오류가 뜨는데 파이어 베이스 초기화 오류라고 하더라구요 ㅠㅠ 혹시 뭐가 문제인지 알려주실 수 있으실까요 ㅠㅠ 입니다..ㅠㅠ 파일이 커서 압축으로 node_modules 지우고 올려놨습니다..!

❗질문 작성시 꼭 참고해주세요최대한 상세히 현재 문제(또는 에러)와 코드(또는 github)를 첨부해주셔야 그만큼 자세히 답변드릴 수 있습니다.맥/윈도우, 안드로이드/iOS, 버전 등의 개발환경도 함께 적어주시면 도움이 됩니다. 에러메세지는 일부분이 아닌 전체 상황을 올려주세요!환경 : 윈도우, 안드로이드에뮬 : Pixel 5 API 33 + Android13.0버전 : jdk11, react-native 0.72.6, node 20, gradle 8.0.1{ "name": "Matzip", "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.0", "@react-navigation/native": "^6.1.9", "@react-navigation/stack": "^6.3.20", "react": "18.2.0", "react-native": "0.72.6", "react-native-gesture-handler": "^2.13.4", "react-native-safe-area-context": "^4.7.4", "react-native-screens": "^3.27.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 navigation 사용을 위해 라이브러리를 하나씩 추가하는 도중에 에러가 발생했습니다. yarn add @react-navigation/nativeyarn add react-native-screens react-native-safe-area-context@Overrideprotected void onCreate(Bundle savedInstanceState) {super.onCreate(null);}import android.os.Bundle;yarn add @react-navigation/stackyarn add react-native-gesture-handlerimport 'react-native-gesture-handler';위 단계까지 하면 아래와 같이 에러가 발생합니다.info Reloading app... BUNDLE ./index.js error: Error: ENOENT: no such file or directory, lstat 'C:\Users\uersname\Desktop\Matzip\frontend\node_modules\prop-types\node_modules\react-is' at Object.realpathSync (node:fs:2707:29) at DependencyGraph.getSha1 (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\node-haste\DependencyGraph.js:214:12) at Transformer._getSha1 (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\Bundler. js:26:26) at Transformer.transformFile (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\Transformer.js:106:19) at Bundler.transformFile (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\Bundler. js:60:30) at async Object.transform (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\lib\transformHelpers.js:143:12) at async Graph._processModule (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\Graph.js:257:20) at async Graph._traverseDependenciesForSingleFile (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\Graph.js:249:5) at async Graph.traverseDependencies (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\Graph.js:157:9) at async DeltaCalculator._getChangedDependencies (C:\Users\uersname\Desktop\Matzip\frontend\node_modules\metro\src\DeltaBundler\DeltaCalculator.js:281:42) 시도해 본 것android 폴더에서 ./gradlew cleanreact-native doctorreact-native-gesture-handler 다운그레이드node_modules 폴더 삭제 후 yarn install or npm install강의 소스 코드와 버전 일치하도록 package.json 수정 후 yarn install react native 프로젝트 새로 생성 후라이브러리 yarn 명령어로 설치하지 않고 강의 소스 package.json로 교체 후 yarn install 시 아래와 같이 오류 발생info Opening the app on Android... info JS server already running. 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 FAILURE: Build failed with an exception. * Where: Build file 'C:\Users\username\Desktop\Matzip2\node_modules\react-native-gesture-handler\android\build.gradle' line: 310 * What went wrong: Execution failed for task ':tasks'. > Could not create task ':react-native-gesture-handler:checkIntegrityBetweenArchitectures'. > java.lang.reflect.UndeclaredThrowableException (no error message) * 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 6s npm uninstall react-native-gesture-handler 해당 라이브러리 삭제 후index.js import 'react-native-gesture-handler' 주석 처리 하면 정상적으로 빌드 되고 에뮬에서 확인 가능합니다. 어떻게 하면 react-native-gesture-handler 라이브러리를 사용할 수 있을까요?

처음 세팅중인데 읽기전용이라 떠서 커뮤니티에 뜨는대로 따라했는데 올려두신 사진과 같은 내용이 뜨질않아서 어떻게 세틍을 해야하나 질문드려봅니다..

영상에는 npx create-expo-app tinder-clone 이후에 expo start를 하죠? 그런다음 코드를 켜보면 이렇게 생성되면서 js가아닌 tsx즉, 타입 스크립트 형태로 생성되는데 어떻게 해야 하죠?

안녕하세요. 지난번 질문 드렸던 것은 해결이 되었는데요. (인터셉터 / DB 마이그 postgres -> mssql / fcm push ) 구성은 강의 파일 기반으로 추가 및 수정 하고 있습니다.nest js 서버( + fcm 송신 서버) -> android(fcm 알림 수신) android fcm 수신 후 백그라운드 데이터 가공 (서버/로컬 data 처리 ) -> 가공 데이터로 push 생성 데이터 가공 (hooks) 하기 위해 (FetchData.ts) 파일을 import 하였습니다. (ok)import useFetchData from '@/hooks/useFetchData'; 발생한 push 알림 메세지를 클릭시 특정 화면으로 이동하고 싶은데요. ex) FeedList.tsx // FeedHomeScreen.tsx 쪽으로 이동하고 싶은데요.. 잘 안되고 있습니다. (이벤트 발생 위치는 알지만 처리를 못하고 있습니다.)  App내에서 hooks을 사용해서 그런지 App 내에서 useNavigation() 을 사용해서 처리 하려고 했더니navigation.navigate('RootNavigator'); MainDrawerNavigator / FeedList / FeedHomeScreen 등등 해봤는데 시작 전에 에러나 가더라고요.렌더링 에러가 납니다. import React, { useEffect } from 'react'; import { StatusBar, Platform } from 'react-native'; import { NavigationContainer, useNavigation } from '@react-navigation/native'; import { QueryClientProvider } from '@tanstack/react-query'; import Toast, { BaseToast, BaseToastProps, ErrorToast } from 'react-native-toast-message'; import MainDrawerNavigator from './src/navigations/drawer/MainDrawerNavigator'; import AuthStackNavigator from './src/navigations/stack/AuthStackNavigator'; import useAuth from '@/hooks/queries/useAuth'; import RootNavigator from './src/navigations/root/RootNavigator'; import queryClient from './src/api/queryClient'; import { colors } from '@/constants'; import useThemeStorage from '@/hooks/useThemeStorage'; // push 추가 import messaging from '@react-native-firebase/messaging'; import PushNotification from 'react-native-push-notification'; import PushNotificationIOS from '@react-native-community/push-notification-ios'; import { getEncryptStorage, setEncryptStorage } from '@/utils/encryptStorage'; import useFetchData from '@/hooks/useFetchData';const App = () => { const navigation = useNavigation(); // 화면 이동용 const { theme } = useThemeStorage(); const { fetchData } = useFetchData(); // 데이터 가공 usePushNotifications(fetchData, navigation); // FCM수신 -> 가공data 전달 useTokenRegistration(); // 토큰 저장 return ( <QueryClientProvider client={queryClient}> <NavigationContainer> <StatusBar barStyle={theme === 'light' ? 'dark-content' : 'light-content'} backgroundColor={theme === 'light' ? colors['light'].WHITE : colors['light'].BLACK} /> <RootNavigator /> <Toast config={toastConfig} /> </NavigationContainer> </QueryClientProvider> ); };어떻게 접근 해야 할지 잘 모르겠습니다. 베이스가 부족해서 그런지 네이게이터와 스크린 (단순 이동 뿐이 못하겠습니다. ㅎㅎ)주말 잘 보내세요 감사합니다. 

섹션 2HTML & CSS 기본그랩마켓 웹 화면 구현하기 코드 복사할 수 있을까요?컴퓨터를 새로 샀는데 굳이 다시 구현 할 필요가 없어서 그렇습니다.

5-3강 16분정도에서 react-native-community/slide을 설치후 pod install을 하고 다시 빌드를 하면 아이콘이 깨졌던 이유가 뭔지 궁금합니다.또한 xcode에서 copy bundle resourcse에서 icon들 추가해주면 아이콘이 다시 나오게 되는 것도 설명해주시면 감사하겠습니당:)

스플래시 스크린에 쓰이는 각종 아이콘과 앱 아이콘등 어떤 파일에 있는지 도통 못찾겠네요ㅠㅠ 

사용자가 바라보고 있는, 즉 기기가 바라보고 있는 각도를 실시간으로 반영해주고 싶은데Swing 앱을 보면 그렇게 구현되어 있거든요, 그런데 제가 구현할 때는 (mapRef.current as NaverMapView).setLocationTrackingMode( TrackingMode.Follow );위와 같이 구현하게 되면 반쪽짜리 해결입니다. 사용자가 바라보고 있는 각도에 따라 실시간으로 반영이 되지만, TrackingMode이기에 지도를 스와이프해서 이동하게 되면 사용자 위치에 해당하는 마커에서 각도를 알려주지 않게 됩니다.TrackingMode를 사용하지 않고 이를 해결할 수 있는 방법이 있을까요? 아래는 NaverMap 코드입니다. 앗 참고로 expo환경입니다.import React, { useEffect, useRef, useState } from 'react'; import NaverMapView, { TrackingMode } from 'react-native-nmap'; import NaverMapView from 'react-native-nmap'; import useMyLocation from '@/hooks/use-my-location'; import type { TCoordinate } from '@/types/react-native-nmap'; interface INaverMapViewProps { zoom: number; children?: React.ReactNode; center: TCoordinate; onCameraChange: (e: { latitude: number; longitude: number; zoom: number; }) => void; } export default function NaverMaps({ children, center, zoom, onCameraChange, }: INaverMapViewProps) { const { currentLocation, currentHeading } = useMyLocation(); const mapRef = useRef<NaverMapView>(null); const [userInteraction, setUserInteraction] = useState<boolean>(false); useEffect(() => { if (!userInteraction && currentLocation) { const updatedCenter = { ...center, latitude: currentLocation.latitude, longitude: currentLocation.longitude, zoom: zoom, tilt: 0, bearing: currentHeading, }; (mapRef.current as NaverMapView).animateToCoordinate(updatedCenter); } }, [currentLocation, currentHeading, userInteraction, zoom, center]); const handleCameraChange = (e: { latitude: number; longitude: number; zoom: number; }) => { setUserInteraction(true); // 사용자가 상호작용했음을 나타냅니다. onCameraChange(e); }; const handleMapClick = () => { setUserInteraction(true); // 사용자가 수동으로 상호작용했으므로 자동으로 중심 이동을 하지 않습니다. }; return ( <NaverMapView ref={mapRef} style={{ width: '100%', height: '100%' }} center={center} bearing={currentHeading} minZoomLevel={13} maxZoomLevel={18} onCameraChange={handleCameraChange} zoomControl={false} scaleBar={false} rotateGesturesEnabled={true} onMapClick={handleMapClick} compass={false} stopGesturesEnabled={true} mapType={0} > {children} </NaverMapView> ); }

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

안녕하세요.[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 에 저장해서 사용)만약 그렇다면 이렇게 했을때 보안적으로 큰 문제가 없기 때문에 이렇게 사용하는 것일까요? 감사합니다.

Bundle Identifier를 강의에서 당신이 만든 폴더구조와 동일하게 해주면 됩니다.이게 원래 ${YOUR_BUNDLE_ID}로 되어있어서 템플릿 리터럴로 내 고유값이 잘 들어갈 줄 알았는데 아니더라구요.그냥 폴더구조 바꿨던대로 입력해주면 됩니다.

[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까지 진행하였습니다.