React Native 0.72.4 업데이트
0. 어떤 내용이냐 하면...
React Native 버전을 0.66.3 에서 0.72.4 업데이트 하면서 겪어던 감정 섞인 이야기들.. 누구라도 이 글을 보고 도움을 받았으면 하는 마음에서 전부는 아니지만 누구나 겪을 법한 트러블슈팅을 해결하는 내용을 정리하였다. 오직 빌드와 번들링을 위한 작업이다. 비록 기술적으로 깊은 고민과 엄청난 개발 능력으로 문제를 해결하는 내용은 아니지만 그래도 누군가에게 도움이 되었으면 한다.
1. 업데이트 하게된 배경
유지보수 중인 앱 의 Android 14 대응이 필요하다는 메세지를 받았다. 아마 이 시즌에 모바일 개발자라면 다들 받게되는 메세지 일것이다. 이전부터 인지는 하고 있어서 당황스럽지는 않았지만 더 이상 미룰수 없겠구나 단념 하였다.
Android 14 대응을 위해서 이것저것 검색하다 보니 React Native 0.72.4 버전 로그와 수정된 버그 내용을 보고 적당하다고 생각되어 진행하게 되었다.
react-native/releases/tag/v0.72.4
2. 작업을 들어가기 전에
작업 흐름 및 내용 요약
- 사전 환경 작업 (node, java, yarn...)
- 라이브러리 업데이트
- Android Build
- iOS Build
- React Native BugFix
- 번들링 및 완료
업데이트 전 프로젝트 주요 환경
Mac
- MacBook Pro 14 (Apple M1 Pro)
ENV
- Node : v14.19.3
- ReactNative : 0.66.3
- React : 17.0.2
- npm : 9.8.1
- Unity : 2019.3 이상
Android
- minSdkVersion : 28
- compileSdkVersion : 33
- targetSdkVersion : 33
- Android Studio : Android Studio Electric Eel | 2022.1.1 Patch 1
- gradle : 6.9
iOS
- deployment target: 11.0
- Xcode : Version 15.4 (15F31d)3. 세부 작업 히스토리
프로젝트 환경 셋팅
- Node
기존에 14.19.3 버전을 쓰고 있었다. 업데이트를 위해 18.18.0 으로 버전을 올렸다. 다른 프로젝트에서 이미 18.18.0 을 사용할수 있도록 nvm 셋팅이 되어있어 손쉽게 변경 할수 있었다.> nvm alias default v18.18.0 default -> v18.18.0 > node -v v18.18.0 - Java
기존에는 zulu-11 을 사용 하고 있었다. zulu-17 로 업데이트 해주자. zulu-17 을 다운로드 받고 zshrc 에서 Java 경로를 관리 하고 있어 zshrc 를 수정하였다.open ~/.zshrc # .zshrc ... export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-17.jdk/Contents/Home ... - yarn
기존에는 npm 을 사용하고 있었는데 아무래도 yarn 이 익숙하다 보니 yarn 으로 수정하였다. 참고로 이번에 개인 적으로 yarn3 로 업데이트 하여 yarn3 를 사용하였다. 간략하게 설명하자면 yarn set version berry 입력하면 관련 파일과 폴더가 생성 된다. yml 파일에 nodeLinker: node-modules 를 추가하고 yarn 커맨드로 node_modules 를 설치 한다.
yarn3 설치 및 설정 링크# .yarnrc.yml yarnPath: .yarn/releases/yarn-4.3.1.cjs nodeLinker: node-modulessyntax error ~ missing 에러가 발생 하였는데 node 14 버전에서 yarn install 했기 때문이었다. Node 18 버전으로 높이니 해결 되었다.
추가로 yarn3 는 내부에 patch package 기능이 포함되어 있다.
관련 정보 링크
React Native 라이브러리 버전 호환성 맞추기
항상 이 과정이 가장 걱정이다. 이번에 이 작업을 수월하게 도와준다는 @rnx-kit/align-deps 라이브러리에 대해 알게 되었는데 아래 0.71 업데이트 관련 블로그 글을 참고 하였다.
참고로 나는 공식문서의 가이드를 읽고 작업을 진행 하였다.
React Native 0.71 업그레이드 하기 (ft. 업그레이드 방법)
공식문서 Guide 링크
작업을 간략하게 요약 해보자면
> yarn add @rnx-kit/align-deps --dev
> yarn rnx-align-deps --init app
> yarn rnx-align-deps --init library
스크립트 추가
// package.json
{
"scripts": {
"check-dependencies": "rnx-align-deps",
"fix-dependencies": "rnx-align-deps --write"
}
}
> yarn check-dependencies
> yarn fix-dependencies
> yarn맞는 순서인지 정확한 방법인지 확실하지는 않지만 잘 동작 했던것은 확실하다. 메인으로 다루고자 하는 주제가 아니기 때문에 자세한 설명은 생략하려한다.
현재 @rnx-kit/align-deps 가 제공하는 가장 최신 라이브러리 업데이트는 RN 0.72 버전 이다. 하지만 나는 이 기능을 꼭 쓰고싶었다... 때문에 0.66.3 -> 0.72 로 업데이트 이후에 0.72 -> 0.72.4 로 한번더 업데이트 하였다.
// package.json
{
"name": "...",
"version": "0.0.1",
"private": true,
"scripts": {
...
"check-dependencies": "rnx-align-deps",
"fix-dependencies": "rnx-align-deps --write"
},
"dependencies": {
...정상 동작 한다면 dependencies 버전에 변경 사항이 생긴다.
},
"devDependencies": {
"@rnx-kit/align-deps": "^2.5.0",
...
},
"engines": {
"node": ">=16"
},
"jest": {
"preset": "react-native"
},
"rnx-kit": {
"kitType": "app",
"alignDeps": {
"requirements": [
"react-native@0.72.0"
],
"capabilities": [
"babel-preset-react-native",
"core",
"core-android",
"core-ios",
"gestures",
"jest",
"modal",
"navigation/native",
"navigation/stack",
"netinfo",
"react",
"react-dom",
"react-test-renderer",
"safe-area",
"screens",
"svg",
"webview"
]
}
}
}Android
React native upgrade helper
본격적인 업데이트 시작이다. 항상 그러하듯 helper 를 켠다. 나는 이작업 직전에는 꼭 충분한 수면 및 휴식을 가지고 커피 한잔을 사오고 나서 최대한 컨디션이 좋은 상태로 야근이 가능한날에 하는것을 매우 추천한다. 하하하
React native upgrade helper 0.66.3 -> 0.72.0
우선 android 빌드를 성공하는 것이 목적이기 때문에 root 경로와 android/ 하위 경로의 수정사항 먼저 반영한다. 이제 뭐 더 설명이 필요한가... 화이팅 하시길!
왜 0.72.4 가 아니라 0.72 로 하냐고 물으신다면 @rnx-kit/align-deps 부분을 다시 읽어 보시길!
-
Troubleshooting
아마 가장 예상할수 없고 각자 마다 사용하는 라이브러리가 다르기 때문에 에러 내용도 다를 것이다.. 때문에 나는 단순 기록용으로 기억나는 몇가지만 기록해두겠다.-
goparrot_react-native-geometry-utils
해당 라이브러리 에서 타겟 보다 낮은 kotlinVersion 으로 빌드하고 있다는 에러 내용으로 기억한다. 라이브러리는 root 경로의 buildscript 를 참조 하는데 kotlin_version 을 찾지 못하길래 코드를 보니// goparrot_react-native-geometry-utils build.gradle def kotlin_version = rootProject.ext.has('kotlinVersion') ? rootProject.ext.get('kotlinVersion') : project.properties['GPRNGeometryUtils_kotlinVersion']// 내 프로젝트 build.gradle 수정 후 buildscript { ext { buildToolsVersion = "33.0.0" minSdkVersion = 28 compileSdkVersion = 34 targetSdkVersion = 34 ndkVersion = "19.0.5232133" kotlin_version = "1.8.0" // goparrot_react-native-geometry-utils 라이브러리 에서 사용하는 변수 kotlinVersion = "1.8.0" }순간 뭔가 싶겠지만 rootProject의 kotlinVersion 을 찾고 있지만 내 프로젝트에는 kotlin_version 으로 명시 되어있다. 변수명이 다른것.. 저 라이브러리 에서만 나는 버그 이므로 작성자 탓을 해본다. 주석과 함께 변수를 추가하였다.
참고로 RN cli 로 생성시 kotlin_version 이라는 이름으로 변수명이 생성되는걸로 알고있다. 아무튼 라이브러리 작성자도 완벽하지 않다. 항상 보다 넓은 범위에서 의심해보자
-
Could not find com.facebook.react:react-android:0.72.15
-
에러 내용
Could not determine the dependencies of task ':react-native-firebase_app:compileDebugAidl'. Could not resolve all task dependencies for configuration ':react-native-firebase_app:debugCompileClasspath'. Could not find com.facebook.react:react-android:0.72.15. Required by: project :react-native-firebase_app위와 같은 내용이 었는데, RN 버전 업데이트를 하면서 react-native 관련 최신 모듈을 참조하는 경로를 뭔가 다른곳으로 변경하는 내용이 있었던거 같은데 불안해서 몇가지 코드를 지우지 않고 남겨놨더니 문제가 되어 최신 react-android:0.72.15 를 찾지 못한다는 내용의 에러가 나온걸로 추정해 본다. android/build.gradle 수정으로 문제를 해결할수 있었다.
문제해결 참조 링크다음은 변경 후 build.gradle 코드이다 (일부 생략)
buildscript { ext { buildToolsVersion = "33.0.0" minSdkVersion = 28 compileSdkVersion = 34 targetSdkVersion = 34 ndkVersion = "19.0.5232133" kotlin_version = "1.8.0" // goparrot_react-native-geometry-utils 라이브러리 에서 사용하는 변수 kotlinVersion = "1.8.0" } repositories { google() mavenCentral() } dependencies { classpath("com.android.tools.build:gradle") classpath("com.facebook.react:react-native-gradle-plugin") classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version") classpath 'com.google.gms:google-services:4.4.2' } } allprojects { repositories { flatDir { dirs "${project(':unityLibrary').projectDir}/libs" } // kakao sdk maven { url 'https://devrepo.kakao.com/nexus/content/groups/public/' } } }
-
react-native-orientation
error: One of RECEIVER_EXPORTED or RECEIVER_NOT_EXPORTED should be specified when a receiver isn't being registered exclusively for system broadcasts
가장 당황스러웠던 에러인데 왜냐하면 RN 0.72.4 이상에서 이 문제가(Android 14 관련 이슈) 해결되었다고 하여 업데이트 한것인데 이러면 안되는데..? 하다가 프로젝트 에서 사용하는 라이브러리 중에서 해당 대응이 안되어 있다면 이 오류가 발생할수 있다는걸 알게되었다.
문제가 되었던 라이브러리는 react-native-orientation 이다. 아마 강제로 화면을 전환할때 쓰이는것 같다. (가로모드, 세로모드)
해결 방법은 react-native-orientation 라이브러리를 react-native-orientation-locker 라이브러리로 대체하는 것으로 결정하였다.
이름도 비슷하고 기능도 같다. 실제로 라이브러리 이름만 바뀌었고 코드는 한줄도 수정하지 않아도 됐다. 아마 같은 사람이 대응하기 귀찮아서 새로 만들게 아닐까 싶다.
-
0.72.0 to 0.72.4 업데이트
React native upgrade helper 0.72.0 -> 0.72.4
네이티브 코드의 변경사항은 없고 단순히 라이브러리의 버전만 올리는 내용밖에 없어 다행이라고 생각했다.
Android studio build
-
firebase 관련 라이브러리 버전 업데이트 ^16.x.x → ^20.1.0
firebase 설정은 autolinking 된다고 하여 기존에 남아있던 메뉴얼 linking 관련 코드를 주석처리 하였다.... // include ':react-native-firebase' // project(':react-native-firebase').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-firebase/android') // include ':@react-native-firebase_messaging' // project(':@react-native-firebase_messaging').projectDir = new File(rootProject.projectDir, './../node_modules/@react-native-firebase/messaging/android') // include ':@react-native-firebase_dynamic-links' // project(':@react-native-firebase_dynamic-links').projectDir = new File(rootProject.projectDir, './../node_modules/@react-native-firebase/dynamic-links/android') // include ':@react-native-firebase_app' // project(':@react-native-firebase_app').projectDir = new File(rootProject.projectDir, './../node_modules/@react-native-firebase/app/android') ... -
gradle 8 버전 이슈가 너무 많다. gradle 8.0.1 → gradle 7.6 다운그레이드 하였다.
-
특정 라이브러리 관련 에러들
-
../node_mobules/react-native-unity-view/android/build.gradle
maven 을 찾을수 없다는 에러, maven 을 maven-publish 로 수정 하였다.``` - apply plugin: 'maven' <-- 삭제 + apply plugin: 'maven-publish' ``` -
특정 라이브러리 에서 compile 을 찾을수 없다는 에러
root/android/build.gradle 에서 예외 처리가 가능한것 같아 수정함// root/android/build.gradle (라이브러리 내부 아님!! 프로젝트 build.gradle 임) ... subprojects { if (project['name'] == 'asmadsen_react-native-unity-view') { project.configurations { compile {} } } } ... -
mavenDeployer 관련한 에러
위에서 maven 을 주석처리해서 그런듯 해결방법에 installArchives 통으로 주석처리해도 기능에 문제 없다는 글을봄. 주석처리 완료// ../node_mobules/react-native-unity-view/android/build.gradle ... // task installArchives(type: Upload) { // configuration = configurations.archives // repositories.mavenDeployer { // // Deploy to react-native-event-bridge/maven, ready to publish to npm // repository url: "file://${projectDir}/../android/maven" // configureReactNativePom pom // } // } ...해당 라이브러리 의존성을 없애고 싶었으나 아직은 대체할만한 라이브러리나 시간, 개발적 리소스가 모두 부족하여 유지 하는 방향으로 수정하였다. 더이상 유지할수 없을다면 직접 만들어야 하는 상황이 올지도...
- 빌드 성공!
모두 빌드에 성공하길 바란다 화아팅
iOS
React native upgrade helper
아까와 동일한 링크이다. 이번에는 ios 폴더 하위 모든 내용을 수정 하였다.
React native upgrade helper 0.66.3 -> 0.72.4
라이브러리 버전 셋팅을 안드로이드 빌드 전에 완료했기 대문에 0.72.4 로 바로 업데이트 하였다.
pod install
-
pod install 전에 Pods, Podfile.lock 을 삭제하고 설치하도록 하자.
cd ios && rm -rf Pods && rm -f Podfile.lock && npx pod-install && cd ..참고로 npx react-native clean 이라는 명렁어를 활용하여 clean 하는것을 추천한다. 단!!! a 를 누르고 엔터를 치면 rn 관련된 모든 요소를 clean 해버린다.. 조심하길 바람.
-
clean 후에 pod install 실행 하였으나 역시 한번에 성공하지를 못한다.
[!] An error occurred while processing the post-install hook of the Podfile. undefined method `new_file' for #<Xcodeproj::Project::Object::PBXFileReference:0x0000000155eac238> ../node_modules/react-native/scripts/cocoapods/privacy_manifest_utils.rb:74:in `ensure_reference' ../node_modules/react-native/scripts/cocoapods/privacy_manifest_utils.rb:48:in `block in add_aggregated_privacy_manifest' ../node_modules/react-native/scripts/cocoapods/privacy_manifest_utils.rb:47:in `each' ../node_modules/react-native/scripts/cocoapods/privacy_manifest_utils.rb:47:in `add_aggregated_privacy_manifest' ../node_modules/react-native/scripts/react_native_pods.rb:259:in `react_native_post_install' ../ios/Podfile:87:in `block (3 levels) in from_ruby'new_file 메서드는 무엇이고 PBXFileReference 은 또 무엇일까.. 로그에 경로와 실행에 실패한 메서드명이 명확히 명시 되어 있는 node_modules 를 파헤쳐보자
-
우선 Xcode 15.4 이상 부터는 pod version 이 1.13.1 이상 이어야 한다는 동료의 말을 듣고 pod update 하였다. 1.13.0 → 1.15.2 업데이트! (해결은 안됨)
-
로그의 경로대로 가보자 (../node_modules/react-native/scripts/cocoapods/privacy_manifest_utils.rb)
def self.ensure_reference(file_path, user_project, target) reference_exists = target.resources_build_phase.files_references.any? { |file_ref| file_ref.path.end_with? "PrivacyInfo.xcprivacy" } unless reference_exists # We try to find the main group, but if it doesn't exist, we default to adding the file to the project root – both work file_root = user_project.root_object.main_group.children.first { |group| group.name == target.name } || user_project file_ref = file_root.new_file(file_path) build_file = target.resources_build_phase.add_file_reference(file_ref, true) end end -
ensure_reference 내부에 에러 키워드였던 new_file 이 존재한다. 코드를 보아하니 file_root 경로를 제대로 참조 하지 못하는것 같다.
-
RN gitRepo Issue 에 PBXFileReference 키워드로 검색 하여 비슷한 내용 찾을수 있었다. 전부 수정하지는 않았고 file_root 부분만 수정하였다. 링크
def self.ensure_reference(file_path, user_project, target) reference_exists = target.resources_build_phase.files_references.any? { |file_ref| file_ref.path.end_with? "PrivacyInfo.xcprivacy" } unless reference_exists # We try to find the main group, but if it doesn't exist, we default to adding the file to the project root – both work file_root = user_project.root_object.main_group.children.find { |group| group.class == Xcodeproj::Project::Object::PBXGroup && (group.name == target.name || group.path == target.name) } || user_project file_ref = file_root.new_file(file_path) build_file = target.resources_build_phase.add_file_reference(file_ref, true) end end -
pod install 성공!
Xcode build
우선 당연히 에러가 난다
-
Showing Recent Errors Only
../main.jsbundle does not exist. This must be a bug with React Native, please report it here: https://github.com/facebook/react-native/issues네이티브 빌드라서 index.bundle 없다는 에러가 난다. main.jsbundle 파일만 만들어주면 해결된다고 하여 package.json 에 script 를 추가함
"scripts": { ... "ios:bundle": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'", ... }, -
yarn ios:bundle 에러
yarn ios:bundle error Unable to resolve module missing-asset-registry-path from ../origin/src/assets/img/splash.gif: missing-asset-registry-path could not be found within the project or in these directories: node_modules > 1 | GIF89a��ooo___�����Ͽ�����???������OOO@@@������ poo���///000���```PPP���������������B??# ROOb__��߁���roorpp#���400������3//C@@RPPc``���������ggg*((xwwXVV777바로 yarn ios:bundle script 실행 하였더니 아래 에러가 발생한다. 특수 문자 범벅인 에러 내용에 조금 당황했지만 metro.config.js 코드의 수정으로 금방 해결 할수 있었다. 관련 링크
// 수정 전 metro.config.js const { getDefaultConfig } = require("metro-config"); module.exports = (async () => { const { resolver: { sourceExts, assetExts } } = await getDefaultConfig(); return { transformer: { babelTransformerPath: require.resolve("react-native-svg-transformer") }, resolver: { assetExts: assetExts.filter(ext => ext !== "svg"), sourceExts: [...sourceExts, "svg"] } }; })();// 수정 후 metro.config.js const {getDefaultConfig, mergeConfig} = require('@react-native/metro-config'); const defaultConfig = getDefaultConfig(__dirname); const { resolver: {sourceExts, assetExts}, } = defaultConfig; const config = { transformer: { babelTransformerPath: require.resolve('react-native-svg-transformer'), }, resolver: { assetExts: assetExts.filter(ext => ext !== 'svg'), sourceExts: [...sourceExts, 'svg'], }, }; module.exports = mergeConfig(defaultConfig, config);사실 처음에 RN 업데이트 helper 를 잘 따라 했으면 이 에러는 볼수 없다. 설마 이게 문제가 되겠어~ 하고 넘어갔는데 야무지게 걸려버렸다.
-
Xcode 빌드 성공!
참고로 네이티브 빌드를 한다는 것은 Xcode, Android Studio 에서 빌드한다는 의미이다. yarn ios, yarn android 빌드 이전에 먼저 Native 에서 빌드를 성공하고 디버깅 하는 것이 개인적으로는 훨씬 수월한것 같다.
Metro Server Issue
Xcode 빌드는 성공! 하지만 Metro 서버랑 연결이 안된다.
-
이유는 yarn ios 빌드가 Release 빌드가 되고있어서 라고 생각되었다.
-
Xocde → Product → Scheme → EditScheme 창이 열리면
-
Run → Info 에서 Build configurataion 을 Release → Debug 로 수정한다.
-
그럼 git 에서 Projectname.xcscheme 코드가 수정된것을 볼수 있다.
<LaunchAction buildConfiguration = "Debug" ...> -
그런다음 yarn start 로 metro 서버를 실행하고 “i” 를 입력하여 ios 빌드 하였다.
-
아마 0.73.x 버전에서 해결된걸로 알고있는데 크게 불편할것도 없기 때문에 당장은 yarn start 빌드 하는것으로 결정하였다. (그냥 rn cli 를 뜯어고쳐볼까 하다가 그냥 잠깐보고 지쳐버렸다 ㅎㅎ.. 빠른포기)
-
빌드 성공
React Native Bugfix (webView)
RN webView 에 문제가 있어서 수정하였다.
간략하게 정리하면 업데이트(v11 -> v13) 이전 WebView 는 onNavigationStateChange 이벤트가 발생하면 onLoadStart 이벤트는 발생하지 않았었다.
하지만 이게 오히려 버그였고 업데이트 되면서 해당 버그가 수정되었다.
<WebView
...
onLoadStart={() => setLoading(true)}
onNavigationStateChange={onNavigationStateChange}
...
/>때문에 onNavigationStateChange 이벤트 발생시에도 loading state 가 true 가 되어 로딩창이 사라지지 않는 버그가 발생했다.
그래서 onLoadStart 라는 함수를 따로 생성하여 onNavigationStateChange 이벤트가 발생했는지 대한 flag 값을 가져와 setLoading 할지 말지 처리하여 수정하였다.
번들링
해당 버그 수정을 마지막으로 yarn ios, yarn android 빌드 성공하였고 aab, apk, ipa 파일로 번들링 되는것을 확인하였다. 다행스럽게도 한번에 성공 함.
업데이트 후 프로젝트 주요환경
Mac
- MacBook Pro 14 (Apple M1 Pro)
ENV
- Node : v18.18.0
- ReactNative : 0.72.4
- React : 18.2.0
- yarn : 4.3.1
- Unity : 2019.3 이상
Android
- minSdkVersion : 28
- compileSdkVersion : 34
- targetSdkVersion : 34
- Android Studio : Android Studio Hedgehog | 2023.1.1 Patch
- gradle : 7.6
iOS
- deployment target: 12.4
- Xcode : Version 15.4 (15F31d)
4. 후기
-
걱정 했던 것보다는 금방 해결됐다. 몇몇 사람들이 그냥 rn cli 로 0.7x 프로젝트를 새로 만들고 코드를 옮기는 것이 더 쉬울거라고 겁을 줬는데 그정도로 어렵지는 않았던것 같다.
-
이전 회사에서도 겪어봤고, 사실 그때가 훨씬 고난도의 작업이었다고 생각한다. (0.5x 에서 0.69.x 이었던걸로 기억함) 그때는 라이브러리도 갯수도 거의 3배 정도였고, expo 라이브러리도 사용하고있어서 expo 업데이트랑 의존성도 신경쓰면서 js → ts 포매팅 작업까지 같이했었다.
-
아쉬운건 오래된 라이브러리의 의존성을 완전히 제거하고 싶었으나 그러지 못했다.
-
단순히 유지보수에 하는 앱 이라서 크게 고칠 엄두가 나지 않았고 내부적으로 시간적인 리소스도 허용되지 않을것이 분명하였다. 무엇보다 의존성을 떼어내려면 RN-Unity 연동 방식 자체를 뒤엎어야 하기 때문에 Unity Side 작업이 추가된다. 괜히 잘되는걸 건드렸다가 안되는 상황이 걱정도 되고 우선 RN-Unity 는 이대로 유지.
-
언제쯤 블로그에 글쓰는게 익숙해질까~
