월 14,300원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결배달앱 클론코딩 [with React Native]
Marker 클릭시 해당 Marker size나 또는 색상을 변경할 수 있나요?
안녕하세요. 문의사항이 있습니다.네이버 지도에 Marker가 많을 때 임의로 한 마커를 클릭하면임의로 클릭한 Marker의 사이즈나 색상등을 변경할 수 있는지 문의드립니다.소스는 아래와 같고,mapRef.current[index].width = 40 mapRef.current[index].height = 40이런식으로 변경을 해도 변경이 되지 않아 문의 드립니다.const mapRef = useRef([]); <Marker ref={el => mapRef.current[idx] = el} key={item.code} coordinate={location} image={require("../../assets/images/pin_primary.png")} width={35} height={35} useTextureView={true} onClick={() => mapClickHanlder(idx)} //caption={{text:item.title_text}} />const mapClickHanlder = useCallback((index) => { console.log("map click: ", mapRef.current[index]); const selectedMarker = mapRef.current[index]; selectMarker.width = 40; selectMarker.height = 40; console.log(selectedMarker); }, []);
- 해결됨배달앱 클론코딩 [with React Native]
안드로이드 Default Splash Screen 없애는 방법
안녕하세요 제로초님, Splash Screen을 설정하는 과정 중에 안드로이드에서 Splash Screen이 두 개가 나옵니다. Default Splash Screen과 제가 만든 Splash Screen, 이렇게 두 개가 나오는데 Default Splash Screen을 나오지 않게 하는 방법을 알고 싶습니다.아래와 같은 순서로 앱이 실행됩니다.
- 미해결배달앱 클론코딩 [with React Native]
setting을 통해 build 하는 경우 Failed to install the app
C:\Users\jeong\setting>npm run android> fooddeliveryapp@0.0.1 android> react-native run-androidinfo Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.Jetifier found 927 file(s) to forward-jetify. Using 8 workers...info JS server already running.info Installing the app...> Task :react-native-safe-area-context:compileDebugJavaWithJavac> Task :react-native-screens:generateDebugRFile FAILEDDeprecated Gradle features were used in this build, making it incompatible with Gradle 7.0.Use '--warning-mode all' to show the individual deprecation warnings.See https://docs.gradle.org/6.9/userguide/command_line_interface.html#sec:command_line_warnings52 actionable tasks: 52 executedWarning: Mapping new ns http://schemas.android.com/repository/android/common/02 to old ns http://schemas.android.com/repository/android/common/01Warning: Mapping new ns http://schemas.android.com/repository/android/generic/02 to old ns http://schemas.android.com/repository/android/generic/01Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/addon2/02 to old ns http://schemas.android.com/sdk/android/repo/addon2/01Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/addon2/03 to old ns http://schemas.android.com/sdk/android/repo/addon2/01Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/repository2/02 to old ns http://schemas.android.com/sdk/android/repo/repository2/01Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/repository2/03 to old ns http://schemas.android.com/sdk/android/repo/repository2/01Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/sys-img2/03 to old ns http://schemas.android.com/sdk/android/repo/sys-img2/01Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/sys-img2/02 to old ns http://schemas.android.com/sdk/android/repo/sys-img2/01Warning: ����ġ ���� ���(URI: "", ����: "base-extension")�Դϴ�. �ʿ��� ��Ҵ� <{}codename>,<{}layoutlib>,<{}api-level>�Դϴ�.Note: Some input files use or override a deprecated API.Note: Recompile with -Xlint:deprecation for details.FAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':react-native-screens:generateDebugRFile'.> Could not resolve all files for configuration ':react-native-screens:debugCompileClasspath'. > Failed to transform react-native-0.71.0-rc.0-debug.aar (com.facebook.react:react-native:0.71.0-rc.0) to match attributes {artifactType=android-symbol-with-package-name, com.android.build.api.attributes.BuildTypeAttr=debug, org.gradle.category=library, org.gradle.dependency.bundling=external, org.gradle.libraryelements=aar, org.gradle.status=release, org.gradle.usage=java-api}. > Execution failed for JetifyTransform: C:\Users\jeong\.gradle\caches\modules-2\files-2.1\com.facebook.react\react-native\0.71.0-rc.0\7a7f5a0af6ebd8eb94f7e5f7495e9d9684b4f543\react-native-0.71.0-rc.0-debug.aar. > Java heap space* 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.orgBUILD FAILED in 16serror 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=8081Warning: Mapping new ns http://schemas.android.com/repository/android/common/02 to old ns http://schemas.android.com/repository/android/common/01Warning: Mapping new ns http://schemas.android.com/repository/android/generic/02 to old ns http://schemas.android.com/repository/android/generic/01Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/addon2/02 to old ns http://schemas.android.com/sdk/android/repo/addon2/01Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/addon2/03 to old ns http://schemas.android.com/sdk/android/repo/addon2/01Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/repository2/02 to old ns http://schemas.android.com/sdk/android/repo/repository2/01Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/repository2/03 to old ns http://schemas.android.com/sdk/android/repo/repository2/01Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/sys-img2/03 to old ns http://schemas.android.com/sdk/android/repo/sys-img2/01Warning: Mapping new ns http://schemas.android.com/sdk/android/repo/sys-img2/02 to old ns http://schemas.android.com/sdk/android/repo/sys-img2/01Warning: ����ġ ���� ���(URI: "", ����: "base-extension")�Դϴ�. �ʿ��� ��Ҵ� <{}codename>,<{}layoutlib>,<{}api-level>�Դϴ�.Note: Some input files use or override a deprecated API.Note: Recompile with -Xlint:deprecation for details.FAILURE: Build failed with an exception.* What went wrong:Execution failed for task ':react-native-screens:generateDebugRFile'.> Could not resolve all files for configuration ':react-native-screens:debugCompileClasspath'. > Failed to transform react-native-0.71.0-rc.0-debug.aar (com.facebook.react:react-native:0.71.0-rc.0) to match attributes {artifactType=android-symbol-with-package-name, com.android.build.api.attributes.BuildTypeAttr=debug, org.gradle.category=library, org.gradle.dependency.bundling=external, org.gradle.libraryelements=aar, org.gradle.status=release, org.gradle.usage=java-api}. > Execution failed for JetifyTransform: C:\Users\jeong\.gradle\caches\modules-2\files-2.1\com.facebook.react\react-native\0.71.0-rc.0\7a7f5a0af6ebd8eb94f7e5f7495e9d9684b4f543\react-native-0.71.0-rc.0-debug.aar. > Java heap space* 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.orgBUILD FAILED in 16s at makeError (C:\Users\jeong\setting\node_modules\@react-native-community\cli-platform-android\node_modules\execa\index.js:174:9) at C:\Users\jeong\setting\node_modules\@react-native-community\cli-platform-android\node_modules\execa\index.js:278:16 at processTicksAndRejections (node:internal/process/task_queues:96:5) at async runOnAllDevices (C:\Users\jeong\setting\node_modules\@react-native-community\cli-platform-android\build\commands\runAndroid\runOnAllDevices.js:109:5) at async Command.handleAction (C:\Users\jeong\setting\node_modules\@react-native-community\cli\build\index.js:192:9)info Run CLI with --verbose flag for more details.C:\Users\jeong\setting> 개발환경까지 모두 제거하고 여러번 다시 깔고해봤는데 되지가 않습니다...과거에 혼자서 최신버전 react native로는 빌드에 성공한 적이 있긴합니다.....
- 해결됨배달앱 클론코딩 [with React Native]
try catch 문에서 error handling 시에 'as' 대신 instance of 로 핸들링 할 수 있을까요?
안녕하세요. 제로초님try catch 문에서 error handling 시에 typescript의 as로 타입의 assertion 대신 아래와 같이 instanceof로 잡는 것은 좋을 방법인지 질문드립니다.try { setLoading(true); const response = await axios.post('/user', { email, name, password, }); Alert.alert('알림', '회원가입 완료'); } catch (error) { if (error instanceof AxiosError) { Alert.alert( '네트워크 에러', error.response?.data.message ?? '알수없는 에러가 발생했습니다', ); } } finally { setLoading(false); }
- 미해결배달앱 클론코딩 [with React Native]
AppStore 언어 정보에 여러 언어 표시하는 방법
안녕하세요 제로초님.앱을 개발하고 배포까지 하였습니다.앱스토어에서 '한국어 및 영어'로 표시하고 싶은데 지금은 '한국어'만 표시되네요.언어정보에 어떻게 여러 언어를 표시할 수 있나요?예시는 배달의 민족이고 Xcode 에서는 다음과 같이 설정하였습니다.
- 미해결배달앱 클론코딩 [with React Native]
에뮬레이터 한글 추가
혹시 안드로이드 한글추가했는데 한글안되는 이유가있을까요 ? 원래는됬는데 지금은 안되네용?
- 미해결배달앱 클론코딩 [with React Native]
코드푸시 버전 질문
안녕하세요.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이 업데이트 반영이 안됩니다.그리고 앱스토어에서 다시 다운받아보면 이전 코드 푸시내용만 받아집니다.조언 부탁드립니다감사합니다.
- 미해결배달앱 클론코딩 [with React Native]
노트북은 안드로이드, 실제 기기는 ios
노트북은 안드로이드를 사용하고 있고, 휴대폰은 ios를 사용하는데 실제 기기 연결 호환이 가능한가요??
- 해결됨배달앱 클론코딩 [with React Native]
AndroidManifest.xml 을 추가하고 나서 빌드 안됨
> 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>
- 해결됨배달앱 클론코딩 [with React Native]
백 서버 터미널 오류
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백 서버를 껐다가 켠건데 왜 로그인이 되어있는 상태로 나올까요?
- 해결됨배달앱 클론코딩 [with React Native]
Sentry와 CodePush 동시 사용
안녕하세요 제로초님!코드푸시와 센트리를 동시에 사용하려고 하는데 의문이 있어서 질문드립니다.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 이 부분을 코드 푸시 할 때마다 수동으로 해주어야 하는지 궁금합니다.감사합니다.
- 미해결배달앱 클론코딩 [with React Native]
티맵 앱 설치했으나 오류
안드로이드 스튜디오에서 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.
- 해결됨배달앱 클론코딩 [with React Native]
react-native-vector-icons
react-native-vector-icons를 현재 진행되는 다른 프로젝트에서도 사용중입니다. 하지만 그 프로젝트를 하면서 java/src/assets/fonts에 nodemodule의 폰트를 복사하지 않고도 임포트하여 사용했습니다. (배포 전이라서 문제를 확인하지 못한걸까요?? )강의를 듣던중 java/src/assets/fonts이 폴더에 꼭 붙여넣어줘야하는지 설명이 더 듣고 싶어 질문 남기게 되었습니다. 감사합니다 :)
- 해결됨배달앱 클론코딩 [with React Native]
npm i 한 후 saveToPhotos 적용 안됨
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 검색 결과가 안나왔습니다그럼 적용이 안 된건가요??
- 미해결배달앱 클론코딩 [with React Native]
윈도우 사용자 android, ios
윈도우 사용자입니다.수업에서 android와 ios 파일 두가지를 수정하는데,윈도우 사용자는 android 파일만 수정해도 되는지 ios 파일도 수정해야하는지 궁금합니다.
- 미해결배달앱 클론코딩 [with React Native]
이미지 촬영 후 완료 버튼 반응 없음
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.
- 해결됨배달앱 클론코딩 [with React Native]
_BUCK 파일
3분 10초쯤에 나오는 _BUCK 파일이 없습니다파일이 없을 시 따로 추가해주어야하나요??
- 미해결배달앱 클론코딩 [with React Native]
데이터 사용량 질문드립니다!
react-native-nmap 라이브러리를 사용해서 지도를 출력할때와 naver map sdk를 native로 직접 호출해서 지도를 출력할때 각각 사용되는 모바일 데이터(4G)의 사용량이 꽤 차이가 납니다.react-native-nmap가 상황에 따라 (3~6mb)정도 사용된다면 native에서 sdk를 이용해 바로 출력할때는 많아야 2mb정도 사용되는것 같습니다. 해당 문제는 라이브러리 자체의 성능이슈일까요?..지도에서 상황에따라 핀 데이터를 업데이트해야하는데 이때마다 지도가 렌더링되면서 데이터가 꽤 많이 소모되어서 개선 방법이 있는지 궁금합니다.
- 미해결배달앱 클론코딩 [with React Native]
안녕하세요 제로초님 Mac Flipper 설정 질문드립니다!
일단 문제는 Flipper DevTools에서 아래 오류가 발생하는 것 입니다.Mac에서 Flipper 설정 중인데, 버전은 따로 명시하지 않고 설치하였습니다.Setup Doctor에서 오류나는 부분은 구글링하여 해결하여서 전부 체크 상태입니다.혹시 제가 체크하지 못 한 부분이 있을까요?
- 미해결배달앱 클론코딩 [with React Native]
RN에서 스타일 관련 라이브러리 사용 질문입니다.
React 개발을 할 때는 scss나 emotion, tailwind, chakra-ui와 같은 라이브러리를 사용했었던 기억이 납니다.RN도 대응되는 emotion 라이브러리나 tailwind 관련된 라이브러리들, react native paper와 같은 라이브러리가 있는걸 알게되었는데요. 이 라이브러리들이 실무 환경에서도 충분히 사용할 수 있을정도로 검증이 되었는지 판단 하는법을 모르겠습니다.사용하고 나서 먼 나중에서야 치명적인 에러나 충돌이 발생하면 어쩌지 하는 걱정이 드네요.사실 react에서는 단순 사용 수가 많다보니 비교적 선택을 하기 쉬운데, rn에서는 사용 빈도 자체가 react에 비해 적다보니 관련 자료나 의견도 찾기 어려웠습니다.혹시 이 부분에 대해서 제로초님의 생각은 어떠한지 듣고 싶습니다.