React Native CLI 설치하기(mac)

React Native란? 

자바스크립트 언어로 React의 방식을 이용하여 모바일 안드로이드와 iOS를 만들 수 있는 프레임워크이다.

 

리액트 네이티브를 개발할 수 있는 방법엔 두가지가 있다. React Native CLI와 Expo CLI.

이 둘을 간단하게 비교하자면

 

1. Expo CLI

 - 초기설정 간단

- 손쉬운 사용

- 네이티브파일과 라이브러리사용에 제한이 있다.

- 용량이 크다.

 

2. React Native CLI

 - 초기설정 까다로움

- 원하는 기능이나 라이브러리 자유롭게 사용 가능

- Android Studio(Android용) 및 XCode(iOS용)를 설치해야 한다.

 

이런 특징들을 가지고 있다.

목적에 따라 설치를 선택하면 될것같다. 

 

React Native CLI를 사용할것이기 때문에 설치방법을 정리해본다. 

 

---

설치방법

 

설치목록

- homebrew

- nodejs : 자바스크립트 런타임
- watchman : 소스코드 추가, 변경일어나면 자동 빌드
- react-native-cli 
- xcode : ios 네이티브 개발 툴
- cocoapod : ios 의존성 관리자
- android studio : 안드로이드 네이티브 개발 툴
- jdk8: java Development Kit

 

 

homebrew설치

(1) homebrew설치 https://brew.sh/index_ko

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

(2)(mac m1칩 해당)Next steps의 command 한줄 씩 복사해서 입력 (총3줄)

(3) homebrew 버전확인

brew --version

 

node, watchman 설치

brew install node
brew install watchman

//버전확인
node --version
watchman -v

 

React-Native CLI 설치   

공식문서에 따르면 글로벌로 설치하면 예기치못한 문제가 발생할 수 있다고 한다. 일단 패스!

//npm install -g react-native-cli

//버전확인
//react-native --version

// 언인스톨
npm uninstall -g react-native-cli @react-native-community/cli

 

Xcode, 안드로이드 스튜디오 설치

Xcode: 링크바로가기

 

안드로이드 스튜디오: 링크바로가기 

설치마법사 나오면 아래 사항이 모두 체크되어 있는지 확인.

• Android SDK
• Android SDK Platform
• Android Virtual Device

 

Cocoapods 설치

sudo gem install cocoapods

//버전확인
pod --version

Ruby ffi 설치 (애플실리콘만  해당- m1칩 등 유저) 

cocoapods를 통한 외부패키지 적용 및 설치가 안될 수 있는 오류를 Ruby ffi가 해결해줄 수 있기 때문에 애플실리콘 맥을 사용하고 있다면 무조건 설치해야 한다.

sudo gem install ffi

 

JDK 설치 

Zulu OpenJDK 배포판은 Intel 및 M1 Mac 용 JDK를 제공한다. 이렇게 하면 Intel 기반 JDK를 사용할 때보다 M1 Mac에서 빌드 속도가 빨라진다.

시스템에 이미 JDK를 설치한 경우 JDK 11을 권장한다. 더 높은 JDK 버전을 사용하면 문제가 발생할 수 있다.

brew tap homebrew/cask-versions
brew install --cask zulu11

//버전확인
java -version
javac -version

 

위의 기본적인 설치가 끝나면 공식문서를 참고해가면서 개발환경설정 진행하기.

https://reactnative.dev/docs/environment-setup

Setting up the development environment · React Native

 

---

설치중 만난 에러들.. 혹시 에러로 고생하시는 분들이 계신다면 도움이 되었음 좋겠다..

 

https://jaylee-log.tistory.com/85

[react-native] 개발환경설정중 발생한 에러 모음