[초기 설정] M1 실리콘 맥북 React Native 환경설정(iOS+ Android 모두)(2023.04.13 작성)

너무 많은 에러로 인해 결국 새로 맥북을 포맷하고 처음부터 다시 설정하기로 마음 먹었다. 슬프다...

 

이번엔 차근차근 천천히 내가 설치한 것이 무엇인지, 그 순서는 무엇인지, 코드는 무엇인지, 어떤 기능인지 등을 짚고 넘어가보자

 

1. Xcode 설치

설치에 시간이 많이 걸린다. 이건 App store보단 Apple Developer 사이트에서 설치하는게 빠르다고 들어서

그렇게 진행했고, 14.3 Xcode에서 문제가 있단 걸 이번에 업데이트했다가 크게 데여서 그냥 14.2를 설치했다.

이때 내리다 보면

 

Command Line Tools for Xcode 14.2

 

라는 것도 있다. 이것도 설치해주도록 하자.

2. iTerm2 , oh-my-zsh 설치

어디서 들은지는 모르겠지만 iTerm2가 기존 맥북의 터미널보다 좋다고 들었다. 
그 이유와 설치 및 커스텀 방법은 이 분의 블로그를 참조하자.(oh-my-zsh 설치도 이걸 참조하자.) https://cocoiscat.tistory.com/11

[전자기기 사용기/맥북 사용기] iTerm2 + oh-my-zsh 사용해서 터미널 커스텀

3. Homebrew 설치

https://brew.sh/index_ko

Homebrew

위 사이트에서 코드를 긁되 앞에 arch -arm64e를 붙여주자. silicon은 기본 경로를 opt/homebrew로 가져가야해서 저렇게 붙이는 거다.

arch -arm64e /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

 

위 코드를 iterm2(이하 터미널)에 붙여넣고 실행한다. 나는 이걸 실행한 후 마지막에 뜨는 아래 두 줄을 실행해줬다.

이거가 무슨 의미인지는 잘 모르겠다. 그리고 .zprofile에 하면 안되는지도 모르겠다.

(feat. https://github.com/orgs/Homebrew/discussions/446) -> 여기서 그렇게 하지 말라는 조언이 있는 듯 한데 잘 모르겠다.(이고거 하고 나면 ~/.zprofile에 한 줄이 생기는데 뭔가 찜찜해서 걍 지워버렸다.)

이후에 모든 brew 명령어 앞에 arch -arm64e를 붙여야 한다. 근데 귀찮잖아? 그래서 ~/.zshrc 파일에 다음과 같은 코드를 한 줄 적어줬다.(brew라고 내가 써도 arch -arm64e brew로 적용되는 명령어다.)

# brew 명령어 앞에 항상 arch -arm64를 붙임
alias brew="arch -arm64e brew"

또한, 

이후 버젼을 확인하자. 즉, 잘 설치되었나 확인하는 방법으로 다음 명령어다.

brew --version

*추가로 위에서 말했듯이 m1, m2칩 (silicon)은 homebrew 기본 경로가 opt/homebrew다.

그래서 ~/.zshrc 파일에 

# homebrew 기본 경로를 /usr/local에서 /opt/homebrew로 변경함
export PATH=/opt/homebrew/bin:$PATH

이것도 적어주자.

엥? 스럽지만 그냥 해주는게 맞다. Homebrew Docs에도 그렇게 나와있다.

이후 

source ~/.zshrc

로 ~/.zshrc가 적용되도록 하자.

이렇게 하면 다음과 같은 명령어를 실행하면

brew config

다음과 같이 나온다.

HOMEBREW_VERSION: 4.0.13
ORIGIN: https://github.com/Homebrew/brew
HEAD: 9b60fcf7ac3f82fa589a64091376d0663262f8c6
Last commit: 2 hours ago
Core tap JSON: 12 Apr 20:47 UTC
HOMEBREW_PREFIX: /opt/homebrew //<--이렇게 기본 경로가 /opt/homebrew여야 한다.
HOMEBREW_CASK_OPTS: []
HOMEBREW_MAKE_JOBS: 8
Homebrew Ruby: 2.6.10 => /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/bin/ruby
CPU: octa-core 64-bit arm_blizzard_avalanche
Clang: 14.0.0 build 1400
Git: 2.37.1 => /Applications/Xcode.app/Contents/Developer/usr/bin/git
Curl: 7.87.0 => /usr/bin/curl
macOS: 13.3.1-arm64 //<--여기가 arm64여야 silicon인 거다. 내가 m1 or m2칩인데 x86_64 나온다? 잘못된거다.
CLT: 14.2.0.0.1.1668646533
Xcode: 14.2
Rosetta 2: false

* 이건 왜 설치했을까...?

brew install zsh
brew install curl

 

이렇게 2개도 설치했는데 왜 설치한지는 잘 모르겠다. 아마 oh-my-zsh 커스터마이징 과정에서 설치한 듯 한데 뭔가 필요해보이긴 한다. 

4. node 설치

react-native는 JS이므로 JS의 런타임 NodeJS가 있어야 한다.

설치법은 

brew install node

이걸 하면 node와 npm(node package manager) 둘 다 설치된다.

설치 확인 방법은 아래와 같다.

node -v

npm -v

5. cocoapods 설치

M1 맥북에서는 cocoapods를 설치하는 방법은 다음 명령어다.

sudo gem install cocoapods

하지만 에러가 뜰 가능성이 높다.

난 다음처럼 떴다.

 sudo gem install cocoapods
Password:
Fetching tzinfo-2.0.6.gem
Fetching i18n-1.12.0.gem
Fetching concurrent-ruby-1.2.2.gem
Fetching nap-1.1.0.gem
Fetching fuzzy_match-2.0.4.gem
Fetching httpclient-2.8.3.gem
Fetching activesupport-7.0.4.3.gem
Fetching algoliasearch-1.27.5.gem
Fetching ffi-1.15.5.gem
Fetching ethon-0.16.0.gem
Fetching typhoeus-1.4.0.gem
Fetching netrc-0.11.0.gem
Fetching public_suffix-4.0.7.gem
Fetching addressable-2.8.4.gem
Fetching cocoapods-core-1.12.0.gem
Fetching claide-1.1.0.gem
Fetching cocoapods-deintegrate-1.0.5.gem
Fetching cocoapods-downloader-1.6.3.gem
Fetching cocoapods-plugins-1.0.0.gem
Fetching cocoapods-search-1.0.1.gem
Fetching cocoapods-trunk-1.6.0.gem
Fetching cocoapods-try-1.2.0.gem
Fetching molinillo-0.8.0.gem
Fetching atomos-0.1.3.gem
Fetching colored2-3.1.2.gem
Fetching nanaimo-0.3.0.gem
Fetching rexml-3.2.5.gem
Fetching xcodeproj-1.22.0.gem
Fetching escape-0.0.4.gem
Fetching fourflusher-2.3.1.gem
Fetching gh_inspector-1.1.3.gem
Fetching ruby-macho-2.5.1.gem
Fetching cocoapods-1.12.0.gem
Successfully installed concurrent-ruby-1.2.2
Successfully installed i18n-1.12.0
Successfully installed tzinfo-2.0.6
ERROR:  Error installing cocoapods:
	The last version of activesupport (>= 5.0, < 8) to support your Ruby & RubyGems was 6.1.7.3. Try installing it with `gem install activesupport -v 6.1.7.3` and then running the current command again
	activesupport requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.

이건 1번에서 Xcode 설치 시

Command Line Tools for Xcode 14.2

를 설치한 경우 이미 설치되었겠지만 혹시 모르니 다음 명령어로 확인해보자

xcode-select --install

이 명령어를 사용 시 뭔가 설치될 것이다. 만약 이미 설치되어 있다면,

xcode-select: error: command line tools are already installed, use "Software Update" to install updates

이렇게 뜬다.

그럼 이걸 어떻게 해결할까? 나는 다음과 같이 ffi를 설치해야 한다는 걸 어딘가에서 보고

sudo arch -x86_64 gem install ffi

를 실행했다. 하지만 여전히 안된다.

그래서 나는 마지막 에러 로그를 주목했다. 그래서 다음 명령어를 실행했다.

sudo gem install activesupport -v 6.1.7.3

와...! 그러고나서 sudo gem install cocoapods를 했는데 귀신같이 잘된다. 👏🏻👏🏻👏🏻👏🏻👏🏻
감사합니다!!!

그러고서 설치가 잘 되었는지 확인하는 방법은 다음 명령어다.

pod --version

6. watchman 설치

다음 명령어처럼 하면 그냥 스무스하게 잘 설치가 된다.

brew install watchman

잘 설치되었는지 확인은 다음 명령어로 한다.

watchman --version

7. React-Native 설치

먼저, react-native-cli를 설치한다.

npm install -g react-native-cli

잘 설치되었는지 확인은 다음 명령어로 한다.

react-native --version

 

이제 원하는 디렉토리에 다음 명령어로 프로젝트를 생성한다.

react-native init 프로젝트명

그랬더니...슈밤....다음과 같은 에러가 뜬다.

 react-native init testApp
This will walk you through creating a new React Native project in /Users/yundongju/Documents/testApp
Installing react-native...
Consider installing yarn to make this faster: https://yarnpkg.com
npm WARN deprecated urix@0.1.0: Please see https://github.com/lydell/urix#deprecated
npm WARN deprecated source-map-url@0.4.1: See https://github.com/lydell/source-map-url#deprecated
npm WARN deprecated resolve-url@0.2.1: https://github.com/lydell/resolve-url#deprecated
npm WARN deprecated source-map-resolve@0.5.3: See https://github.com/lydell/source-map-resolve#deprecated
npm WARN deprecated uglify-es@3.3.9: support for ECMAScript is superseded by `uglify-js` as of v3.13.0

added 692 packages, and audited 693 packages in 19s

38 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
/usr/local/lib/node_modules/react-native-cli/index.js:302
  cli.init(root, projectName);
      ^

TypeError: cli.init is not a function
    at run (/usr/local/lib/node_modules/react-native-cli/index.js:302:7)
    at createProject (/usr/local/lib/node_modules/react-native-cli/index.js:249:3)
    at init (/usr/local/lib/node_modules/react-native-cli/index.js:200:5)
    at Object.<anonymous> (/usr/local/lib/node_modules/react-native-cli/index.js:153:7)
    at Module._compile (node:internal/modules/cjs/loader:1275:14)
    at Module._extensions..js (node:internal/modules/cjs/loader:1329:10)
    at Module.load (node:internal/modules/cjs/loader:1133:32)
    at Module._load (node:internal/modules/cjs/loader:972:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:83:12)
    at node:internal/main/run_main_module:23:47

Node.js v19.9.0

이건 왜 뜨나 찾아보니 버젼이 맞지 않아서 발생하는 오류라고 한다.

뭐가 버젼이 안맞는 걸까? 모르겠다...!🤦🏻‍♂️🤦🏻‍♂️🤦🏻‍♂️
그래서 다음과 같이 react-native 버젼을 맞춰줘야 한다고 한다.

npx react-native init 프로젝트명 --version 0.68.2

이렇게 해주면 아주 잘 생성이 된다.

8. 플랫폼 버젼 맞추기

음...정확하진 않지만 보통 11.0버젼으로 ios 버젼을 맞춘다.

Finder에서 해당 프로젝트(ex.testApp)/ios/ 에 들어가면 testApp.xcworkspace를 실행하면 Xcode가 열리는데

이때, 내용은 다음 블로그에 들어가면 나오는데 마지막 부분에 나온 사진처럼 11.0으로 모두 맞춰준다. https://hapen385.tistory.com/20

[React Native] M1 맥에서 React Native 개발 환경 구축하기

이렇게까지 했다면 Xcode에서 빌드버튼(재생 모양 버튼)을 클릭 시 or 터미널에서 해당 프로젝트 경로에서 react-native run-ios 실행 시 시뮬레이터에 아주아주 잘 실행이 된다.

 

 

여기까진 iOS에 대한 기본 설정이고 Android까지도 해주자.

일단 자바를 설치해야 한다.

brew tap AdoptOpenJDK/openjdk
brew install --cask adoptopenjdk11

이렇게 해야 한다. 옛날 블로그 꺼 그대로 하면 오류난다. 명령어가 좀 바뀌었다고 한다.

java --version

------------<출력 결과>-------------
openjdk 11.0.11 2021-04-20
OpenJDK Runtime Environment AdoptOpenJDK-11.0.11+9 (build 11.0.11+9)
OpenJDK 64-Bit Server VM AdoptOpenJDK-11.0.11+9 (build 11.0.11+9, mixed mode)

이후 또 ~/.zshrc 파일을 열어서

# 안드로이드 SDK 초기 설정
export ANDROID_HOME=/Users/yundongju/Library/Android/sdk       //<--이건 본인 Android Studio에서 SDK Manager 들어가면 다음 사진과 같은게 있다. 그거 가져온다.
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

이런 식으로 적는다.

이렇게까지 하고 안드로이드 스튜디오의 SDK Manager에서 다음과 같이 체크 후 apply한다.

이후 원하는 Device Manager에서 기기를 생성하고 터미널에서

react-native run-android

를 하면 아주아주 잘 실행된다.

 

HAPPY HACKING~!!🚀🚀🚀🚀🚀🚀🚀