React Native 0.73 업그레이드 도전기

𝐲𝐨𝐮𝐧𝐠𝐡𝐲𝐮𝐧·2024년 3월 31일
reactnative

React-Native

목록 보기
1/1
post-thumbnail

배경

팀 프로젝트 버전이 너무 낮아 플레이스토어에 못올리는 상황이 발생했다.
image

최신 Android 버전을 타겟팅하기 위해서는 앱 내의 SDK 버전을 올려야 하는데, 이를 지원하려면 React-Native 버전이 올라야 했다

RN 버전에 따른 SDK 버전 호환성을 확인하는 방법은
공식문서 ChangeLog에서 SDK를 검색하면 알 수 있다. (하단 이미지 참조)

image (0.73 버전은 SDK 34까지 지원한다는 내용)

iOS는 최소 iOS 버전만 올려주면 되지만, RN은 Android, iOS 두개의 결과물이 생성되므로 Android 버전을 올리고 싶다면 업그레이드가 필수적이며, 최신 MacOS에서 iOS 빌드가 안되는 경우가 있긴 해서... 긍정적으로 생각해야한다.

도움받은 방법들

  1. @rnx-kit/align-deps
    package dependency를 특정 React Native 버전에 맞춰주는 명령어다.

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

  2. React Native Upgrade Helper 링크
    React Native 코드 변경점을 보여주는 사이트이다. 해본 경험상 일단 마구잡이로 하지말고 iOS, Android 구분지어서 진행하는 것이 속 편했다. 또한 주의점이 있는데, Name과 Package명을 분명히 입력했음에도 불구하고 복붙하다보니 'RnDiffApp'이라는 문자열이 프로젝트 파일에 들어있었다. 에러를 발생시키는 원인 이므로 붙여넣을때 주의 해야 한다.

  3. 새로 React Native 프로젝트 만들기
    잘 안될때는 역시나 새로 만드는 편이 좋다.
    새로 만들어서 빌드 한 후 에러가 나지 않는다면 내 PC 환경은 문제가 없는 것이며, 열심히 package들을 설치해가면서 범인을 찾으면 된다.

    npx react-native@latest init 프로젝트명

  4. 초기화
    cache가 쌓이거나 빌드 결과물들이 남는다면 에러를 발생시킬 수 있다. 틈틈히 삭제하고 빌드를 해보자.

    # React Native
npx react-native start --reset-cache # Metro 서버 캐시 초기화

#Android
./gradlew clean # 빌드 시 생성된 파일들 초기화

#iOS
Xcode 에서 CMD + SHIFT + K
rm -rf ~/Library/Developer/Xcode/DerivedData # 빌드시 생성된 파일들 초기화
rm -rf ./ios/Podfile.lock && rm -rf ./ios/Pods && pod install # Pods 초기화(iOS 폴더 안에서 진행)

각종 오류 해결법

iOS

Hot Reloading 안되는 이슈

  • 코드 저장을 하더라도 Simulator 에 반영이 안되는 경우가 있다.

    rm -rf .git/index.lock

  • 이 방법도 안될시
    1. XCode 실행, 프로젝트 열기

    1. Command + Shift + ,
    2. Build configuration을 Debug로 수정
    3. 닫기
    4. Command + shift + K 눌러서 빌드 폴더 초기화

cocoapods 설치시 file not found #include "ruby/config.h" 에러

  • 여기에서 Command Line Tools 설치 Apple Developer Downloads
  • sudo rm -rf /Library/Developer/CommandLineTools
  • 다운받은 Command Line Tools 설치
  • sudo xcode-select --switch /Library/Developer/CommandLineTools
  • [sudo] gem install [--user-install] cocoapods
  • sudo xcode-select --switch /Applications/Xcode.app/Contents/Developer

No Permission handler detected

  • React Native 0.72 버전부터 react-native-permissions 설정이 바뀌었다.

  • /ios/Podfile 에 해당 내용 추가

    def node_require(script)
  require Pod::Executable.execute_command('node', ['-p',
    "require.resolve(
      '#{script}',
      {paths: [process.argv[1]]},
    )", __dir__]).strip
end

node_require('react-native/scripts/react_native_pods.rb')
node_require('react-native-permissions/scripts/setup.rb')

platform :ios, min_ios_version_supported
prepare_react_native_project!

# ⬇️ uncomment wanted permissions
setup_permissions([
  # 'AppTrackingTransparency',
  # 'Bluetooth',
  # 'Calendars',
  # 'CalendarsWriteOnly',
  'Camera',
  # 'Contacts',
  # 'FaceID',
  # 'LocationAccuracy',
  # 'LocationAlways',
  # 'LocationWhenInUse',
  # 'MediaLibrary',
  # 'Microphone',
  # 'Motion',
  # 'Notifications',
  # 'PhotoLibrary',
  # 'PhotoLibraryAddOnly',
  # 'Reminders',
  # 'Siri',
  # 'SpeechRecognition',
  # 'StoreKit',
])



ViewPropTypes will be removed from React Native, along with all other PropTypes

  1. patch-package , deprecated-react-native-prop-types 패키지 설치

    yarn add deprecated-react-native-prop-types patch-package

  2. ./node_modules/react-native/index.js 파일 수정

    해당 내용을 하단의 코드로 수정

    get ColorPropType(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').ColorPropType;
},

get EdgeInsetsPropType(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').EdgeInsetsPropType;
},

get PointPropType(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').PointPropType;
},

get ViewPropTypes(): $FlowFixMe {
  return require('deprecated-react-native-prop-types').ViewPropTypes;
},

  3. patch 파일 생성

    yarn patch-package react-native

    package.json에 추가 -> 패키지 설치후 자동으로 패치파일이 적용된다.

    // package.json
{
  ...
  "scripts": {
  	"postinstall": "patch-package"
  },
 ...
}




배포시 Local 이미지를 가져오지 못하는 이슈

  1. bundle 명령어 수정
    • —assets-dest + 폴더 옵션 추가
    • jsbundle 결과물 폴더와 경로가 같아야함.
    // package.json
{
     "scripts" :{
         "ios:build": "react-native bundle --entry-file='index.js' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios' --minify --assets-dest ./ios",
     }
}
  2. Xcode 설정 수정
    1번의 명령어를 입력하고 나온 assets폴더를 Build Phases -> Copy Bundle Resources 에 추가해야한다.



react-native-kakao-login 패키지 설치시 튕기는 이슈

  • AppeDelegate.mm에 해당 내용 추가

    #import <RNKakaoLogins.h>

- (BOOL)application:(UIApplication *)app
     openURL:(NSURL *)url
     options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options {
 if([RNKakaoLogins isKakaoTalkLoginUrl:url]) {
    return [RNKakaoLogins handleOpenUrl: url];
 }

 return NO;
}



Android

Android Gradle plugin requires Java 17 to run. You are currently using Java 11

  • 17 버전이 필요한데 11버전을 사용하고 있다는 의미이다.
  • Android Studio -> Settings -> Build, Execution, Deployment -> Build Tools -> Gradle 로 이동하여 버전을 선택해주고, 없으면 다운로드 받으면 된다.
  • 이 방법이 먹히지 않는경우
    - https://www.oracle.com/java/technologies/javase/jdk17-archive-downloads.html 여기로 이동해서 다운받고 jdk 설치
    - 터미널에 /usr/libexec/java_home -V 입력하여 설치된 자바 버전 확인
    - .zshrc 파일로 이동 (code ~/.zshrc )
    - export JAVA_HOME=$(/usr/libexec/java_home -v '원하는버전') 입력 후 저장
    - source ~/.zshrc - 적용
    - 이 방법도 안되면 java폴더를 들어가서 다른 버전을 삭제하고 하면 잘된다.





Plugin with id 'com.google.gms.google-services' not found.

  • build.gradle 파일에 의존성 추가


마무리

React Native 업그레이드 작업은 언제 해도 힘들다.
나의 컴퓨터 환경이 조금이라도 바뀌면 빌드가 바로 깨지고 그 원인을 정확히 알려주지도 않는다.
그래도 힘든 작업인 만큼 해결했을 때에 기쁜마음은 배가 되어 너무 뿌듯하다.
여기에 기록되지 않은 오류도 엄청 많고 업데이트된 패키지를 통해 코드상에서 컴포넌트 인자나 함수가 변경되어 동작이 되지 않았던 경우도 있으니 이 글을 읽는 사람들은 패키지를 업데이트하고나서 코드를 잘살펴보기를...

읽어주셔서 감사합니다.

profile
𝐲𝐨𝐮𝐧𝐠𝐡𝐲𝐮𝐧

0개의 댓글