ReactNative19 [React Native] 안드로이드 aab 파일 생성 시 파일명 변경하기 📌 플레이스토어 배포 용 aab 파일 생성 명령어$ cd android$ ./gradlew app:bundleRelease 이러면 {프로젝트폴더}/android/app/build/outputs/bundle/release 폴더에 app-release.aab라는 이름으로 aab 파일이 만들어진다.수정 배포 등으로 인해 다시 빌드를 하면 같은 이름으로 생성을 하기 때문에 파일 덮어쓰기가 안되거나, 파일명으로 신버전의 파일이 맞는지 확인할 수가 없다.최신 aab 파일임을 구분하기 위해서 app-release.aab 파일에 날짜 정보가 있었으면 좋겠다고 생각했다. 📌 app/build.gradle 파일 수정android { ...}// 이 부분 코드 추가tasks.whenTaskAdded { task -> .. 2024. 10. 22. [React Native] env 파일 변경사항 반영 안될 때 env 파일 내용을 변경했는데, 반영이 안된다면 캐시가 남아있는 경우일 수 있다.캐시를 지워주고 프로젝트를 실행하도록 하자.$ npm start -- --reset-cache# or$ react-native start --reset-cache 2024. 9. 22. [React Native] REALM Error: Accessing object which has been invalidated or deleted 📌 상황환경) @react-navigation/native - goBack() 사용, realm.delete() 사용 A 화면: 데이터 목록을 보여줌.B 화면: 각 데이터 상세 내용을 보여줌.A화면에서 데이터 선택 후 B화면 진입. B화면에서 해당 데이터 삭제 버튼을 누르면 A화면으로 돌아감.이 때, Accessing object which has been invalidated or deleted 에러 발생. 🐛 원인Realm 객체를 삭제한 후에도 앱에서 해당 객체를 참조. 💡 해결 방법 Realm 객체를 삭제한 후에는 앱에서 해당 객체를 참조하지 못하도록 해야함.Object.assign({}, realmObject)를 사용하여 객체를 복사하고 리스트에 복사된 객체를 사용하도록 함.const rea.. 2024. 9. 14. [React Native] --list-devices에서 USB로 연결한 안드로이드 실기기가 보이지 않을 때 react-native run-android --list-devices 명령어 입력시 실행 가능한 안드로이드 기기/에뮬레이터 목록이 뜨는데, 이전까지도 잘 떴던 실기기가 어느날부터 목록에서 나오지 않았다.우선 아래 명령어를 실행한다.$ adb kill-server 그 후에 컴퓨터에 USB로 안드로이드 기기를 연결한 상태에서 아래 명령어를 입력한다.$ adb devices상태가 unauthorized이긴 하나 연결된 기기 목록에는 뜨는 것을 확인했다. 이제 안드로이드 기기에서 설정 > 개발자 옵션 > USB 디버깅을 ON으로 만들어주면 "USB 디버깅을 허용하시겠습니까?"라는 메시지와 컴퓨터 RSA 키 지문이 같이 화면에 표시된다. 이 메시지를 허용을 누른다. adb devices 명령어 결과에서 휴대폰 .. 2024. 9. 4. [React Native] ios react-native-permissions로 APP_TRACKING_TRANSPARENCY 요청하기 ios에서 앱을 실행하다보면 아래 이미지처럼 사용자 활동 추적 메시지를 본 적이 있을 것이다. 이 팝업이 뜨도록 설정하는 과정을 보도록 하자. react-native-permissions 패키지(https://www.npmjs.com/package/react-native-permissions)를 사용했다. 패키지 설명 페이지에 나온대로 따라해봤다. 1. Podfile 설정1) react-native 버전에 따라서 아래 코드 Podfile에 추가react-native >= 0.72 일 때def node_require(script) # Resolve script with node to allow for hoisting require Pod::Executable.execute_command('node',.. 2024. 8. 4. [React Native] The Google Mobile Ads SDK was initialized without an application ID. react native 프로젝트에 애드몹을 적용하려고 react-native-google-mobile-ads 패키지를 사용했다. 안드로이드에서는 정상 구동 되나, ios에서 앱이 충돌나면서 강제 종료가 되어버리는 현상이 나타났다.Xcode에서 확인해보니 아래 에러 내용이 나왔다.❓ 에러 내용reason __NSCFString * "The Google Mobile Ads SDK was initialized without an application ID. Google AdMob publishers, follow instructions at https://googlemobileadssdk.page.link/admob-ios-update-plist to set a valid application ID. Goog.. 2024. 7. 31. [React Native] MacOS 기기에서 현재 사용 가능한 시뮬레이터 목록 가져오기 MacOS 기기에서 현재 사용 가능한 시뮬레이터 목록을 가져오고 싶을 땐, iterm 등 터미널에 접속한 후에 아래 명령어 입력xcrun simctl list devices 프로젝트 실행 시 시뮬레이터/실제 기기 지정하고 싶을 땐 아래 명령어 입력// 시뮬레이터npm run ios -- --simulator="시뮬레이터 명"// 예시npm run ios -- --simulator="iPhone SE (3rd generation)"// 실제 기기npm run ios -- --device="실제 기기 명"// 예시npm run ios -- --simulator="GILDONG의 iPhone SE" 2024. 7. 18. [React Native] 특정 Android 기기에서 프로젝트 실행하기 package.json 파일 scripts 부분에서 설정 가능하다.기본은 "android": "react-native run-android"로 되어있는데, 뒤에 --list-devices를 추가해주면 된다."scripts": { "start": "react-native start", "android": "react-native run-android --list-devices", // 이 부분 ...} 그 후에 npm run android를 통해서 프로젝트를 실행하면 아래 이미지에서처럼 에뮬레이터 목록이 뜨면서 선택할 수 있게 된다.방향키랑 엔터로 에뮬레이터를 선택해주면 된다. 2024. 7. 16. [React Native] android fcm 테스트 시 MISSING_INSTANCEID_SERVICE 에러 android 에뮬레이터에서 fcm를 이용한 푸시메시지 테스트를 진행하는데, 토근이 생성되지는 않고 아래 에러가 발생했다.[Error: [messaging/unknown] java.io.IOException: java.util.concurrent.ExecutionException: java.io.IOException: MISSING_INSTANCEID_SERVICE] 에러에 대해서 찾아보니, 에뮬레이터에 구글 플레이스토어가 설치되어있지 않으면 토큰이 발급되지 않는다고 한다.에뮬레이터를 확인해보니 정말 구글 플레이스토어가 설치되어 있지 않았고, 플레이스토어 설치 후에 다시 실행하니까 정상적으로 fcm을 활용한 푸시알림을 받을 수 있었다.참고: https://stackoverflow.com/questions.. 2024. 7. 16. [React Native] ios FCM으로 푸시알림 적용하기(2) - Firebase 설정 * 사전 준비: FCM 세팅 중에 APN 인증키(.p8 파일)가 필요하다. 인증 키 발급 방법은 다음 글에서 확인 가능하다.https://pocket-dev.tistory.com/43 인증서, ID 및 프로파일 > " data-og-host="pocket-dev.tistory.com" data-og-source-url="https://pocket-dev.tistory.com/43" data-og-url="https://pocket-dev.tistory.com/43" data-og-image="https://scrap.kakaocdn.net/dn/bmfSAI/hyWvSyqpRs/XQZMd2YmmctlRuVL4Am711/img.png?width=800&height=607&face=0_0_800_607,htt.. 2024. 7. 10. [React Native] ios FCM으로 푸시알림 적용하기(1) - APN 인증키(.p8) 발급받기 iOS 환경에서 FCM을 사용하기 위해서는 APN(Applie Push Notification)인증키가 필요하다.APN 인증키를 발급받아보자. 1. APN 인증키 발급하기1) https://developer.apple.com/account 접속 > 인증서, ID 및 프로파일 > 키(영문) 클릭 2) Keys > + 버튼 클릭 3) Key Name 입력 > Apple Push Notifications service(APNs) 부분 체크박스 체크 > 우측 상단 Continue 버튼 클릭 4) Register 버튼 클릭 5) Download 버튼 클릭노란색 경고문에 나와있듯이 Key 파일은 단 한 번만 다운로드 가능하기 때문에, 다운로드 받아서 잘 가지고 있어야 한다.만약 지금 다운로드 받지 않을 것이라면, .. 2024. 7. 10. [React Native] ios FCM으로 푸시알림 적용하기(3) - 연동 테스트 * 참고: ios는 FCM 테스트가 에뮬레이터에서 안되고, 실제 기기에서만 확인 가능하다.ios 실제 기기(아이폰)에서 프로젝트를 구동하는 방법은 다음 포스팅을 참고하면 된다: https://pocket-dev.tistory.com/35 scripts에 ios-device 부분 추가"scripts": { "start": "react-native start", "android": "react-native run-android", "ios": "react-native run-ios --simulator \"iPhone SE (3rd generation)\"", "ios-" data-og-host="pocket-dev.tistory.com" data-og-source-url="https://pocket-dev.. 2024. 7. 10. [React Native] 실제 기기 구동 시 @expo/vector-icons 아이콘 안나옴. 아이폰 기기에서 앱 실행 시 '@expo/vector-icons'; 로 임포트한 아이콘이 화면에서 보이지 않을 경우,ios > {프로젝트명} > info.plist에 아래 부분을 추가해준다.UIAppFonts AntDesign.ttf Entypo.ttf EvilIcons.ttf Feather.ttf FontAwesome.ttf FontAwesome5_Brands.ttf FontAwesome5_Regular.ttf FontAwesome5_Solid.ttf Fontisto.ttf Foundation.ttf Ionicons.ttf MaterialCommunityIcons.ttf MaterialIcons.ttf Octicons.ttf .. 2024. 7. 5. [React Native] 실제 기기(아이폰) 연결해서 프로젝트 구동하기 1. npm 명령어 생성 후 실행- 시도: package.json > scripts에 ios-device 부분 추가"scripts": { "start": "react-native start", "android": "react-native run-android", "ios": "react-native run-ios --simulator \"iPhone SE (3rd generation)\"", "ios-device": "react-native run-ios --device 'MYNAME의 iPhone' --mode Debug", "web": "expo start --web", }, - 결과: 에러 발생(코드 70)error Failed to build iOS project. ".. 2024. 7. 5. [React Native] fetch 사용 시 TypeError: Network request failed 리액트 네이티브 프로젝트를 ios 에뮬레이터에서 실행 시 fetch로 API를 호출하는 부분에서 [TypeError: Network request failed] 에러를 만날 수 있다. ios 에뮬레이터는 기본적으로 http로 되어있는 api 호출을 막아둔다. 그래서 이것을 허용해줘야 한다. 내 상황: localhost로 띄워놓은 API 호출해결방법: info.plist 파일 수정NSAppTransportSecurity //////////////////////////////// 여기서부터 //////////////////////////////// NSExceptionDomains localhost NSTemporaryExceptionAllowsInsecureHTTPLoads .. 2024. 7. 1. [React Native] 탭 간 이동시 탭에 쌓여있는 스택 새로고침/초기화하기 navigation시 화면 하단에 있는 탭을 터치해서 탭 간 이동을 할 때 각 탭에 쌓여있는 스택을 비우고 싶다면 Tab.Navigator 선언 시 screenOptions에 unmountOnBlur: true 옵션을 사용하면 된다.const Tab = createBottomTabNavigator(); 참고: https://reactnavigation.org/docs/bottom-tab-navigator/#unmountonblur 2024. 6. 11. [React Native] 시뮬레이터 기종 지정하기 프로젝트 구동 시 시뮬레이터 기종을 지정하기 위해서는 아래 명령어처럼 --simulator를 써서 실행하면 된다.react-native run-ios --simulator "iPhone SE (3rd generation)" package.json에서 미리 지정해놓고 싶다면, 다음과 같이 scripts 부분을 수정해주면 된다."scripts": { "start": "react-native start", "android": "react-native run-android", "ios": "react-native run-ios --simulator \"iPhone SE (3rd generation)\"", "web": "expo start --web"}, 2024. 6. 11. [React Native]error Failed to build iOS project. "xcodebuild" exited with error code '65'. npm run ios 명령어 실행 후 다음 에러를 마주했다.error Failed to build iOS project. "xcodebuild" exited with error code '65'.To debug build logs further, consider building your app with Xcode.app, by opening '.xcworkspace'.시도 1번DerivedData 폴더 확인xcode 실행 -> settings -> Locations -> DerivedData에서 폴더 위치 확인 가능또는/Users/{user_name}/Library/Developer/Xcode/DerivedData 위치에 폴더 존재 확인 가능폴더 삭제(중요) Xcode 닫은 후에 DerivedData 폴.. 2024. 5. 16. 이전 1 2 다음 반응형
