React-Native를 설치해보자.

RN 공식 문서

설치 환경: macbook air m1
macOS: Ventura 13.5.1
Android Studio: Giraffe | 22.03.01 Patch 3
Xcode: 15.0.1

Installing dependencies

공식 문서에 나와있는 순서대로 다음과 같이 진행했다.

Development OS: mac
Target OS: iOS로 선택했다.

brew install node
brew install watchman

1. node와 watchman을 설치한다.

왜 node와 watchman을 사용하나요?

• node
  node는 javascript 런타임이다. javascript로 프로젝트를 구축하고 개발하기 위해서 필요하다.
• watchman
  watchman은 meta에서 만든 파일 감시 도구이다. 파일 변경을 검사한다는 것은 변경된 부분만 감지하여 빌드해주고, 자동으로 실행해준다. 이에 따른 버그도 빠르게 찾을 수 있기 때문에 설치한다.

2. 이후에는, Xcode를 설치해야 한다.
   Command Line Tools가 잘 설치됐는지 확인해야 한다. XCode에서는 "command + ,"를 눌러 Locations에서 확인할 수 있다.

   이때, 드랍다운으로 Commands Line Tools를 내려봐야 한다. 특이하게, 한 번 드랍다운으로 조회를 해야 하는 근본없는 이슈가 있다.

Xcode는 왜 사용하나요?

Xcode는 iOS 어플리케이션을 개발할 때 사용하는 IDE이다. iOS앱을 만들기 위해서는 Command Line Tools가 필요하다.(컴파일러, 링커 등이 포함되어 있음) 그리고, simulator를 사용하기 위해 Xcode를 설치한다. (android studio를 설치하는 이유도 같다.)

3. CocoaPods를 설치한다.
   iOS의 dependency를 관리한다. ex) npm, gradle..

sudo gem install cocoapods

위의 방식으로 실행하고 안되는 경우,
m1환경에서 에러가 나는 경우에 ffi를 설치한다고 하길래 추가로 제시한다.

sudo gem install ffi

+) 더욱 추가로, ruby의 버전을 관리하는 rbenv의 문제가 발생할 수 있어 아래의 절차로 rbenv의 버전을 임의로 추가 설치해보는 것을 추천한다.

brew install rbenv
rbenv install 2.7.5
rbenv global 2.7.5
rbenv rehash

4. 마지막으로 npx react-native@latest init AwesomeProject로 프로젝트를 설치한다.

이 부분에서 많은 에러가 발생할텐데, cocoapods, ruby(gem, rbenv), Xcode, android-studio 여러 환경에서 에러가 발생할 수 있다. 다시 한 번 Installation guide를 읽어보고 모든 의존성이 설치됐고 적용됐는지 확인해보자. source ~/.bashrc와 같은 명령어도 잊지 않았는지 확인하자.

실행

npm run ios or yarn run ios

simulator를 한 번도 켜본 적 없는 사람이라면 위와 같은 에러가 발생한다.
다시, Xcode를 켜고 "command + ,"를 눌러 설정으로 이동한다.
Platforms 탭으로 이동해 iOS 17.0을 다운 받으면 simulator가 함께 설치된다.

다시, 실행하면 simulator에 native app이 잘나온다.