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

예슬·2021년 2월 7일
5
post-thumbnail
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

환경변수 설정

  1. 환경 변수 추가를 위해

    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'라고 터미널에 실행했을 때 저장된 버전이 출력된다.

  2. 이렇게만 하면 에뮬레이터에 앱이 설치되지 않았다는 에러가나므로 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

안드로이드는 자동으로 에뮬레이터가 켜지지 않으므로 안드로이드 스튜디오 > configere > AVD Manager > 실행을 먼저 해 두어야 한다.

그 후

npm run android


빌드 성공!

그 외 참고

등. 감사합니다.

++ 글을 쓸 때는 img 태그를 이용하여 이미지의 크기를 지정해 두었는데, 글을 게시하니 이미지의 크기가 원본으로 올라갑니다. 양해 부탁드립니다.

profile
블로그 이사 했습니다! 🏠 ⤵

8개의 댓글

comment-user-thumbnail
2021년 2월 9일

와 이거 때문에 한참 고생했는데 감사합니다!!!

1개의 답글
comment-user-thumbnail
2021년 2월 16일

감사합니다!! 해당 에러 때문에 포기하고 있었는데...

1개의 답글
comment-user-thumbnail
2021년 3월 3일

와 이거 어제까지 왜안되나 계속 본건데 얼른 해봐야 겠어요 감사합니다!

답글 달기
comment-user-thumbnail
2021년 3월 9일

이거 때문에 며칠동안 밤새면서 삽질 했는데 덕분에 해결했습니다ㅜ ㅜㅡㅜ 감사해요ㅜㅜ
정말 감사하다는 말씀드리고 싶어서 벨로그 가입했어요.. 진짜.. 평생 행복하세요.. 영원..히..

1개의 답글
comment-user-thumbnail
2021년 9월 19일

정말,,천사가 나타났어요...감사합니다!!! 덕분에 3일만에 해결했습니다ㅠㅠㅠㅠ

답글 달기