배달앱 클론코딩 [with React Native] 대시보드

안녕하세요 제로초님.앱을 개발하고 배포까지 하였습니다.앱스토어에서 '한국어 및 영어'로 표시하고 싶은데 지금은 '한국어'만 표시되네요.언어정보에 어떻게 여러 언어를 표시할 수 있나요?예시는 배달의 민족이고 Xcode 에서는 다음과 같이 설정하였습니다. 

혹시 안드로이드 한글추가했는데 한글안되는 이유가있을까요 ? 원래는됬는데 지금은 안되네용?

안녕하세요.ios에서 첫 앱 배포시에Version: 1.0.0Build: 1출시 성공 후 코드 푸시 target 1.0 으로 업데이트 하면 문제 없이 잘 되었습니다.부제목을 수정할 이유가 생겨서 Version: 1.0.4Build: 2위와 같이 xcode 설정 후 새 버전 심사를 통과한 후제 생각에는 1.0.4니까 코드 푸시 타겟을 1.0으로 하면처음 출시했던 버전 사용자랑 두 번째로 출시 했던 버전 사용자랑 같이 업데이트할 수 있겠다 싶었는데Version: 1.0.4Build: 2 얘는 target 1.0이 업데이트 반영이 안됩니다.그리고 앱스토어에서 다시 다운받아보면 이전 코드 푸시내용만 받아집니다.조언 부탁드립니다감사합니다.

노트북은 안드로이드를 사용하고 있고, 휴대폰은 ios를 사용하는데 실제 기기 연결 호환이 가능한가요??

> Task :app:processDebugMainManifest FAILED package="com.zzz.fooddeliveryapp" found in source AndroidManifest.xml: C:\Users\user\fooddeliveryapp\front\android\app\src\main\AndroidManifest.xml. Setting the namespace via a source AndroidManifest.xml's package attribute is deprecated. Please instead set the namespace (or testNamespace) in the module's build.gradle file, as described here: https://developer.android.com/studio/build/configure-app-module#set-namespace This migration can be done automatically using the AGP Upgrade Assistant, please refer to https://developer.android.com/studio/build/agp-upgrade-assistant for more information. error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 C:\Users\user\fooddeliveryapp\front\android\app\src\debug\AndroidManifest.xml:30:9-36:20 Error: android:exported needs to be explicitly specified for element <receiver#com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver>. Apps targeting Android 12 and higher are required to specify an explicit value for `android:exported` when the corresponding component has an intent filter defined. See https://developer.android.com/guide/topics/manifest/activity-element#exported for details. * What went wrong: Execution failed for task ':app:processDebugMainManifest'. > Manifest merger failed : android:exported needs to be explicitly specified for element <receiver#com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver>. Apps targeting Android 12 and higher are required to specify an explicit value for `android:exported` when the corresponding component has an intent filter defined. See https://developer.android.com/guide/topics/manifest/activity-element#exported for details. 똑같이 코드를 붙여주었는데 어디서 잘못된건지 빌드 에러가 납니다...Task :app:processDebugMainManifest FAILED여기서 에러가 나서 AndroidManifest.xml 코드를 아무리 보아도 찾을 수가 없네요어디서 잘못 작성한 걸까요??<manifest xmlns:android="http://schemas.android.com/apk/res/android" package="com.zzz.fooddeliveryapp"> <uses-permission android:name="android.permission.INTERNET" /> <uses-permission android:name="android.permission.CAMERA"/> <uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION" /> <uses-permission android:name="android.permission.VIBRATE"/> <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/> <application android:usesCleartextTraffic="true" android:name=".MainApplication" android:label="@string/app_name" android:icon="@mipmap/ic_launcher" android:allowBackup="false" android:theme="@style/AppTheme"> <meta-data android:name="com.naver.maps.map.CLIENT_ID" android:value="9rrwk2d5lj" /> <meta-data android:name="com.dieam.reactnativepushnotification.notification_foreground" android:value="true"/> <meta-data android:name="com.dieam.reactnativepushnotification.notification_color" android:resource="@color/white"/> <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationActions" /> <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationPublisher" /> <receiver android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationBootEventReceiver"> <intent-filter> <action android:name="android.intent.action.BOOT_COMPLETED" /> <action android:name="android.intent.action.QUICKBOOT_POWERON" /> <action android:name="com.htc.intent.action.QUICKBOOT_POWERON"/> </intent-filter> </receiver> <service android:name="com.dieam.reactnativepushnotification.modules.RNPushNotificationListenerService" android:exported="false" > <intent-filter> <action android:name="com.google.firebase.MESSAGING_EVENT" /> </intent-filter> </service> <activity android:name=".MainActivity" android:label="@string/app_name" android:configChanges="keyboard|keyboardHidden|orientation|screenSize|uiMode" android:launchMode="singleTask" android:windowSoftInputMode="adjustResize" android:exported="true"> <intent-filter> <action android:name="android.intent.action.MAIN" /> <category android:name="android.intent.category.LAUNCHER" /> </intent-filter> </activity> </application> <queries> <package android:name="com.skt.tmap.ku" /> </queries> </manifest>

const token = await EncryptedStorage.getItem('refreshToken'); if (!token) { SplashScreen.hide(); // here return; } ... } finally { SplashScreen.hide(); // here } }; getTokenAndRefresh(); }, [dispatch]);강의 따라서 SplashScreen.hide() 잘 해주었는데,이 상태에서 멈추고 갑자기 back 서버 터미널이 무한 로딩되는데... back 서버를 껐다가 다시 켰는데 로그인이 되어있으면 안되는데 되어있는 상황입니다import * as React from 'react'; import {useEffect} from 'react'; import {useSelector} from 'react-redux'; import {NavigationContainer} from '@react-navigation/native'; import {createNativeStackNavigator} from '@react-navigation/native-stack'; import {createBottomTabNavigator} from '@react-navigation/bottom-tabs'; import Settings from './src/pages/Settings'; import Orders from './src/pages/Orders'; import Delivery from './src/pages/Delivery'; import SignIn from './src/pages/SignIn'; import SignUp from './src/pages/SignUp'; import {RootState} from './src/store/reducer'; import useSocket from './src/hooks/useSocket'; import EncryptedStorage from 'react-native-encrypted-storage'; import axios, {Axios, AxiosError} from 'axios'; import Config from 'react-native-config'; import userSlice from './src/slices/user'; import {useAppDispatch} from './src/store'; import {Alert} from 'react-native'; import orderSlice from './src/slices/order'; import usePermissions from './src/hooks/usePermissions'; import SplashScreen from 'react-native-splash-screen'; import FontAwesome5 from 'react-native-vector-icons/FontAwesome5'; import FontAwesome from 'react-native-vector-icons/FontAwesome'; export type LoggedInParamList = { Orders: undefined; Settings: undefined; Delivery: undefined; Complete: {orderId: string}; }; export type RootStackParamList = { SignIn: undefined; SignUp: undefined; }; const Tab = createBottomTabNavigator(); const Stack = createNativeStackNavigator<RootStackParamList>(); function AppInner() { const dispatch = useAppDispatch(); const isLoggedIn = useSelector((state: RootState) => !!state.user.email); const [socket, disconnect] = useSocket(); usePermissions(); useEffect(() => { axios.interceptors.response.use( response => { // console.log(response); return response; }, async error => { const { config, response: {status}, } = error; if (status === 419) { if (error.response.data.code === 'expired') { const originalRequest = config; const refreshToken = await EncryptedStorage.getItem('refreshToken'); // token refresh 요청 const {data} = await axios.post( `${Config.API_URL}/refreshToken`, // token refresh api {}, {headers: {authorization: `Bearer ${refreshToken}`}}, ); // 새로운 토큰 저장 dispatch(userSlice.actions.setAccessToken(data.data.accessToken)); originalRequest.headers.authorization = `Bearer ${data.data.accessToken}`; // 419로 요청 실패했던 요청 새로운 토큰으로 재요청 return axios(originalRequest); } } return Promise.reject(error); }, ); }, [dispatch]); useEffect(() => { const callback = (data: any) => { console.log(data); dispatch(orderSlice.actions.addOrder(data)); }; if (socket && isLoggedIn) { socket.emit('acceptOrder', 'hello'); socket.on('order', callback); } return () => { if (socket) { socket.off('order', callback); } }; }, [dispatch, isLoggedIn, socket]); useEffect(() => { if (!isLoggedIn) { console.log('!isLoggedIn', !isLoggedIn); disconnect(); } }, [isLoggedIn, disconnect]); // 앱 실행 시, 토큰 있으면 로그인하는 코드 useEffect(() => { const getTokenAndRefresh = async () => { try { const token = await EncryptedStorage.getItem('refreshToken'); if (!token) { SplashScreen.hide(); return; } const response = await axios.post( `${Config.API_URL}/refreshToken`, {}, { headers: { authorization: `Bearer ${token}`, }, }, ); dispatch( userSlice.actions.setUser({ name: response.data.data.name, email: response.data.data.email, accessToken: response.data.data.accessToken, }), ); } catch (error) { console.error(error); if (((error as AxiosError).response?.data as any).code === 'expired') { Alert.alert('알림', '다시 로그인 해주세요.'); } } finally { // TODO: 스플래시 스크린 없애기 SplashScreen.hide(); } }; getTokenAndRefresh(); }, [dispatch]); return ( <NavigationContainer> {isLoggedIn ? ( <Tab.Navigator> <Tab.Screen name="Orders" component={Orders} options={{ title: '오더 목록', tabBarIcon: () => <FontAwesome5 name="list" size={20} />, }} /> <Tab.Screen name="Delivery" component={Delivery} options={{ headerShown: false, title: '지도', tabBarIcon: () => <FontAwesome5 name="map" size={20} />, // headerTitleStyle: {fontWeight: 'bold'}, // tabBarLabelStyle: {fontSize: 12}, }} /> <Tab.Screen name="Settings" component={Settings} options={{ title: '내 정보', tabBarIcon: () => <FontAwesome name="gear" size={20} />, unmountOnBlur: true, }} /> </Tab.Navigator> ) : ( <Stack.Navigator> <Stack.Screen name="SignIn" component={SignIn} options={{title: '로그인'}} /> <Stack.Screen name="SignUp" component={SignUp} options={{title: '회원가입'}} /> </Stack.Navigator> )} </NavigationContainer> ); } export default AppInner; 아래는 백 서버 터미널 입니다 (이 부분이 계속 로딩됩니다)C:\Users\user\fooddeliveryapp\back>npm start > food-delivery-server@1.0.0 start > node app.js 연결되었습니다. TokenExpiredError: jwt expired at C:\Users\user\fooddeliveryapp\back\node_modules\jsonwebtoken\verify.js:152:21 at getSecret (C:\Users\user\fooddeliveryapp\back\node_modules\jsonwebtoken\verify.js:90:14) at module.exports [as verify] (C:\Users\user\fooddeliveryapp\back\node_modules\jsonwebtoken\verify.js:94:10) at verifyRefreshToken (C:\Users\user\fooddeliveryapp\back\app.js:59:22) at Layer.handle [as handle_request] (C:\Users\user\fooddeliveryapp\back\node_modules\express\lib\router\layer.js:95:5) at next (C:\Users\user\fooddeliveryapp\back\node_modules\express\lib\router\route.js:137:13) at Route.dispatch (C:\Users\user\fooddeliveryapp\back\node_modules\express\lib\router\route.js:112:3) at Layer.handle [as handle_request] (C:\Users\user\fooddeliveryapp\back\node_modules\express\lib\router\layer.js:95:5) at C:\Users\user\fooddeliveryapp\back\node_modules\express\lib\router\index.js:281:22 at Function.process_params (C:\Users\user\fooddeliveryapp\back\node_modules\express\lib\router\index.js:341:12) { expiredAt: 2023-03-14T08:00:16.000Z } POST /refreshToken 419 91.985 ms - 70잘 되다가 갑자기 이러니 당황스럽네요...ㅎㅎ메트로 서버에서는 이렇게 나오네요 LOG Running "FoodDeliveryApp" with {"rootTag":11} LOG !isLoggedIn true LOG check location granted백 서버를 껐다가 켠건데 왜 로그인이 되어있는 상태로 나올까요?

안녕하세요 제로초님!코드푸시와 센트리를 동시에 사용하려고 하는데 의문이 있어서 질문드립니다.https://docs.sentry.io/platforms/react-native/manual-setup/codepush/제로초님은 공식문서에서 제시하는 방법 중에 프로미스 방법, codePush.getUpdateMetadata().then(update => { if (update) { Sentry.init({ // ... release: ${update.appVersion}+codepush:${update.label}, dist: update.label, }); } }); 아니면 ${BUNDLE_ID}@${APP_VERSION}+codepush:${DIST} 수동으로 직접 설정해서Sentry.init({ // ... release, dist, });사용하고 계신가요?문서가 잘 이해가 안되는데 Making Releases 이 부분을 코드 푸시 할 때마다 수동으로 해주어야 하는지 궁금합니다.감사합니다.

안드로이드 스튜디오에서 libs 파일 생성 후 sdk 다운로드 파일 넣었습니다빨간 오류 표시가 떴고, 티맵 앱을 설치를 하였으나 여전히 빨간 오류 표시가 뜨고 있습니다제로초님과 다르게 한 부분이라면, 사이트 디자인이 변경되는 바람에 sdk 파일 다운로드 페이지를 찾을 수 없어서 http://tmapapi.sktelecom.com/main.html#android/sample/androidSample.sdk_download이 가이드 내에 있는 파일을 다운로드 하여 진행하였습니다저는 최신 버전인 V 1.75 을 다운 받았고 제로초님과 똑같이 진행하였습니다. 하지만 sdk 버전 때문인지는 모르겠지만, 안드로이드 스튜디오에서 빨간색 오류가 뜨고 어느 곳이 오류인지 찾을 수 없습니다...또한, 그것 때문인지 빌드가 안되고 있습니다.PS C:\Users\user\fooddeliveryapp\front> npm run android > fooddeliveryapp@0.0.1 android > react-native run-android info Starting JS server... info Installing the app... > Configure project :app Reading env from: .env WARNING:The specified Android SDK Build Tools version (28.0.3) is ignored, as it is below the minimum supported version (30.0.3) for Android Gradle Plugin 7.3.1. Android SDK Build Tools 30.0.3 will be used. To suppress this warning, remove "buildToolsVersion '28.0.3'" from your build.gradle file, as each version of the Android Gradle Plugin now has a default version of the build tools. > Task :app:compileDebugJavaWithJavac FAILED Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.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/7.5.1/userguide/command_line_interface.html#sec:command_line_warnings 141 actionable tasks: 2 executed, 139 up-to-date C:\Users\user\fooddeliveryapp\front\android\app\src\main\java\com\zzz\fooddeliveryapp\TMapModule.java:9: error: package com.skt.Tmap does not exist import com.skt.Tmap.TMapTapi; ^ C:\Users\user\fooddeliveryapp\front\android\app\src\main\java\com\zzz\fooddeliveryapp\TMapModule.java:17: error: cannot find symbol TMapTapi tMapTapi = new TMapTapi(context); ^ symbol: class TMapTapi location: class TMapModule C:\Users\user\fooddeliveryapp\front\android\app\src\main\java\com\zzz\fooddeliveryapp\TMapModule.java:17: error: cannot find symbol TMapTapi tMapTapi = new TMapTapi(context); ^ symbol: class TMapTapi location: class TMapModule C:\Users\user\fooddeliveryapp\front\android\app\src\main\java\com\zzz\fooddeliveryapp\TMapModule.java:29: error: cannot find symbol TMapTapi tMapTapi = new TMapTapi(getReactApplicationContext()); ^ symbol: class TMapTapi location: class TMapModule C:\Users\user\fooddeliveryapp\front\android\app\src\main\java\com\zzz\fooddeliveryapp\TMapModule.java:29: error: cannot find symbol TMapTapi tMapTapi = new TMapTapi(getReactApplicationContext()); ^ symbol: class TMapTapi location: class TMapModule Note: C:\Users\user\fooddeliveryapp\front\android\app\src\main\java\com\zzz\fooddeliveryapp\TMapModule.java uses unchecked or unsafe operations. Note: Recompile with -Xlint:unchecked for details. 5 errors FAILURE: Build completed with 2 failures. 1: Task failed with an exception. ----------- * What went wrong: Execution failed for task ':app: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. ============================================================================== 2: Task failed with an exception. ----------- * What went wrong: java.lang.StackOverflowError (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 38s error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081 C:\Users\user\fooddeliveryapp\front\android\app\src\main\java\com\zzz\fooddeliveryapp\TMapModule.java:9: error: package com.skt.Tmap does not exist import com.skt.Tmap.TMapTapi; ^ C:\Users\user\fooddeliveryapp\front\android\app\src\main\java\com\zzz\fooddeliveryapp\TMapModule.java:17: error: cannot find symbol TMapTapi tMapTapi = new TMapTapi(context); ^ symbol: class TMapTapi location: class TMapModule C:\Users\user\fooddeliveryapp\front\android\app\src\main\java\com\zzz\fooddeliveryapp\TMapModule.java:17: error: cannot find symbol TMapTapi tMapTapi = new TMapTapi(context); ^ symbol: class TMapTapi location: class TMapModule C:\Users\user\fooddeliveryapp\front\android\app\src\main\java\com\zzz\fooddeliveryapp\TMapModule.java:29: error: cannot find symbol TMapTapi tMapTapi = new TMapTapi(getReactApplicationContext()); ^ symbol: class TMapTapi location: class TMapModule C:\Users\user\fooddeliveryapp\front\android\app\src\main\java\com\zzz\fooddeliveryapp\TMapModule.java:29: error: cannot find symbol TMapTapi tMapTapi = new TMapTapi(getReactApplicationContext()); ^ symbol: class TMapTapi location: class TMapModule Note: C:\Users\user\fooddeliveryapp\front\android\app\src\main\java\com\zzz\fooddeliveryapp\TMapModule.java uses unchecked or unsafe operations. Note: Recompile with -Xlint:unchecked for details. 5 errors FAILURE: Build completed with 2 failures. 1: Task failed with an exception. ----------- * What went wrong: Execution failed for task ':app: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. ============================================================================== 2: Task failed with an exception. ----------- * What went wrong: java.lang.StackOverflowError (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 38s at makeError (C:\Users\user\fooddeliveryapp\front\node_modules\@react-native-community\cli-platform-android\node_modules\execa\index.js:174:9) at C:\Users\user\fooddeliveryapp\front\node_modules\@react-native-community\cli-platform-android\node_modules\execa\index.js:278:16 at process.processTicksAndRejections (node:internal/process/task_queues:95:5) at async runOnAllDevices (C:\Users\user\fooddeliveryapp\front\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:85:5) at async Command.handleAction (C:\Users\user\fooddeliveryapp\front\node_modules\@react-native-community\cli\build\index.js:108:9) info Run CLI with --verbose flag for more details.

react-native-vector-icons를 현재 진행되는 다른 프로젝트에서도 사용중입니다. 하지만 그 프로젝트를 하면서 java/src/assets/fonts에 nodemodule의 폰트를 복사하지 않고도 임포트하여 사용했습니다. (배포 전이라서 문제를 확인하지 못한걸까요?? )강의를 듣던중 java/src/assets/fonts이 폴더에 꼭 붙여넣어줘야하는지 설명이 더 듣고 싶어 질문 남기게 되었습니다. 감사합니다 :)

PS C:\Users\user\fooddeliveryapp\front> npm i --force > fooddeliveryapp@0.0.1 postinstall > patch-package patch-package 6.5.1 Applying patches... react-native-image-crop-picker@0.39.0 ✔ up to date, audited 1395 packages in 3s 125 packages are looking for funding run `npm fund` for details found 0 vulnerabilitiespatch-package 적용이 됐다고 하는데 다시 실행해도 사진 저장이 안됩니다또한 option 타고 들어갔을 때 saveToPhotos 검색 결과가 안나왔습니다그럼 적용이 안 된건가요??

윈도우 사용자입니다.수업에서 android와 ios 파일 두가지를 수정하는데,윈도우 사용자는 android 파일만 수정해도 되는지 ios 파일도 수정해야하는지 궁금합니다.

LOG {"addListener": [Function addListener], "canGoBack": [Function canGoBack], "dispatch": [Function dispatch], "getId": [Function getId], "getParent": [Function getParent], "getState": [Function anonymous], "goBack": [Function anonymous], "isFocused": [Function isFocused], "jumpTo": [Function anonymous], "navigate": [Function anonymous], "pop": [Function anonymous], "popToTop": [Function anonymous], "push": [Function anonymous], "removeListener": [Function removeListener], "replace": [Function anonymous], "reset": [Function anonymous], "setOptions": [Function setOptions], "setParams": [Function anonymous]} LOG {"end": {"latitude": 37.577, "longitude": 127.045}, "orderId": "DXCbe0Q55", "price": 6000, "rider": "LlnQ3qTJvU", "start": {"latitude": 37.516999999999996, "longitude": 126.944}} LOG 960 1280 {"DateTime": "2023:02:23 18:11:22", "DateTimeDigitized": "2023:02:23 18:11:22", "ExposureTime": "0.01", "FNumber": "2.8", "Flash": "0", "FocalLength": "5000/1000", "GPSAltitude": null, "GPSAltitudeRef": null, "GPSDateStamp": null, "GPSLatitude": null, "GPSLatitudeRef": null, "GPSLongitude": null, "GPSLongitudeRef": null, "GPSProcessingMethod": null, "GPSTimeStamp": null, "ISOSpeedRatings": "100", "ImageLength": "1280", "ImageWidth": "960", "Make": "Google", "Model": "sdk_gphone_x86", "Orientation": "1", "SubSecTime": "063", "SubSecTimeDigitized": "063", "SubSecTimeOriginal": "063", "WhiteBalance": "0"} LOG orientation 1 LOG file:///data/user/0/com.zzz.fooddeliveryapp/cache/2dfe7384-6463-4c9c-b07a-e86a4184388b.JPEG 2dfe7384-6463-4c9c-b07a-e86a4184388b.JPEG원래는 완료버튼을 누른 후 내 정보로 가야하고 수익금이 정산되어야하는데,일단 완료버튼을 눌러도 아무런 반응이 없습니다Complete.tsx import React, {useCallback, useState} from 'react'; import { Alert, Dimensions, Image, Pressable, StyleSheet, Text, View, } from 'react-native'; import { NavigationProp, RouteProp, useNavigation, useRoute, } from '@react-navigation/native'; import {LoggedInParamList} from '../../AppInner'; import ImagePicker from 'react-native-image-crop-picker'; import ImageResizer from 'react-native-image-resizer'; import axios, {AxiosError} from 'axios'; import Config from 'react-native-config'; import {useSelector} from 'react-redux'; import {RootState} from '../store/reducer'; import orderSlice from '../slices/order'; import {useAppDispatch} from '../store'; function Complete() { const dispatch = useAppDispatch(); const route = useRoute<RouteProp<LoggedInParamList>>(); const navigation = useNavigation<NavigationProp<LoggedInParamList>>(); const [image, setImage] = useState<{uri: string; name: string; type: string}>(); const [preview, setPreview] = useState<{uri: string}>(); const accessToken = useSelector((state: RootState) => state.user.accessToken); // { uri: '경로', name: '파일이름', type: '확장자' } // multipart/form-data 통해서 업로드 const onResponse = useCallback(async (response: any) => { console.log(response.width, response.height, response.exif); setPreview({uri: `data:${response.mime};base64,${response.data}`}); const orientation = (response.exif as any)?.Orientation; console.log('orientation', orientation); return ImageResizer.createResizedImage( response.path, // 파일 경로 (file:///안드로이드 경로) 600, // width 600, // height response.mime.includes('jpeg') ? 'JPEG' : 'PNG', // format 100, // quality 0, // rotation ).then(r => { console.log(r.uri, r.name); setImage({ uri: r.uri, name: r.name, type: response.mime, }); }); }, []); const onTakePhoto = useCallback(() => { return ImagePicker.openCamera({ includeBase64: true, includeExif: true, // saveToPhotos: true, }) .then(onResponse) .catch(console.log); }, [onResponse]); const onChangeFile = useCallback(() => { return ImagePicker.openPicker({ includeExif: true, includeBase64: true, mediaType: 'photo', }) .then(onResponse) .catch(console.log); }, [onResponse]); const orderId = route.params?.orderId; const onComplete = useCallback(async () => { if (!image) { Alert.alert('알림', '파일을 업로드해주세요.'); return; } if (!orderId) { Alert.alert('알림', '유효하지 않은 주문입니다.'); return; } const formData = new FormData(); formData.append('image', image); formData.append('orderId', orderId); try { await axios.post(`${Config.API_URL}/complete`, formData, { headers: { authorization: `Bearer ${accessToken}`, }, }); Alert.alert('알림', '완료처리 되었습니다.'); navigation.goBack(); navigation.navigate('Settings'); dispatch(orderSlice.actions.rejectOrder(orderId)); } catch (error) { const errorResponse = (error as AxiosError).response; if (errorResponse) { Alert.alert('알림', (errorResponse.data as any).message); } } }, [dispatch, navigation, image, orderId, accessToken]); return ( <View> <View style={styles.orderId}> <Text>주문번호: {orderId}</Text> </View> <View style={styles.preview}> {preview && <Image style={styles.previewImage} source={preview} />} </View> <View style={styles.buttonWrapper}> <Pressable style={styles.button} onPress={onTakePhoto}> <Text style={styles.buttonText}>이미지 촬영</Text> </Pressable> <Pressable style={styles.button} onPress={onChangeFile}> <Text style={styles.buttonText}>이미지 선택</Text> </Pressable> <Pressable style={ image ? styles.button : StyleSheet.compose(styles.button, styles.buttonDisabled) } onPress={onComplete}> <Text style={styles.buttonText}>완료</Text> </Pressable> </View> </View> ); } const styles = StyleSheet.create({ orderId: { padding: 20, }, preview: { marginHorizontal: 10, width: Dimensions.get('window').width - 20, height: Dimensions.get('window').height / 3, backgroundColor: '#D2D2D2', marginBottom: 10, }, previewImage: { height: Dimensions.get('window').height / 3, resizeMode: 'contain', // cover(꽉 차게), contain(딱 맞게), stretch(비율 무시하고 딱 맞게), repeat(반복되게), center(중앙 정렬) }, buttonWrapper: {flexDirection: 'row', justifyContent: 'center'}, button: { paddingHorizontal: 20, paddingVertical: 10, width: 120, alignItems: 'center', backgroundColor: 'yellow', borderRadius: 5, margin: 5, }, buttonText: { color: 'black', }, buttonDisabled: { backgroundColor: 'gray', }, }); export default Complete; 중간에 이 에러가 나는데 혹시 관련이 있나요? WARN SerializableStateInvariantMiddleware took 123ms, which is more than the warning threshold of 32ms. If your state or actions are very large, you may want to disable the middleware as it might cause too much of a slowdown in development mode. See https://redux-toolkit.js.org/api/getDefaultMiddleware for instructions. It is disabled in production builds, so you don't need to worry about that. 

3분 10초쯤에 나오는 _BUCK 파일이 없습니다파일이 없을 시 따로 추가해주어야하나요??

react-native-nmap 라이브러리를 사용해서 지도를 출력할때와 naver map sdk를 native로 직접 호출해서 지도를 출력할때 각각 사용되는 모바일 데이터(4G)의 사용량이 꽤 차이가 납니다.react-native-nmap가 상황에 따라 (3~6mb)정도 사용된다면 native에서 sdk를 이용해 바로 출력할때는 많아야 2mb정도 사용되는것 같습니다. 해당 문제는 라이브러리 자체의 성능이슈일까요?..지도에서 상황에따라 핀 데이터를 업데이트해야하는데 이때마다 지도가 렌더링되면서 데이터가 꽤 많이 소모되어서 개선 방법이 있는지 궁금합니다.

일단 문제는 Flipper DevTools에서 아래 오류가 발생하는 것 입니다.Mac에서 Flipper 설정 중인데, 버전은 따로 명시하지 않고 설치하였습니다.Setup Doctor에서 오류나는 부분은 구글링하여 해결하여서 전부 체크 상태입니다.혹시 제가 체크하지 못 한 부분이 있을까요?

React 개발을 할 때는 scss나 emotion, tailwind, chakra-ui와 같은 라이브러리를 사용했었던 기억이 납니다.RN도 대응되는 emotion 라이브러리나 tailwind 관련된 라이브러리들, react native paper와 같은 라이브러리가 있는걸 알게되었는데요. 이 라이브러리들이 실무 환경에서도 충분히 사용할 수 있을정도로 검증이 되었는지 판단 하는법을 모르겠습니다.사용하고 나서 먼 나중에서야 치명적인 에러나 충돌이 발생하면 어쩌지 하는 걱정이 드네요.사실 react에서는 단순 사용 수가 많다보니 비교적 선택을 하기 쉬운데, rn에서는 사용 빈도 자체가 react에 비해 적다보니 관련 자료나 의견도 찾기 어려웠습니다.혹시 이 부분에 대해서 제로초님의 생각은 어떠한지 듣고 싶습니다.

수업과 관련된 내용은 아닐 수도 있는 것 같지만 로그인 할 때 백에서 jwt로 보안 처리하는 부분은 있지만 react native 단에서는 따로 없는 것 같은데 실무에서도 보통 프론트 단에서는 따로 처리를 해주지 않나요? 아니면 해주는 다른 방식이 있는 것일까요? 데이터 저장할 때 아닌 통신할 때가 궁금합니다!

안녕하세요.조건부 렌더링일때 푸시 알림을 받은 후 Navigation.navigate('Home')을 하면 오류가 발생합니다.해결 방법 있을까요?

Failed to construct transformer: Error: error:0308010C:digital envelope routines::unsupported at new Hash (node:internal/crypto/hash:71:19) at Object.createHash (node:crypto:133:10) at stableHash (C:\Users\user\Food-Delivery-App\front\node_modules\metro-cache\src\stableHash.js:19:8) at Object.getCacheKey (C:\Users\user\Food-Delivery-App\front\node_modules\metro-transform-worker\src\index.js:593:7) at getTransformCacheKey (C:\Users\user\Food-Delivery-App\front\node_modules\metro\src\DeltaBundler\getTransformCacheKey.js:24:19) at new Transformer (C:\Users\user\Food-Delivery-App\front\node_modules\metro\src\DeltaBundler\Transformer.js:48:9) at C:\Users\user\Food-Delivery-App\front\node_modules\metro\src\Bundler.js:22:29 at runNextTicks (node:internal/process/task_queues:60:5) at process.processTimers (node:internal/timers:504:9) { opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ], library: 'digital envelope routines', reason: 'unsupported', code: 'ERR_OSSL_EVP_UNSUPPORTED' }파일을 옮기다가 에러가 났는데 몇 시간째 해결 못해서 결국 여기서 여쭤봅니다ㅠㅠnpm run android 실행 결과 이 에러가 발생했습니다.서칭 결과, 이 에러가 node 버전 문제라고 해서 다운그레이딩 시켜서 해봤으나 해결되지 않았어요이 전에 다른 에러로 찾고 있다가 npm install -g npm@latest 로 했더니 해결 됐었거든요 그래서 npm이랑 node 버전을 다 다운그레이딩 했는데 안됐습니다혹시 다른 방법이 있을까요??? 

티맵 모듈을 설정하고 androidManifest.xml 에 readme에 나온 것과 공식 문서에 나온 것을 모두 적용시켜주었고 커뮤니티에 있는 글 따라 안드로이드 스튜디오에서 jar 파일을 추가했으나 여전히 error: package com.skt.Tmap does not existimport com.skt.Tmap.TMapTapi; 다음과 같은 오류가 발생합니다. 검색을 해보아도 별다른 얘기가 나오질 않아 여쭤봅니다. 혹시 왜 그런지 아실까요?