[React-Native] mac 세팅

1. Homebrew 설치

https://brew.sh/

Homebrew

위 사이트에서 아래 명령어를 복사해서 터미널에 입력

brew --version

//Homebrew 3.5.10
//Homebrew/homebrew-core (git revision 5ef1b9b7de5; last commit 2022-09-01)
//Homebrew/homebrew-cask (git revision d5d65d752f; last commit 2022-09-01)

위 명령어를 통해 설치된 것을 확인할 수 있다.

 

2. Node.js 설치

아래 명령어를 통해 node를 설치한다.

brew install node

설치가 완료되었다면 제대로 설치되었는지 확인한다.

node --version
npm --version

//v18.8.0
//8.18.0

 

3. Watchman 설치

watchman을 설치한 후 잘 설치되었는지 확인한다.

brew install watchman
watchman --version

//2022.08.29.00

 

4. React Native CLI

아래 명령어로 설치한 후

npm install -g react-native-cli
npm install -g react-native

아래 명령어들로 설치를 확인할 수 있다.

npx react-native --version
npm -g list

// 8.0.6
// /opt/homebrew/lib
// ├── npm@8.18.0
// ├── react-native-asset@2.0.1
// ├── react-native-cli@2.0.1
// ├── react-native@0.69.5
// └── yarn@1.22.19

 

5. XCode 설치

AppStore에서 설치해주면 된다. 시간이 엄청 걸린다..

 

6. CocoaPods 설치

sudo로 설치하고 설치 확인까지 한다.

sudo gem install cocoapods
pod --version

// 1.11.3

 

7. JDK 설치

아래 명령어로 설치 후 버전 잘 설치되었는지 확인한다.

brew tap AdoptOpenJDK/openjdk
brew install --cask adoptopenjdk11
java --version
javac --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)
// javac 11.0.11

 

8. Android Studio 설치

SDK Manager에서 아래 설치

• Android SDK Platform 29
• Intel x86 Atom System Image
• Google APIs Intel x86 Atom System Image
• Google APIs Intel x86 Atom_64 System Image

 

9. Android Studio 환경변수 설정

~/.bash_profile를 아래 코드로 수정한다. 사용자명은 본인 노트북에 저장되어있는 이름을 입력한다.

만약 파일이 없으면 root 폴더 쪽에 하나 만든다.

ANDROID_HOME=/Users/사용자명/Library/Android/sdk
PATH=$PATH:$ANDROID_HOME/emulator
PATH=$PATH:$ANDROID_HOME/tools
PATH=$PATH:$ANDROID_HOME/tools/bin
PATH=$PATH:$ANDROID_HOME/platform-tools

아래 코드로 bash 파일을 실행할 수 있다.

source ~/.bash_profile

하지만 여기서 끝내면 터미널 시작할 때마다 source 명령어를 실행해줘야 한다.

bash_profile 자동실행되게 하려면 .zshrc에 아래 코드 넣고 저장한다.

if [ -f ~/.bash_profile ]; then
  . ~/.bash_profile
fi

 

터미널에 adb를 입력했을 때 아래와 같이 나온다면 환경변수 설정이 잘 된 것이다.

Android Debug Bridge version 1.0.41
Version 33.0.3-8952118

 

10. React-Native 실행

아래 명령어를 입력하면 프로젝트 파일이 만들어진다.

npx react-native init 프로젝트명

실행방법은 OS 별로 다르며 실행은 모두 프로젝트의 root 폴더에서 진행한다.

Android

 

npm run android

iOS

npm run ios

iOS는 주의할 점이 있는데, 모듈을 깔았을 때 꼭 프로젝트의 root 폴더에서 아래 명령어를 실행한 후에 run 해야한다.

npx pod-install