우선 이번 프로젝트의 react native version은 0.61.5이고, 0.63.4 버전으로 업그레이드할 것이다.
업데이트하게 된 계기는... 0.61.5 버전에서 ios 이미지들이 보이지 않는 이슈가 존재했는데, 대안으로 react-native-fix-image를 사용했다. 하지만 해당 버그가 해결된 버전이 나온 터라 언제까지 이 라이브러리에 의존할 수 없었다.
최근 들어서 이 프로젝트들을 하나씩 버전을 올리고 있다.
벌써 3번째...
앞에 두번째 모두 다음 사이트를 참고했다. react native upgrade helper
Upgrade React Native applications
react-native-community.github.io
그러다 보니 이 부분까지 바꿔줘야 하는 건가?라는 생각이 많이 들었다. 하지만 그 부분을 하나하나 테스트해보지 못하는 게 현실...
그래서 이번에는 다른 방법이 없을까 생각하면서 자료를 찾다가 cli를 통한 버전 업그레이드 방법이 생각났다.
( 이전에 사용하지 않았던 이유는 뭔지 모를 불안감 때문이었다. )
reactnative.dev/docs/upgrading
Upgrading to new React Native versions · React Native
Upgrading to new versions of React Native will give you access to more APIs, views, developer tools and other goodies. Upgrading requires a small amount of effort, but we try to make it straightforward for you.
reactnative.dev
1. react, react-native 버전 업그레이드
첫번째로 package.json에 있는 react, react-native 버전을 올리고자 하는 버전으로 설정해야 한다.
yarn add react-native@{{REACT_NATIVE_UPGRADE_VERSION}}
yarn add react@{{REACT_UPGRADE_VERSION}}
본인의 경우 기존 react와 react-native 버전은 아래와 같았다.
"react": "16.9.0",
"react-native": "0.61.5",
업그레이드할 버전은 아래와 같다.
"react": "16.13.1",
"react-native": "0.63.4",
2. npx react-native upgrade
두 번째로 진행한 부분은 npx react-native upgrade 명령어를 통해 변경된 사항을 적용시키는 것이다.
해당 명령어를 수행함으로써 새로운 파일이 있으면 생성되고, 동일한 파일은 건너뛰게 된다.
또한 기존 프로젝트와 업데이트할 버전의 템플릿이 충돌되는 경우 git conflict와 같이 파일을 유지하거나 덮어쓸 수 있게 된다.
3. pod install 오류 해결
과정상 여기까지 하고 실행하면 될 것 같아서, 큰 기대를 하고 실행을 해보았다. 역시나 pod install에서 오류가 났었다.
위 오류는 jscallinvoker가 해당 버전에서 duplicate 되면서 찾을 수 없다는 에러였는데 PodFile에서 간단하게 해결할 수 있었다.
기존 pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon" 구문을 다음과 같이 경로를 재지정해주었다. pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon"
pod 'ReactCommon/jscallinvoker', :path => "../node_modules/react-native/ReactCommon" (X)
pod 'React-callinvoker', :path => "../node_modules/react-native/ReactCommon/callinvoker" (O)
4. retry...
위 오류를 해결하고 다시 pod install을 진행해보았더니 무수히 많은 에러와 함께 실행되지 않았다.
이 부분은 이전 버전 업데이트할 당시에 많이 봐왔던 에러들이었다. Podfile-lock과 관련된 에러였다.
package.json, package-lock.json, Podfile 등을 지우는 스크립트를 지정하여 사용했었는데 Podfile-lock은 빠져있었다. package-lock이나 Podfile.lock과 관련돼서 공부가 더 필요하겠지만 우선 간단히 정리했던 내용이 있으니 링크를 참고하면 좋을 것 같다.
여기까지 진행하면 ios에서는 잘 실행되었다. 물론 위에서 언급했던 react-native-fix-image를 이제는 더이상 사용하지 않아도 이미지 이슈는 해결되었다.
5. Android error ( code-push error )
하지만 이번에는 안드로이드에서 오류가 발생했다.
프로젝트에서 code-push를 사용하고 있었는데 관련 오류였다.
-
What went wrong: Could not determine the dependencies of task ':app:compileDebugJavaWithJavac'.
Could not resolve all task dependencies for configuration ':app:debugCompileClasspath'. Could not resolve project :react-native-code-push. Required by: project :app Unable to find a matching configuration of project :react-native-code-push:
-
None of the consumable configurations have attributes.
react-native-code-push의 config 매칭을 할 수 없다... 는 에러인데 마찬가지로 이전 노가다로 버전을 올렸을 때 겪었던 이슈였다.
android 디렉토리에서 settings.gradle에 다음 구문을 추가하면 된다.
include ':app', ':react-native-code-push'
project(':react-native-code-push').projectDir =file('../node_modules/react-native-code-push/android/app')혹시라도 위 문제가 아니라 버전을 올렸는데 갑자기 code-push 관련 오류가 보이는 것 같다면 링크를 확인해보면 code-push버전과 react-native-version이 매칭 되는지 확인해보길 바란다.
3번째 업그레이드는 비교적 수월하게 진행한 것 같다. 이전에 정말 엄청나게 삽질하면서 했던 일들이 정말 당황스러울 수 있는 상황에서도 침착함을 유지해줄 수 있었던 것 같았다.
이제 react-native version 편하게 올리자.