[React-Native] iOS 카탈리나 및 ZSH 업그레이드 후 실행/빌드 에러

React Native Errors

관련글 1: 맥북 (Mac OS) 카탈리나 기본쉘을 ZSH로 변경하기. ZSH 설치 및 커스터마이징

2020/06/01 - [맥북과 MacOS] - 맥북 터미널을 이쁘게 - ZSH 초간단 설치와 커스터마이징

---

맥북 프로 iOS 업그레이드 (Catalina and ZSH) 하면서 발생한일

iOS / ZSH - 업그레이드 후 에러 발생 한 일들

이전 포스팅에서 언급했지만, 본의 아니게 카탈리나로 업그레이드 하고, 덩달아서 기본 쉘을 Bash에서 ZSH로 변경하게 되었다. 

이로 인하여, 여러가지 번거로운 일들이 좀 발생하였다. 에구구...

바쁜데 자꾸 번거로운 일이 생기는것 같다. 정작 중요한 일은 이제 부터... ㅜ_ㅜ (이래서 업그레이드 안하려 했건만...)

결론부터 요약하면, Catalina 업그레이드 및 기본쉘 변경 (chsh)을 하게 되면, 환경변수 설정이 초기화 된다. 
이 때문에 기존 .bashrc or .bash_profile 등에 설정되어 있는 환경변수가 동작을 안하므로, 개발환경이 비정상 동작할 수 있다. 

---

 

업그레이드 후, React-Native 개발환경 및 빌드오류 

 

 

업그레이드 후 멀쩡하던 리액트 네이티브(react native) 개발 환경이 망가졌다. 어디에서부터 망가 졌을까???

 

일단, `react-native run-android` 를 실행해 보았다. 

Launching emulator. Failed to Lauch emulator 

으음?. 에뮬레이터(emulator)가 실행이 안된다고 한다. 메뉴얼하게 실행 해보라는 이야기도 한다. 수동으로 에뮬레이터를 실행해 주었다. 

 

Android Emulator 수동 실행

수동으로 실행해 주고 실행해 보았다.  이후 다시 `react-native run-android`를 실행해 보아도 다시 에러 발생

error Failed to install the app. Make sure you have the Android development environment set up: https://reactnative.dev/docs/environment-setup. Run CLI with --verbose flag for more details.
Error: Command failed: ./gradlew app:installDebug -PreactNativeDevServerPort=8081

 

이번에는 Gradle 이 제대로 동작하지 않는다는 이야기이다. 수동으로 Gradle을 실행해도 정상동작 하지 않는다. ㅜ_ㅜ

좀 더 상세한 원인을 파악하기 위해서 --verbose option을 추가하여 실행해 보았다. 

 

react-native run-android --verbose
info Running jetifier to migrate libraries to AndroidX. You can disable it using "--no-jetifier" flag.
(node:34756) Warning: Accessing non-existent property 'padLevels' of module exports inside circular dependency
(Use `node --trace-warnings ...` to show where the warning was created)
Jetifier found 960 file(s) to forward-jetify. Using 12 workers...
info JS server already running.
/bin/sh: adb: command not found
info Launching emulator...
error Failed to launch emulator. Reason: No emulators found as an output of `emulator -list-avds`.
warn Please launch an emulator manually or connect a device. Otherwise app may fail to launch.
info Installing the app...
debug Running command "cd android && ./gradlew app:installDebug -PreactNativeDevServerPort=8081"

눈에 띄는 에러들을 몇가지 보면, 

/bin/sh: adb: command not found info Launching emulator... error Failed to launch emulator.
debug Running command "cd android && ./gradlew app:installDebug -PreactNativeDevServerPort=8081"

음? adb 도 실행을 못하고 있네?  일단 react-native 자체보다는 안드로이드 관련해서 전반적으로 동작을 안하는 것 같다.  

adb 다시 설치해 주었다. 

 

 

ADB 재설치 

 

 

아래와 같이 ADB.exe를 다시 설치해 주었다. 나중에 알게 되었지만 필자의 경우 adb를 재설치 할 필요는 없었다.

다만, 이 글을 읽는 분들께는 도움이 될 수 있을 것이다. 

 

adb 설치 과정에 관한 자세한 내용은 ADB 및 Logcat 포스팅을 참조하기 바란다. 

2020/03/16 - [IT 이야기] - ADB와 Logcat 이용하여 스마트폰 디버깅

Android Studio에 있는 ADB.exe를 사용하셔도 됩니다만, 저는 brew cask install 이 편해서 이렇게 사용중입니다.

brew cask install android-platform-tools
==> Downloading https://dl.google.com/android/repository/platform-tools_r30.0.0-
######################################################################## 100.0%
==> Verifying SHA-256 checksum for Cask 'android-platform-tools'.
==> Installing Cask android-platform-tools
==> Linking Binary 'adb' to '/usr/local/bin/adb'.
==> Linking Binary 'dmtracedump' to '/usr/local/bin/dmtracedump'.
==> Linking Binary 'etc1tool' to '/usr/local/bin/etc1tool'.
==> Linking Binary 'fastboot' to '/usr/local/bin/fastboot'.
==> Linking Binary 'hprof-conv' to '/usr/local/bin/hprof-conv'.
==> Linking Binary 'mke2fs' to '/usr/local/bin/mke2fs'.
🍺  android-platform-tools was successfully installed!
   ~/my_dev/react-native/testBundle

흐음... 이제 adb는 되는데 아직도 제대로 동작을 안한다. 

 

 

그 다음은 뭘 하지? 

 

이런 저런 세팅을 다시 해 봐도 다른 에러들만 발견될 뿐 정상 실행은 안된다. 발생하는 에러를 유형으로 살펴보면, 다음과 같은 에러이다. 

• emulator 연결 안됨
• gradle 잘 안됨

공통점은???

아하~

공통점은, 바로 안드로이드 관련한 라이브러리, 툴.. 이 모든것이 안된다는 것이다. 

초기에 bash 쉘로도 실행 해 봤는데, 정상동작 하지 않았기 때문에 iOS Catalina 로 업그레이드 때문이라고 생각했다. 

 

그러나, 전반적인 라이브러리와 툴은 모두 설치 되어 있고, 수동 실행은 되는데, 

React-Native에서 실행할 때는 동작하지 않는다면, 

뭔가 Path 또는 Link가 잘못 되어 있다는 결론이 나온다. 

 

이렇다면, ZSH로 업그레이드 한 원인이라고 보는 것이 맞을것 같다. 

즉, 쉘을 변경했더니, 전반적으로 안드로이드 라이브러리가 안되는 현상이다. zshrc에서 환경변수 세팅이 제외되어 있던것이다. 

 

쉘 환경변수 재설정 - 안드로이드 환경변수 (.zshrc or .bashrc/.bash_profile)

 

원인은 파악이 되었으니, 이제 수정하자. ~/.zshrc 를 열고 다음경로를 추가 후 저장해 준다. 

 

React Native 공식 사이트의 가이드를 잘 살펴 보면, .bash_profile 에 안드로이 환경변수를 설정하도록 가이드 하고 있다. emulator, tools, platform-tools (adb.exe) 등 Path설정이 되어 있다. 이 부분이 삭제 되어서 발생한 일이다. 

ZSH로 변경을 했다면, ~/.zshrc 를 기존 bash를 사용하고 있다면, ~/.bash_profile을 열어서 가장 마지막에 다음을 추가해 주자.

export ANDROID_HOME=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

zshrc 저장이 완료되었다면, 현재 쉘에 환경변수를 반영해 주어야 하므로, 

source ~/.zshrc

bash 사용자 : source ~/.bash_profile 혹은 source ~/.bashrc

또다른 방법으로는, 그냥 터미널을 종료 후 다시 실행해 주자. 

 

 

다시... 개발환경 실행/빌드 테스트

수정이 완료되었으면, 이제 정상 동작하는지 테스트 해 보자. 

$ react-native run-android

react-native dev server 실행 화면

 

우왓~이제 다시 잘 된다.  ^^

이 화면이 이렇게나 반가울 줄이야.

 

react-native android app 기본 실행 화면

 

 

ps.

쉘 변경했다가.. 시간 엄청 까먹었다. ㅜ_ㅜ

 

---

 

iOS 개발 환경은 ?

 

필자의 경우 App Store에 개발자 등록을 안해놔서, 안드로이드만 개발하고 있지만, 사람의 일은 모르는 거니깐.. iOS 환경도 문제 없는지 점검해 보자.. 역시나 이 또한 잘 안된다. 

 

iOS 개발 환경은 환경 변수 세팅을 요구하고 있지 않다. 그런데 왜 잘 안될까?

 

그럼.. 일단, cocoapods를 다시 설치 해 주도록 하자. 

$ sudo gem install cocoapods

참고로, cocoapods를 설치 할 때, 내부적으로 sudo 권한으로 환경변수에 Path 설정이 포함되어 있다. 

export GEM_HOME=$HOME/.gem
export PATH=$GEM_HOME/bin:$PATH

 

흐음... 그래도 잘 안된다. 변경 반영이 안되어서 일것이다. 이런 경우 pod 세팅을 리뉴얼 할 필요가 있다. 

$ cd ios && pod install && cd ..

pod install 최초 실행에는 이런 저런 설치로 시간이 많이 소요 될 수 있다. 

 

다시 실행해 보자

$ react-native run-ios

 

이후, 정상 실행이 되는 것을 확인할 수 있다. 

 

리액트 네이티브 (react native) iOS 개발 환경 설정 복구

 

 

 

그래도 잘 안된다면, react-native 공식 홈페이지을 참조하여 환경설정을 처음부터 다시 해주자. 

문제가 생겼을 때는, 한구절 한구절씩 꼭꼭 씹어서 따라 해 주는 거다. 

리액트 네이티브 공식 사이트 : https://reactnative.dev/docs/environment-setup

 

 

---

관련글

2020/06/01 - [맥북과 MacOS] - 맥북 터미널을 이쁘게 - ZSH 초간단 설치와 커스터마이징

2020/06/01 - [맥북과 MacOS] - MacOS 폴더간 이동 : Command + Shift + G

2020/03/15 - [IT 이야기] - 맥북 터미널 단축키

2020/05/10 - [IT 이야기/IT 상식] - 맥북-안드로이드 USB 연결 - 맥북은 안드로이드 폰 파일을 어떻게 볼까?

MacOS 폴더간 이동 : Command + Shift + G

맥북 터미널을 이쁘게 - ZSH 초간단 설치와 커스터마이징