홈브루 설치
홈브루는 맥에서 사용하는 설치 프로그램이다.
명령어를 터미널에서 실행한다.
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"비주얼 스튜디오 코드 설치
다음 명령으로 vscode를 설치한다.
brew install cask
brew install --cask visual-studio-code설치가 끝나면 런치패드에서 vscode 아이콘을 찾아 실행한다. 그리고 dock에서 vscode 아이콘을 마우스 오른쪽으로 클릭하여 옵션 -> doc에 유지를 실행한다. 이는 앞으로 vscode를 쉽게 실행할 수 있도록 한다.
vscode를 실행한 후 메뉴에서 terminal -> new terminal를 실행하여 터미널을 하나 띄운 다음 Node.js 를 설치한다.
Node.js 설치
윈도우10과 달리 맥이나 리눅스에서는 nvm 프로그램으로 Node.js를 설치하는 것이 보통이다. vscode 터미널에서 다음 명령으로 nvm을 설치한다.
brew install wget
touch $HOME/.zshrc
wget -q0- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash명령을 실행하고 나면 $HOME/.zshrc 파일에 다음 내용이 삽입된다.
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm이제 이 내용이 셀에 반영되도록 다음 명령을 실행한다.
source .zshrcnvm을 사용하여 Node.js를 설치할 준비가 되었다. 다음 명령으로 최신 LTS 버전 Node.js를 설치한다. 그리고 제대로 설치됐는지 버전을 확인한다.
nvm install --lts
node -v자바11 JDK 설치
리액트 네이티브는 안드로이드 SDK 빌드 도구가 필요하다. 그런데 안드로이드 빌드 도구는 자바 버전 11 JDK가 설치되어야 동작한다. 그러므로 vscode 터미널에서 다음 명령을 실행하여 자바 버전 11 JDK를 설치한다.
brew tap homebrew/cask-versions
brew install --cask temurin11그리고 vscode 터미널에서 다음 명령을 실행하여 편집기로 .zshrc 파일을 연다.
code $HOME/.zshrc.zshrc 파일이 열리면 마지막 줄에 다음 내용을 삽입한다.
export JAVA_HOME=/Library/Java/JavaVirtualMachines/temurin-11.jdk/Contents/Home이제 .zsh 파일을 저장하고 다음 명령을 실행한다.
source .zshrc그리고 환경 변수 설정이 올바른지 확인한다.
echo $JAVA_HOME
java -versionXcode 설치
리액트 네이티브로 iOS앱을 개발하려면 xcode가 필요하다. 그러려면 먼저 developer.apple.com에서 계정을 만들어야 한다. 계정을 만들고 사이트에 로그인하여 xcode를 내려받아 설치한다. 버전은 12.2를 사용했다. xcode 업데이트에 따라 명령 줄 도구가 제대로 설정되지 않으면 cocoapods 의존성 설치에서 오류가 발생할 수 있다. 그러므로 설치가 끝나면 code -> preferences -> locations로 이동하여 command line tools에 xcode를 지정한다.
코코아팟 설치
리액트 네이티브 iOS앱을 만들려면 object-c로 구현된 네이티브 모듈이라는 부분을 빌드해야 한다. 그런데 object-c는 자바와 달리 원격 저장소에 호스팅된 오프소스 패키지를 내려받아 개발 컴퓨터에 설치하는 기능이 없다. 그러므로 object-c 프로젝트를 빌드할 때 코코아팟이라는 프로그램을 사용하여 원격 저장소에 호스팅된 각종 패키지를 내려받아 설치하는 과정이 필요하다. 코코아팟은 다음 명령으로 설치한다. 1.11.2 버전을 사용했다.
sudo gem install cocoapods
pod --version워치맨 설치
리액트 네이티블 프로젝트는 vscode 편집기에서 소스 파일을 변경하고 저장하면 이를 자동탐지하여 변경된 내용을 시뮬레이터 앱에 자동으로 반영하는데, 이 기능을 사용하려면 페이스북이 만든 워치맨이란 프로그램이 있어야 한다. 워치맨은 홈브루로 다음과 같이 설치 할 수 있다.
brew install watchman
watchman --version안드로이드 스튜디오 설치
안드로이드 스튜디오 내려받기 페이지에서 download android studio 버튼을 눌러 .dmg 파일을 내려받아 설치한다. 내려받은 .dmg 파일을 실행해서 왼쪽 아이콘을 오른쪽 application 부분으로 드래그하여 설치한다. 설치가 끝나면 런치패드에서 안드로이드 스튜디오 아이콘을 찾아 실행한다. 그리고 초기 화면 아래의 configure를 클릭한 다음 sdk manager를 실행하고 sdk tools 탭을 선택하여 설치를 확인한다. 만일 status가 update available 이라면 해당 항목을 업데이트한다. 다음은 안드로이드 sdk 중에서 리액트 네이티브 앱 개발에 필요한 항목으로 안드로이드 스튜디오를 설치할 때 기본으로 설치된다.
- Android SDK Build-Tools 32-rc1
- Android Emulator
- Android Emulator Hypervisor Driver for AMD Processors (installer)
- Android SDK Platform-Tools 21.0.3
- Android SDK Tools 26.1.1
이제 터미널에서 다음 명령을 실행하여 vscode로 .zshrc 파일을 편집한다.
code $HOME/.zshrc$Home/.zshrc에 다음 내용을 삽입하고 source .zshrc 명령을 실행한다.
export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/tools
export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools