[React Native] Mac M1 개발환경 세팅 (22.12.05수정)

리액트 네이티브로 Adroid와 iOS 앱을 빠르게 개발이 가능하며,

여러가지 장점이 있고 점차 발전해왔다는 점은 좋지만 ... 단점이라면 초기 세팅할게 너무 많다.

 

1. Homebrew 설치

Homebrew : MAC/Linux에서 패키지를 설치하고 관리할 수 있는 맥용 패키지 관리자

## 설치여부 및 버전 체크
$ brew --version

## 설치하기
$ /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

homebrew 사이트에서 복사하여 설치 가능

참고로, 기존 Homebrew 경로는 Intel칩 기준이라, /opt 경로로 바꿔줘야 한다고 한다.

아래 명령어도 입력해준다.

## /opt 경로 바꾸기
$ echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> /Users/<USER_ID>/.zprofile
 
$ eval "$(/opt/homebrew/bin/brew shellenv)"
 
## brew 동작 확인
$ brew help
 
 
 

## 만약 권한이 없다고 하면 아래 명령어 입력
$ sudo chown -R $(whoami) /opt/homebrew

 

2. Node.js 설치

React Native는 자바스크립트 기반 동작이므로 node.js 설치.

React Native 공식문서에서는 node 14 버전 이상 사용할 것을 권장.

$ brew install node
$ node --version
>> v18.4.0 (22.07.14 기준)

 

3. Watchman 설치

watchman : 특정 디렉토리나 파일을 감시하다가, 변경이 발생하면 특정 동작을 실행하는 트리거 역할을 한다.

React Native는 소스코드 변경 시 자동적으로 빌드하고, 디바이스에 업로드하기 위해 사용.

$ brew install watchman
$ watchman -version

 

4. Xcode 설치 (for iOS)

React Native에서 iOS 앱을 개발하기 위해서는 ios개발툴인 Xcode 필요.

App Store에 가서 미리 다운받으면 좋다. 용량이 사악해서 오래걸린다.

App Store에서 앱을 다운 받으려면 Apple 계정이 필요한데, 회사 이메일로 하나 생성하면 된다.

이 애플 계정은 추후에 xcode에서 앱 실행, 출시 등에도 사용 된다.

22년 7월 기준 설치버전 : 13.4.1

22년 12월 기준 설치버전 : 14.0.1

➡️ 아이폰 iOS16버전 이상에서 빌드를 돌리고 싶다면, Xcode는 iOS16을 지원하는 14버전 이상으로 받아준다.

✅ Xcode > Preferences > Locations > Command Line Tools 선택

✅ Rosetta를 사용하여 열기 

* Rosetta를 이용하여 열기 설정방법

이 과정이 필수적인지는 잘 모르겠음. 우선 설정하지 말고, 나중에 Xcode 실행 중 오류가 생길 경우 체크 요망.

Finder > 응용프로그램 > Xcode 우클릭 > 정보 가져오기 > Rosetta를 사용하여 열기 체크

 

5. Cocoapods 설치 (for iOS)

cocoapods : iOS개발에 사용되는 의존성 관리자. Objective-C나 swift로 개발할 때, 사용하는 라이브러리를 설치하거나 관리할 때 사용한다.

즉, Xcode project를 위한 패키지 관리자이다.

$ sudo gem install cocoapods
$ pod --version

 

6. Java(JDK) 설치 (for Android)

React Native 공식문서에 따르면, Homebrew로 Azul Zulu OpenJDK 설치를 권장한다. 이는 Intel칩, M1칩 맥북 모두 지원한다.

11버전 이상 설치를 권장함. 이전에 다른 버전의 자바가 깔려있었다면 환경변수 수정해주기

$ brew tap homebrew/cask-version
$ brew install --cask zulu11

그런데 위 처럼 해도 안되는 경우가 있다.

 

아래처럼 깃허브 계정을 묻는데, 개인계정, 회사계정 전부 입력해도 안된다면 다른 명령어로 실행해보자.

$ brew tap homebrew/cask-version    
Running `brew update --auto-update`...
==> Auto-updated Homebrew!
Updated 1 tap (homebrew/core).
 
You have 8 outdated formulae installed.
You can upgrade them with brew upgrade
or list them with brew outdated.
 
==> Tapping homebrew/cask-version
Cloning into '/opt/homebrew/Library/Taps/homebrew/homebrew-cask-version'...
Username for 'https://github.com':      # 깃허브 계정을 입력하라고 함

 

 

추측하기로는 버전 등이 업데이트 되면서 라이브러리를 찾지 못해 생기는 문제같았다.

아래 명령어로 해결할 수 있을 것이다.

$ brew search zulu
$ brew tap homebrew/cask-versions(버전별로 보기)
$ brew install --cask zulu11
$ java -version

 

 

7. Android Studio 설치 (for Android)

Android Studio 설치 시 아래 세 가지 요소는 반드시 설치한다. 체크박스에 체크 되어있는지 확인하자.

1. Android SDK
2. Android SDK Platform
3. Android Virtual Device

React Native 공식문서에서 권장하는 Android SDK 버전이 있는데(Android 12 (S)), 처음 안드로이드 스튜디오 설정할 때는 제일 최신 버전으로 설치된다. 나중에 바꿀 수 있음.

 

SDK 버전 관리

설치 후, SDK Manager에서 SDK 버전관리 가능하다.SDK Manager 경로 확인하기 /Users/[username]/Library/Android/sdk

1. SDK Manager > SDK Platforms 에서 오른쪽 하단 Show Package Details 선택
2. Android 12.0 (S)
   Android SDK Platform 31
   Sources for Android 31
   ARM 64 v8a System Image
   Google APIs ARM 64 v8a System Image
   Google Play ARM 64 v8a System Image
   -> 6가지 설치

 

환경변수 설정

$ vi ~/.zshrc

export ANDROID_HOME=/Users/jiwon/Library/Android/sdk
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
## 입력 후 esc
## :wq 입력하여 저장하고 나오기

## 환경변수 전역으로 저장 & 확인
$ source ~/.zshrc
$ echo PATH

 

• macOS Catalina(ver. 10.15) 부터 zsh이 기본 터미널 쉘로 지정되어 ~/.zshrc 파일로 작성해야 한다.

React Native 프로젝트 생성

설정은 끝났으니 바탕화면에 Projects 폴더를 만들고, 터미널에서 해당 폴더로 이동한다. 아래 명령어 입력 시, 타입스크립트로 프로젝트 생성한다는 것을 의미한다.

react-native-cli 를 설치하지 않았으면 이 때 설치여부를 묻는다.

Desktop/Projects $ npx react-native init AwesomeTSProject --template react-native-template-typescript

 

 

Reference

[Mac] M1 Homebrew, JDK 설치 및 환경변수 설정 (velog)