RN CLI로 프로젝트 생성하기

cli는 커맨드입력이 전역 범위에서 일어나야 하기 때문에 -g를 붙여준다.
cocoapods : ios 개발에 사용되는 의존성 관리자

$ npm install -g react-native-cli
$ sudo gem install cocoapods
$ npx react-native init myProject

TypeError: cli.init is not a function

react-native 0.69.0 버전에서 발생하는 에러로, react-native 버전을 다운그레이드 시켜주자.

TypeError: cli.init is not a function

$ npx react-native init myProject --version 0.68.2
$ gem install cocoapods

이미 설치했었다면 의존성이 꼬일 수 있으니 삭제해주자.

$ npm uninstall -g react-native-cli @react-native-community/cli react-native
$ npm install -g react-native-cli
$ npm -g list

Gem::FilePermissionError

gem을 사용하면 아래와 같은 오류를 만날 수 있다.

ERROR: While executing gem ... (Gem::FilePermissionError)
You don't have write permissions for the
/System/~/lib/ruby/gems/2.6.0 directory.

sudo 권한을 통해 실행하면 해결할 수 있지만 권장되지 않는다.
따라서 루비 언어의 버전 관리 매니저인 rbenv 를 통해서 문제를 해결해보자.

$ brew update
$ brew install rbenv ruby-build
$ rbenv install -l
$ rbenv install 3.1.3

$ rbenv global 3.1.3 # 글로벌 버전 설정
$ rbenv versions # 버전 확인

쉘 설정 파일에 rbenv PATH를 추가한다. 사용하는 쉘에 따라서 bash는 .bashrc, zsh는 .zshrc에 각각 아래 내용을 추가하면 된다.

$ vi ~/.zshrc

# 원래 있는 코드 아래에 그대로 붙이면 된다.
[[ -d ~/.rbenv  ]] && \
  export PATH=${HOME}/.rbenv/bin:${PATH} && \
  eval "$(rbenv init -)"

위 설정이 반영될 수 있도록 source 명령어로 해당 내용을 적용한다.

$ source ~/.zshrc

Could not find "Podfile.lock"

npm run ios 했더니 아래와 같은 오류가 발생했다. pod install 하면 된다.

error Could not find "Podfile.lock" at ~/Podfile.lock.
Did you run "pod install" in iOS directory?

cd myProject
pod install

rbenv: version `2.7.4' is not installed

rbenv 버전 확인 후 프로젝트 루트폴더에 있는 .ruby-version 파일 수정하기

$ rbenv versions

No simulator available with name "iPhone 13".

react-native마다 simulator의 default값이 정해져있다. xcode를 열어서 지원하는 기기 중 하나를 정해 옵션에 추가하여 실행한다.

npx react-native run-ios --simulator='iPhone 14'

Could not find a valid gem 'cocoapod'

이 오류는 CocoaPods가 제대로 설치되지 않아서 발생한다.

ERROR:  Could not find a valid gem 'cocoapod' (>= 0) in any repository
ERROR:  Possible alternatives: cocoapods, cockapoc, cocoapods-x, 
xcocoapods, cocoadex

gem을 update하고 다시 설치해보자
gem : 루비(Ruby) 언어를 위한 패키지 매니저

$ sudo gem update --system
$ sudo gem install cocoapods
$ pod --version

error str.replace is not a function.

이거 오류때문에 정신나갈뻔 했는데 아래처럼 해주니까 해결됐다. vscode랑 xcode랑 연결하는 코드인 것 같다.

$ sudo xcode-select -s /Applications/Xcode.app/Contents/Developer
$ sudo xcodebuild -license accept
$ cd ios
$ pod install
$ npx react-native run-ios

정리

진짜 맨처음 환경설정할 때가 제일 힘들고 진빠짐...근데 결국 해냈죠?
cocoapods 잘 설치되고, ruby 잘 설치되고 버전 잘 맞는 여러분은 빨리 할지도?

$ sudo gem update --system
$ sudo gem install cocoapods
$ pod --version # cocoapods 설치 확인

$ brew update
$ brew install rbenv ruby-build
$ rbenv install -l
$ rbenv install 3.1.3

$ rbenv global 3.1.3 # 글로벌 버전 설정
$ rbenv versions # rbenv 설치 확인 및 버전 확인

$ vi ~/.zshrc

[[ -d ~/.rbenv  ]] && \
  export PATH=${HOME}/.rbenv/bin:${PATH} && \
  eval "$(rbenv init -)"

$ source ~/.zshrc
$ gem install cocoapods

$ npx react-native init myProject --version 0.68.2
$ cd myProject
$ cd ios
$ pod install
$ cd ..
$ npx react-native run-ios --simulator='iPhone 14'

빌드를 성공적으로 완료하면 아래와 같은 문구가 콘솔에 찍히고 react-native의 'hello world'와 같은 화면을 아이폰 시뮬레이터로 볼 수 있다.

success Successfully built the app
info Installing "/Users/~/testProject.app"
info Launching "org.reactjs.native.example.testProject"
success Successfully launched the app on the simulator

expo로 프로젝트 생성하기

$ expo init MyApp
$ cd MyApp
$ npm start

# expo go 앱 다운받기
# 회원가입 후 컴퓨터와 앱에서 둘다 로그인하면 빌드했을 때 테스트 가능
$ expo login

expo에서는 HWR을 지원해서 돌리고 있는 상태에서 코드 저장하면 앱에서도 바로 적용됨
아니 그 전에 다 세팅해놔서 되는건지 이게 그냥 사기인건지 모르겠지만 expo로 했더니 5분만에 시뮬레이터 가동...차이점이 있겠죠?

RN CLI vs expo

[expo]
App.js : Expo 앱의 진입점
app.json : Expo 앱의 설정 파일
assets : Expo 앱에서 사용할 이미지, 폰트 등을 저장하는 디렉토리

[react-native CLI]
index.js : CLI 앱의 진입점
__tests__ : 테스트 코드를 저장하는 디렉토리
android 와 ios 디렉토리가 구분되어 있다.

Expo는 React Native CLI보다 더 추상화된 레이어를 제공하며, 더 쉽게 React Native 앱을 개발할 수 있도록 도와주고,
React Native CLI는 Expo보다 더 많은 컨트롤과 설정이 가능하며, React Native 앱을 더욱 자유롭게 커스터마이징할 수 있다.

요약

expo 장점 : 쉽고 빠르게 프로젝트를 생성하고 시작할 수 있다.
CLI 장점 : 훨씬 다양한 커스터마이징이 가능하다.