[RN] 인생이 지루하다면 react-native upgrade (0.66.3 -> 0.72.5)

* 업그레이드 방법에 대해 깊게 다루고 있지 않습니다. 업그레이드를 고민 중이거나 낮은 rn 버전을 사용하는 분들께 도움이 되었으면 해서 작성하는 회고글입니다.

Histroy

 회사에서 사용하던 rn 버전은 0.66.3이다. 오래된 버전으로 인한 이슈가 잔잔하게 있었지만 먼저 해야 할 일들을 쳐내는라 급한 불만 끄면서 업그레이드를 미루고 있었는데 이제는 정말 올려야 할 것 같아 업그레이드하기로 결심했다. '이제는 정말 올려야'했던 이유는 이렇다.

1. xcode 이슈
    특정 xcode 버전에서 버그를 발생시키는 코드들이 존재한다. 예를 들어 rn 0.69.0 이하 버전에 xcode 14.3 이상 버전을 사용한다면 yoga.cpp에서 에러가 발생한다. 유사한 이슈가 몇 개 더 존재하지만 보통 xcode에서 코드 한두 줄 수정해 주면 해결된다. 하지만 pod이 재설치될 때 다시 찾아가서 수정해줘야 하는 경우가 있으며, 결정적으로 xcode15 버전이 올라오면서 빌드 에러 케이스가 더 많이 늘었다.
   react-native/issue를 들러보면 xcode와 관련된 이슈 대부분 'react native 버전을 올려라'는 답변을 받는 것처럼 xcode와의 충돌을 피하려면 rn 버전을 올리는 게 여러모로 어려운 상황을 피할 수 있을 것이다.
2. 라이브러리
    최근 Sentry를 설치하려고 문서를 찾아 설치 명령어를 긁어 복사하다가 그 아래 심상치 않은 문구를 발견했다.
   
   0.68 이하는 위 명령어 대신 Manual Config을 통해 설치해야 한다는 말인데 프로젝트 내 ios와 android 폴더를 돌아다니며 pod 혹은 build.gradle 어딘가를 조져 수동으로 설치해야 한다는 것이다. (물론 manual 문서를 잘 따랐다면 이론상 동작하는데 문제없겠지만 추후에 rn 업그레이드를 한다면 어려움을 겪을 수 있는데, 이에 관해서는 후술하겠다.)
   오래된 rn 버전을 위한 설치방법이나 주의사항을 문서로 제공해 주는 라이브러리도 있지만 그렇지 않은 경우 빌드 단계에서 디버깅에 시간을 꽤나 쓴 후에야 원인을 알 수 있다. 보통 라이브러리를 다운그레이드하는 식으로 해결되는 경우지만 패키지 관리가 어려워지고 pod install 혹은 update시 잔잔한 문제가 생길 여지도 있다.

 

Progress

 단순히 package.json에 달려가 버전을 바꾸면 되는 간단한 문제는 아니었다. react-native-helper를 참고해서 진행했는데 덕분에 시간을 많이 아꼈다. 현재 사용 중인 라이브러리를 위해 추가해 둔 코드는 건들지 않으면서 변경사항을 적용해야 하기 때문에 실수하기 좋은 환경이라 생각했고 0.72.5 버전의 test프로젝트를 하나 만들어 helper와 같이 놓고 작업했다. helper에 보이는 코드를 다 옮기기 -> 빌드 올리기 -> 에러 확인하기 -> helper에 빠트린 게 있나 확인하기 -> 에러 검색해 보기를 반복하다 보면 끝!

Tip

rn 업그레이드하기 전 누군가 미리 말해줬다면 이틀은 아낄 수 있었던 미세팁..

1. native에 수동 설치된 라이브러리 파악
   History(2)에서 언급했던 내용이다. 라이브러리를 수동으로 설치하기 위해 AppDelegate 혹은 build.gradle과 같은 파일에 코드를 추가한 경우가 있을 텐데, 기존 문법이 업그레이드하는 버전에서 사용하지 못하거나 새 rn 버전에서 해당 라이브러리의 버전을 아예 지원하지 않는 등 어려운 문제를 불러올 확률이 매우 높다. 단순히 설치의 역순으로 문서보고 하나씩 지워가면 되지 않을까 생각했지만  설치하면서 native에 추가된 코드 + 사용하면서 생기는 버그 해결하려고 추가한 코드를 역으로 추적해 깔끔하게 덜어내기가 쉬운 일은 아니었다. 결론은 
   - 라이브러리 설치 & 이슈로 인한 native 코드 수정 시 commit 혹은 주석 등으로 추적에 용이하도록 만들어두는 게 추후 rn 업그레이드를 위해 좋다.
   - 해당 라이브러리를 쓰면서 rn 업데이트를 한 사람이면 대부분 공통적인 문제를 겪게 되기 때문에 라이브러리 github/issue에서 대부분 해결된다.
   
   +) 디버깅이 어렵고 업그레이드 후 잘 살펴봐야 하는 라이브러리
   - airbridge-react-native-sdk (극악)
   - react-native-splash-screen
   - react-native-seoul/kakao-login
   - react-native-seoul/naver-login
2. Cache 정리하기
   앞서 말한 것처럼 helper에서 변경사항을 다 떠왔다 싶으면 빌드 - 디버깅을 반복하는데 이 과정에서 건들게 되는 파일이 많고 빌드도 많이 올리다 보니 이미 해결됐지만 cache가 에러를 붙들고 있는 경우가 있다. 온갖 방법을 써봐도 해결 안 되는 에러가 있다면 cache 비우고 새로 빌드 올린 다음 물 한잔하고 오는 것이 빠른 방법일 수 있다. 종일 붙들고 머리 쥐어짜다가 퇴근 전 cache clean 후  빌드 올리면 아무 일 없다는 듯이 잘될 때의 허망함.....
   안드로이드에서 이런 문제를 겪은 적은 거의 없는데 pod/xcode 조합이 유독 챙겨둔 cache 에러가 많다.
   

   // xcode cache clear
   rm -rf ~/Library/Developer/Xcode/DerivedData/*
   
   //pod cache clear
   pod.lock 삭제
   && 
   Pod cache clean —all

   
   
   
3. script 확인하기
   기존 버전에서 rn이 해결하지 못했던 이슈들을 해결하려고 빌드 단계에서 실행하는 script가 있다. 우리 프로젝트 버전의 경우 <TextInput> 에서 한글이 깨지는 이슈가 있었는데 이를 해결하고자 c++ 코드 파일과 함께 빌드 시 항상 이 파일을 실행하도록 하는 "postinstall" script가 생성되어 있었다. 이 script 덕분인지 여태 문제가 없던 터라 의식하지 않았는데 rn 버전이 올라버리면서 아예 문법이 맞지 않는 script가 빌드에 간섭해 충돌이 나고 있던 것이다. 이렇게 빌드 단계에 실행되는 script의 어려운 점은 시뮬레이터에서 앱을 돌릴 때는 전혀 문제가 없다가 testFlight 혹은 ipa로 빌드를 올린 상태에서만 발견된다. 로컬에 에러를 찍을 수 없어서 디버깅이 막막했는데 Sentry 덕분에 캐치할 수 있었다. 기존에 에러 해결 혹은 모종의 이유로 별도 작성되어 native에 추가되는 코드가 있다면 유의하자.
   +) 업그레이드 후 빌드 성공해서 앱이 켜진다면 Sentry 같은 모니터링 툴을 꼭 설치하자..!

Insight

 업그레이드하기로 결심하고 잠깐 찾아봤는데 업그레이드를 도와주는 라이브러리도 있는 듯했다. 깔끔하게 업데이트를 잘 해내줄까 믿지 못했던 것도 있지만 직접 파일을 찾아다니면서 변경사항을 보고 싶었다.
 항상 native 코드를 수정해야 할 때마다 이 파일은 뭐 하는 파일이며 무슨 내용의 코드이길래 여기에 들어가는 건지 오리무중인 상태로 집어넣기만 했다. 변명할 만한 게 거기서 유심히 본다고 c++, java 코드를 이해했다 할 수 없을 테고 코드 집어넣고 앱이 동작하는데 거기에 더 붙어있을 여력이 없었다. 그런 의미로 직접 업그레이드하면서 ios/android 폴더 여기저기 돌아다니고 파일을 뒤적이며 코드를 교체하는 게 꽤 유익한 시간이었다. 여전히 어떤 문법으로 쓰였는지는 어려워서 모르지만 이 파일이 어떤 역할을 하는 중인지 느낌(?)이 오기도 하고, 어떤 설정들을 하고 있는지 등등 많이 배울 수 있었다. 특히 native 코드 수정이 필요할 때마다 잘 모르는 무언가를 손댄다는 불안함이 엄습했었는데 점점 낯이 익으면서 app.tsx 드나들듯 가볍게 접근할 수 있게 된 게 가장 큰 소득이었다 생각한다.