(Mac) React Native 개발환경 구축하기 & 에러해결

예슬·2021년 2월 7일

20210207 기준 (거의) 최신 버전으로 기록되었습니다. 아래의 버전을 확인하시길 바랍니다.

해당 게시글은 제가 개발환경을 구축하면서 맞닥뜨렸던 에러를 해결한 내용에 중점을 두고 쓰여진 글입니다.

MacOS BigSur 11.1
Xcode 12.4

react-native-cli: 2.0.1
react-native: 0.63.4

node v14.13.1
Homebrew 3.0.0-23
npm 7.5.2
watchman 7.5.2

우선 iOS와 Android 개발을 위하여 Xcode, Android Studio를 설치하고 SDK, watchman 등을 설치해야합니다.
저는 이곳을 참고하여 진행하였습니다.

버전이 맞지않아서 발생하는 오류인지는 모르겠으나, 바로 npm run ios/android를 해버리면 오류가 날 것입니다.
이러한 오류를 fix한 방법을 아래에 적어보았습니다.

프로젝트 생성

react-native init SampleApp

iOS

ios 폴더 > Pods > Pods.xcodeproj 실행 > Podfile 내

use_flipper!
  post_install do |installer|
    flipper_post_install(installer)
  end

주석처리 후 Xcode 종료 (vsCode에서 하셔도 됩니다)

20210208 추가
https://github.com/facebook/react-native/issues/30836#issuecomment-774701342
이곳에 따르면
use_flipper!({ 'Flipper' => '0.74.0' })
이렇게 교체하는 것이 답이라고 합니다.

cd ios
pod deintegrate
pod install

cd .. -> 프로젝트 파일로 이동
npm run ios

빌드 중 ...

빌드 완료

Android

환경변수 설정

환경 변수 추가를 위해

vim ~/.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

source ~/.bash_profile

환경 변수를 설정했다면 'adb'라고 터미널에 실행했을 때 저장된 버전이 출력된다.

이렇게만 하면 에뮬레이터에 앱이 설치되지 않았다는 에러가나므로 gradle 버전을 바꾸어 주어야 한다.

프로젝트 파일 내 android > gradle > wrapper > gradle-wrapper.properties 파일로 이동
```
distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip
```
이러한 버전을 다음과 같은 버전으로 수정
```
distributionUrl=https\://services.gradle.org/distributions/gradle-6.3-all.zip
```