[React Native] 개발 환경 세팅하기

 

틀린 내용이 있을 수 있습니다.
발견하시면 말씀 부탁드립니다! 🙇

---

 

개인 플젝의 기본 기능이 어느 정도 구현되었으니 아이폰에서 앱을 테스트해보고자 했다. 아이폰 앱의 경우 testflight를 통해 테스트를 할 수 있는데 이를 위해선 애플 개발자 계정을 등록하고 연회비를 지불해야 한다. 그런데 애플 개발자 등록이 안 되는 이슈가 발생했다. 여러 포스트들에서는 개인 정보 입력하는 부분에 영문이 아닌 한글로 정보를 입력해야 한다고 하는데 해당 페이지에서 한글 입력이 안 되는 것이었다. 이미 계정 등록에 한 번 실패한 상황이었기에(이 때는 영문으로 개인 정보를 입력했다) 이번에는 무조건 패스한다!라는 생각이었고, 해결 방법을 찾기 위해 구글을 뒤져봤다. (해결 🥳 : Apple developer program 웹 사이트가 아닌 앱 스토어에서 설치한 "Apple developer" 에서  개발자 등록 진행하면 된다. - 개인 정보는 영문으로 입력) 그러다가 애플 개발자 등록 없이 무료로 앱을 빌드하는 방법이 있다는 것을 알았다. 당장은 테스트만 하면 되는 상황이었기에 옳다구나 하고 이에 필요한 Xcode를 설치한 뒤 개인 플젝을 불러왔다. 그리고 또 실패했다😇. 

 

 

그리하여 시작된 RN 개발! 이번 기회에 RN 개발환경 세팅하는 법을 기록해 본다!

 

 

공식 문서를 토대로 설치를 진행했다.

https://reactnative.dev/docs/environment-setup

Setting up the development environment · React Native

 

RN는 Expo Go Quickstart와 React Native CLI Quickstart 두 가지 방법으로 설치 가능하다. 모바일 앱 개발이 처음인 사람들에게는 Expo Go Quickstart로 설치하는 것을, 모바일 앱 개발이 익숙한 사람들에게는 React Native CLI Quickstart로 설치하는 것을 추천한다. 

여기서는 React Native CLI Quickstart 가이드에 따라 설치하는 방법을 기록하겠다.(Expo Go Quickstart 가이드를 이용해 설치해 봤는데 Node.js와 핸드폰만 있으면 끝난다!)

 

 

Node.js, Xcode, brew는 사전에 설치했기에 생략.

 

Watchman 설치

brew install watchman

 

Ruby 설치

MacOS에는 기본적으로 Ruby가 설치되어 있으나 RN에 필요한 버전과 다르기에 알맞은 버전으로 설치를 해야 한다. Ruby version manager를 통해 RN에서 요구하는 2.7.6 버전(작성일 기준)의 Ruby를 설치하자. 

https://reactnative.dev/docs/environment-setup#ruby

흔히 사용되는 Ruby vesion manager 종류는 rbenv, RVM, chruby, asdf-vmwith theasdf-rubyplugin 라고 나와있다. 여기서 rvm을 통해 Ruby 2.7.6을 설치해 보자. (만약 brew를 통해 ruby를 설치한 적이 있다면 먼저 brew uninstall ruby 입력하고 설치 진행)

# .rvm 삭제
rm -rf ~/.rvm
# RVM 설치
curl -L https://get.rvm.io | bash -s stable
# 변경사항 적용
source ~/.rvm/scripts/rvm
# ruby 2.7.6 버전 설치
rvm install 2.7.6
# ruby 2.7.6 버전을 기본값으로 설정
rvm --default use 2.7.6
# 루비 버전 확인
ruby -v

 

Xcode Command Line Tools 설치

Xcode > Settings > Locations에서 Command Line Tools 필드를 선택하여 Xcode Command Line Tools를 설치하자.

 

CocoaPods 설치

gem install cocoapods

 

RN 프로젝트 생성

만약 이전에 react-native-cli 패키지를 글로벌로 설치한 적이 있다면 삭제해 주자 (공식 문서상에서는 전역으로 CLI 특정 버전을 관리하는 것을 지양한다). 

# 전역 설치한 react-native-cli 패키지 삭제
npm uninstall -g react-native-cli @react-native-community/cli
# RN프로젝트 생성
npx react-native@latest init newProject

 

에러 💩

RN 프로젝트 생성 중 bundle 설치 부분에서 "your ruby version is 2.6.10 but your gemfile specified 2.7.6"라는 메시지와 함께 에러가 발생했다. 공식 문서를 참고하여 아래와 같이 명령어를 입력했다.

cd ios
# Install Bundler
bundle install
# Install the iOS dependencies
bundle exec pod install

다른 에러가 발생했다! "xcrun: error: SDK "iphoneos" cannot be located" 에러가 발생하며 설치에 실패한 것인데, 구글링을 통해 아래와 같은 명령어를 입력하고 다시 설치해 보니 정상적으로 설치되었다.

sudo xcode-select --switch /Applications/Xcode.app

 

 

 

---

참고 자료

• https://reactnative.dev/docs/environment-setup
• https://stackoverflow.com/questions/68565356/xcrun-error-sdk-iphoneos-cannot-be-located
• https://github.com/facebook/react-native/issues/36002