I Learn || m1 맥북에서 react native cli 로 react-native 개발환경 구축

chosh·2022년 5월 25일

Emulator Native React Simulator android iOS reac-native

개발환경 구축 및 프로젝트 생성

android 에뮬레이터 구축

로제타를 사용하여 열기

m1칩 때문인지 설치 했을 때 에러가 많이 났습니다.
변경한 방법 중 하나가 Rosetta로 터미널을 실행하는 방법 이였습니다.
(**로제타가 원인이 아닐 수 있습니다.)

응용 프로그램 -> 유틸리티 -> terminal을 찾아 우클릭
정보 가져오기 클릭
rosetta를 사용하여 열기 체크

homebrew 설치

https://brew.sh/index_ko 홈페이지로 이동
터미널에 설치 커맨드 입력 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"
brew -v 로 설치 확인
zsh: command not found: brew 에러 발생시,
vi ~/.zshrc 커맨드 입력
i를 눌러서 insert 모드로 변경
export PATH=/opt/homebrew/bin:$PATH 추가
esc눌러서 wq(write quit)으로 저장하고 나가기
source ~/.zshrc 커맨드 입력해서 적용

node, watchman 설치

node를 설치하기 위해 터미널에 설치 커맨드 입력 brew install node
설치 확인 node -v
watchman을 설치하기 위해 arch -arm64 brew install watchman
설치 확인 watchman -v

?nvm 버전 설정?

nvm alias default v버전 (ex, nvm alias default v16)

이 부분은 에러를 계속 만나서 알고보니 nvm 설정이 안되어 있는게 문제였던거 같습니다. 
저는 nvm을 삭제하고 시도해서 됐지만, 프로젝트에서 특정 버전을 설정하거나, 
default를 설정하면 될거 같아서 적었습니다. 맞는지 틀린지 아직 잘 몰라서 
?로 표시해 두었으니 해당 내용을 알고 계시면 댓글로 알려주세요!

Java JDK 설치 (android용)

터미널에 설치 커맨드 입력 brew tap homebrew/cask-versions
터미널에 설치 커맨드 입력 brew install --cask zulu11

Android Studio 설치(에뮬레이터를 돌리기 위해서)

https://developer.android.com/studio 홈페이지로 이동
다운로드 -> m1 칩 선택 -> 설치
android studio 실행
좌측 상단 android stuido 클릭
preferences -> Appearance & Behavior -> system settings -> android sdk
Android 11.0 (R) -> 우측하단에 show package details 체크
- Android SDK Platform 30 체크
- Intel x86 Atom_64 System Image or Google APIs Intel x86 Atom System Image 체크 (저는 둘 다 체크 했습니다;;)
- apply 클릭하여 다운로드
현재 사용중인 쉘 조회
- echo $0
사용중인 쉘 config 파일 설정
- zsh 쉘 사용중일 때, vi ~/.zshrc
- bash 쉘 사용중일 때, vi ~/.bashrc
```
 export ANDROID_SDK_ROOT=/Users/[내 피씨 이름]/Library/Android/sdk
 export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
 export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools
```
위의 내용을 입력 후 esc -> :wq -> source ~/.zshrc or source ~/.bashrc
react-native 설치
- 터미널에 설치 커맨드 입력
  - sudo npm install -g react-native
  - sudo를 쓰는 이유는 슈퍼 유저로써 프로그램을 구동할수 있도록 하는 명령어라고 합니다.
  - yarn 을 사용하면 더 빠르게 초기화가 가능하다고 합니다.
  - 근데 공식홈페이지에서 어플리케이션 생성 부분에 If you previously installed a global react-native-cli package, please remove it as it may cause unexpected issues. 이런 말이 써있어서 어떤게 맞는지 모르겠습니다. 저는 이미 npm 사용해서 설치 했기 때문에 테스트를 못해봤습니다.
프로젝트 생성
- 터미널을 켜고, 프로젝트 생성할 패스로 이동
- npx react-native init 프로젝트명 으로 프로젝트 생성
에뮬레이터 확인
- 프로젝트 경로에서 npx react-native run-android 입력

ios 시뮬레이터 구축

로제타를 사용하여 열기

위에 내용과 같습니다.

homebrew 설치

위에 내용과 같습니다.

node, watchman 설치

위에 내용과 같습니다.

Xcode 다운로드

앱스토어에서 Xcode 검색 후 인스톨
- 생각보다 시간이 오래 걸립니다.
- 다운로드 다 되고 끝에서 계속 대기중인데, 인스톨 중인 겁니다.
- 수동으로 다운받으면 더 빠르답니다.
설치가 완료되면, xcode 실행
좌측상단 xcode 클릭 -> preferences 클릭 -> Locations 클릭 -> command line tools를 설치한 xcode 버전으로 설정
원하는 시뮬레이터 버전이 있을 시,
- components 탭으로 이동 -> 원하는 시뮬레이터 선택 후 인스톨

cocoaPods 설치

- 터미널에 커맨드 입력 sudo gem install cocoapods
설치 도중 문제가 발생하면 아래의 커맨드 입력
- 터미널에 커맨드 입력 sudo arch -x86_64 gem install ffi
- 터미널에 커맨드 입력 sudo gem install cocoapods
저는 계속 에러가 나서 이것저것 해보다 보니 설치 했었습니다. 위의 내용은 리액트 네이티브 홈페이지에 note for Mac users 부분에 나와있는 내용입니다. 설치 도중 문제 생기면 해보세요

arch -arm64 brew install cocoapods 커맨드 입력