[React-Native] #2_맥OS 개발 환경 구축

목차

• 홈브루(Homebrew) 설치
• 비주얼 스튜디오 코드(Visual Studio Code) 설치
• Node.js 설치
• 자바8 JDK 설치
• Xcode 설치
• 코코아팟(CocoaPods) 설치
• 워치맨(Watchman) 설치
• 안드로이드 스튜디오(Android Studio) 설치
• 리액트 네이티브 CLI (React Native CLI) 설치
• 프로젝트 생성 및 실행 확인

---

1.  홈브루(Homebrew) 설치

• 맥에서 사용하는 설치 프로그램인 홈브루 : https://brew.sh/ 에서 명령을 복사 후, 터미널에서 실행하여 설치 진행

Homebrew

---

2.  비주얼 스튜디오 코드(Visual Studio Code) 설치

• VScode 설치 링크 : https://code.visualstudio.com/download에서 맥os 버전 설치

Download Visual Studio Code - Mac, Linux, Windows

---

3.  Node.js 설치

• 리액트 네이티브는 자바스크립트 기반이기에 Nodejs 설치가 필요

brew install node

---

4.  자바8 JDK 설치

• 안드로이드 앱을 만들 때, 안드로이드 SDK 빌드 도구를 사용하기 위해 필요

brew tap AdoptOpenJDK/openjdk
brew install --cask adoptopenjdk8

 

cask 오류발생시, 아래 명령(cask 설치) 실행 후, 재시도

brew install cask

 

• .zshrc파일 수정

VScode로 .zshrc파일 실행

code $HOME/.zshrc

 

오류발생 시, .zshrc파일 생성

touch $HOME/.zshrc

 

export 내용을 삽입

export JAVA_HOME=/Library/Java/JavaVirtualMachines/adoptopenjdk-8.jdk/Contents/Home

 

저장 후 종료

 

.zshrc에 반영

source .zshrc

---

5.  Xcode 설치

• iOS앱을 개발할 때 필요 앱스토어에서 설치 https://apps.apple.com/us/app/xcode/id497799835?mt=12

‎Xcode

 

• 커맨드라인 툴 설정

Xcode → Preferences → Locations → Command Line Tools에 Xcode 지정

---

6.  코코아팟(CocoaPods) 설치

• iOS 앱을 만들 때, 오브젝트-C를 빌드하기 위해서는 코코아팟이 필요

sudo gem install cocoapods

---

7.  워치맨(Watchman) 설치

• 수정사항을 시뮬레이터 앱에 자동으로 반영할 때, 워치맨이 필요

brew install watchman

---

8.  안드로이드 스튜디오(Android Studio) 설치

• 안드로이드 앱을 개발할 때 필요 https://developer.android.com/studio

Download Android Studio and SDK tools  |  Android 스튜디오

 

• 안드로이드 환경 설정

초기화면  →  Configure(우측 하단) → SDK Manager → SDK Tools를 사진과 같이 Installed

 

VScode로 .zshrc파일 실행

code $HOME/.zhrc

 

export 내용 삽입 후, 저장

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

 

.zshrc 반영

source .zshrc

---

8.  리액트 네이티브 CLI (React Native CLI) 설치

npm install -g react-native-cli

---

8.  프로젝트 생성 및 실행 확인

• 생성

(기본)
npx react-native init 프로젝트명
(타입스크립트)
npx react-native init 프로젝트명 --template react-native-template-typescript

• 확인 (npm start, 안드로이드 앱, iOS 앱)

npm start
npm run android
npm run ios