ReactNative와 프로젝트 의존성들을 쉽게 upgrade하는 법(번역 + 의견)

프로젝트 라이브러리들을 최신으로 유지하는것의 중요성은 알고 있지만 updgrade를 성공적으로 적용하는 것의 어려움은 제때 upgrade하는 것의 장애물이 됩니다

 

안드로이드와 ios와 같이 한 군데 이상의 플랫폼을 제공하고 있다면 가끔 그 노력은 두배 이상이 듭니다

 

다행히도, 이러한 과정을 단순화 시켜주는 새로운 도구들이 출시되었습니다

 

Microsoft는 올리고 싶은 ReactNative 버전에 따라 어떤 라이브러리들이 업데이트 되어야 하는지 체크해주는  align-deps 를 출시하였습니다. align-deps는 잘못된 버전으로 인하여 일어나는 크래시들을 고치거나 프로젝트 라이브러리들의 이슈와 readme들을 찾아다녀야 하는 많은 수고로움을 덜어줍니다

 

ReactNativeCommuity는 이전 RN 버전과 올리고 싶은 RN 버전의 차이점을 체크해주는 RN Upgrade Helper 를 출시하였습니다

Android에서 gradle과 java 파일들 혹은 ios에서 podfile과 native파일들의 차이점을 찾는데 굉장히 유용했습니다

 

다음으로, ReactNative와 프로젝트의 의존성들을 upgrade하는데 새로운 도구들이 어떻게 쓰이는지 살펴보겠습니다.

다음 단락에서 upgrade를 하는데 쓸만한 command들과 utilitiy들을 확인할 수 있습니다

 

🥳 Let’s make the upgrade easy!!

콘솔에 아래의 명령어를 치세요 (0.71이 upgrade하고 싶은 RN 버전): 

 

npx @rnx-kit/align-deps --requirements react-native@0.71

 

RN 버전에 맞지 않은 의존성들이 버전과 함께 아래와 같이 보이게 됩니다

 

 

변경 내용을 적용하려면 아래와 같은 command를 사용하세요

npx @rnx-kit/align-deps --requirements react-native@0.71 --write

 

 

이제, CirecleCi와 같은 Ci도구들을 사용하여 디바이스들에서 체크하고 Android와 Ios에 development와 release빌드를 만드세요

 

문제가 발생한다면 ReactNative Helper파일을 체크하고 필요한 것들을 update 하세요

 

아래 단락에 사용하는 도구들에 좀 더 많은 정보가 있습니다 👇

🛠 Useful utilities

🟡 Use align-deps to make easier the upgrade of our dependencies

https://microsoft.github.io/rnx-kit/docs/tools/align-deps => RN을 updgrade해야할때 어떤 의존성들이 업데이트 되어야 하는지 체크해준다

🟡 Use npx depcheck and uninstall unused libraries

https://www.npmjs.com/package/depcheck => package.json에서 사용하지 않고 의존성을 잃어버린 것들에 대한 정보를 제공해준다

🟡 Check React Native Upgrade Helper version changes comparison

 https://react-native-community.github.io/upgrade-helper/   => 오래된 RN 버전과 upgrade해야하는 RN버전의 코드 차이점을 보여준다 
=> 개인적으로 유용하게 사용했던 도구, 시간이 없어 끝맺음을 못지었던게 매우 아쉬웠다

⌨️ Useful console commands

프로젝트 빌드 시 무슨무슨 크래시가 발생한다면 아래 명령어들을 통해 캐시를 ✨지워보자✨ : 

1. Clear watchman watches:
   watchman watch-del-all
2. Remove the cache:
   rm -rf /tmp/metro-*
3. Delete node_modules:
   rm -rf node_modules
4. Install project libraries:
   yarn install
5. Clean & install project pods:
   cd ios && rm -rf Pods Podfile.lock && pod install
6. Reset Metro’s cache:
   yarn start --reset-cache
7. When applying new changes on Android gradle files, it deletes the build folder:
   cd android && ./gradlew clean

 

 

 

 

 

출처 : https://medium.com/game-development-stuff/how-to-easily-upgrade-react-native-and-the-project-dependencies-6af458ada81c

🔝 How to easily upgrade React Native and the project dependencies