[React Native] React-Native-Cli 환경설정(MAC) + 환경설정 에러 관련

# React-Native-Cli 환경설정 (MAC)

## React Native

리액트 네이티브를 개발할 때는 크게 두 가지의 방법이 사용된다.

- Expo
- React-Native-Cli

Expo는 초기 프로젝트 세팅이 쉬운 대신 필요없는 의존성이 마구 추가되어있고 필요한 라이브러리는 또 따로 설치해줘야한다. React-Native-Cli는 초기 프로젝트 세팅이 어려운 대신 원하는 의존성만 추가해서 커스텀 할 수있다. 또한 native 파일 접근 유무에 대해서도 차이를 가지고 있다. Expo는 접근할 수 없지만 React-Native-Cli는 접근 할 수 있다는 것.

React 개발자인 나의 입장에서 Expo는 CRA로 프로젝트 세팅하는 것이고 React-Native-Cli는 Webpack과 같이 별도의 모듈번들러를 이용해 프로젝트 세팅하는 것과 비슷하다고 느꼈다. (초보 입장이라 틀린 걸 수도 있지만)

Expo가 쉽다해서 그거로 해보고 싶었는데 아무래도 회사에서는 Cli를 사용하는 것 같길래 눈물을 머금고 Cli를 도전한 나.. (So 불쌍)

## 시작 전 설치

React-Native를 이용해 개발하기 위해서는 설치가 필요한 앱이 2개 있다. 바로 에뮬레이터~.~

실제 폰을 사용해도 좋지만 이왕 개발하는거 노트북을 혹사시켜보자

- Android Studio 설치
- Xcode 설치

각각 안드로이드와 ios앱 개발을 하는 프로그램인데 어차피 우리는 rn을 이용할 것이기 때문에 안에서 프로젝트 만들필요 없음. 애뮬레이터만 쑉 빼서 사용할 예정이기 때문이다.

## 프로젝트 환경 셋팅

환경 셋팅은 크게 다음과 같이 진행할 예정이다.

- Homebrew 설치
- npm, yarn (패키지 매니저) 설치
- node.js 설치
- jdk 설치 및 환경변수 설정
- Xcode 환경변수 설정
- Android studio sdk 설정
- rn에 필요한 기타 모듈 설치
- project init

### Homebrew 설치

npm과 yarn을 설치하기 위해 Mac용 패키지 매니저를 설치해야한다.
바로 Homebrew인데 터미널을 통해 간단하게 패키지를 설치하기 위해서 꼭 설치해주도록 하자. 아래 명령어 복붙하면 된다. $는 빼고 복붙하자.

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

그리고 설치했으면 설치 확인

```jsx
$ brew --version
```

만약 `zsh: command not found: brew`가 발생한다면 아래 커맨드를 다시 실행하도록...

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

$ echo 'export PATH=/opt/homebrew/bin:$PATH' >> ~/.zshrc

$ source ~/.zshrc
```

### Node.js 설치

```jsx
brew install node // 설치
npm --version // 설치 확인
```

### Watchman 설치

사실 나도 이거 왜 설치하는지 모르겠는데 디버그 모드에 필요하다고 한다.

```jsx
brew install watchman // 설치
watchman --version // 설치 확인
```

### CocoaPods 설치

ios 앱 개발시 필요한 의존성 관리자로 ios 개발시 npm이나 yarn 같은 친구다.

```jsx
sudo gem install cocoapods // 설치
pod --version // 설치 확인
```

### JDK 설치

설치 전 안정화 된 버전을 검색하여 설치하도록 하자. 실제로 나는 11버전을 처음 설치했는데 버전이 너무 낮아서 안드로이드 개발할 때 빌드 에러떴다…….. 

너무 최신은 버그 있을 수 있으니 처음부터 장기관리버전으로 설치하는걸 추천한다.

```jsx
brew tap AdoptOpenJDK/openjdk
brew install --cask adoptopenjdk22

java -version//설치 확인
```

이후 jdk를 설치한 경로를 확인한다. 보통은 아래와 같을 것

`/Library/Java/JavaVirtualMachines/adoptopenjdk-11.jdk/Contents/Home`

```jsx
open ~/.zshrc //bash쓰는 사람은 zshrc 부분만 bash에 맞게 수정

---아래 코드를 복사하여 환경변수에 복붙하자 ---
---편집기 사용법을 모른다면 리눅스 파일편집기 명령어 검색---

JAVA_HOME=위에서 복사한 경로 복붙하기
PATH=$PATH:$JAVA_HOME/bin
export JAVA_HOME
export PATH

--- 저장 후 터미널에 아래 명령어 복붙 ---
source ~/.zshrc
```

### Xcode 설치

Xcode는 아쉽게도 ios만 설치할 수 있다. 앱스토어 검색한 후 설치하면 끝. 시간은 오래걸린다. 

### Android Studio 설치

아래 들어가서 설치하면된다. 설치는 압도적으로 오래걸린다. 

https://developer.android.com/studio

위 두개 다 직접 안에서 코드 짤거면 따로 설정해줘야 하긴 하는데 rn으로 개발하고 실행시킬거면 굳이 할 것 없다. 핸드폰 에뮬레이터만 원하는 버전이 따로 있다면 그거 설치하도록 하자.

다만 환경 변수 설정은 해줘야하는데 window는 쉬우니까 구글링하도록.

### 환경 변수 설정

1. 안드로이드

Android Studio에서 SDK 들어감 - 메뉴 상단에 있는 SDK Location 위치 복사 (노트북 경로)

```jsx
open ~/.zshrc //bash쓰는 사람은 zshrc 부분만 bash에 맞게 수정

---아래 코드를 복사하여 환경변수에 복붙하자 ---
---편집기 사용법을 모른다면 리눅스 파일편집기 명령어 검색---

export ANDROID_HOME=복사한 자신의 안드로이드 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

--- 저장 후 터미널에 아래 명령어 복붙 ---
source ~/.zshrc
```

## RN 프로젝트 생성

이제부터 본인이 믿는 신한테 기도시작하면 된다. 무교라도 일단 빌어야 함 

### CLI 설치

글로벌로 설치하면 에러 나더라. 글로벌로 설치하지말자.

```jsx
npx react-native@latest init MyApp
```

### 실행

안드로이드 스튜디오와 xcode는 별도로 실행할 필요없다.

아래 명령어 치면 rn이 빌드하면서 원하는 os에 맞는 에뮬레이터를 실행해준다.

```jsx
npm run ios 
npm run android
```

# 환경설정 시 만난 문제들

### `Error installing cocoapods: The last version of activesupport (>= 5.0, < 8) to support your Ruby & RubyGems was 6.1.7.3. Try installing it with `gem install activesupport -v 6.1.7.3` and then running the current command again activesupport requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210`

루비 버전 안맞는 거다. 

```jsx
brew install rbenv
rbenv install 3.2.2 //이거는 에러문구에 몇 이상 설치하라고 나와있다. 
rbenv global 3.2.2 // 시스템 버전 말고 방금 깐걸 전역 설정해줘야함
ruby --version // 이거 버전이 설치버전이면 잘된거

---루비 패키지 관리자도 필요할 때---
gem install bundler //일단 뭔지 모르겠으면 깔고보는거임
```

### `found 0 vulnerabilities \npm\node_modules\react-native-cli\index.js:302 cli.init(root, projectName);`

react-native init project 시 나오는 문제로 버전 문제다.

react-native와 react-native-cli을 삭제 후 가장 활성화 된 버전으로 다시 설치하자

### `TypeError: cli.init is not a function`

글로벌로 cli가 설치되어있다면 나올 수 있는 에러.

전역된 버전 삭제하고 Npx로 설치하자.

```jsx
npm uninstall -g react-native-cli @react-native-community/cli react-native
npm -g list

npx react-native@latest init MyApp
```

### `Zsh:command not found: pod`

cocoapods가 제대로 설치안될 경우다. 새 컴퓨터에 설치하다보면 권한 설정도 해줘야하는데 내 경우는 권한설정하면서 이전에 설치된 모듈에 대해 문제가 생긴게 아닐까 추측.

```jsx
sudo gem install cocoapods
brew install cocoapods
brew --version
pod --version
```

### `error Failed to build ios project. "xcodebuild" exited with error code '65'. To debug build logs further, consider building your app with Xcode.app, by opening 'practice_rn.xcodeproj'`

라이브러리 설치후 ios 패키지 매니저 실행안한 것. 뭐 설치하면 습관적으로 아래 명령어 실행하자.

```jsx
cd ios
pod install
```

이래도 똑같은거 뜨면 캐시 날리고 다시 설치하자.

```jsx
cd ios
rm -rf Pods
rm -rf Podfile.lock
pod install
```