Intro

최근 앱 개발자로 일하게 되면서 Mac을 사용하게 되었다.
m1 chip mac북에 개발환경 셋팅하는데 상당한 시간이 걸렸다.
난 mac북을 쳐다만 보아왔고 써보는 건 처음이다 :)

기록의 목적과 같은 처지의 분들이 시간을 세이브하시길 바라며 작성된 글입니다.
5번 포맷해가며 검증한 설치법입니다만 오류가 나올지도... 그때는 구글하십시오 :)

React native 공식 홈 설치법

react-native official setup flow
[https://reactnative.dev/docs/environment-setup](react native official website)

Mac os m1 chip은 CPU 아키텍쳐 arm64를 사용했다.
그래서 기존의 프로그램들을 가져와서 쓰기가 힘들다.
m1 : arch -arm64
intel 계열 : arch -x86_64

설치 전

1. .zshrc 파일 있는지 확인

   in Terminal

touch ~/.zshrc or vi ~/.zshrc

1. XCode 설치

   설치 시 rosetta 설치 여부(O)

   !!참고:

   Rosetta는 CPU 아키텍쳐  arm64 기반의 Mac os에서 CPU 아키텍쳐 x86_64기반의 프로그램의 실행을 도와준다.

   라이브러리의 설치된 폴더 위치나 환경변수를 기준으로 실행여부가 결정된다.

   e.g. home-brew

   • arm64 architecture: /opt/homebrew
   • x86 architecture: /usr/local/Homebrew

Installation of packages

아래 블로그를 참고해서 설치를 진행했다.

참고사이트 : https://dev-yakuza.posstree.com/ko/react-native/install-on-mac/#cocoapods-설치

1. Homebrew

   https://brew.sh/

   설치 완료 후 next-step :

   실행-1 : echo 'eval "$(/opt/homebrew/bin/brew shellenv)"' >> $HOME/.zprofile

   실행-2:  eval "$(/opt/homebrew/bin/brew shellenv)"

2. App 설치 /w Homebrew

Visual Studio Code & Google-chrome

brew install --cask visual-studio-code google-chrome

1. NodeJs

다양한 Node 설치법 있음. 

1번 방법으로 설치하길 ...

1. brew install node 
    
    가장 최신버전 설치 
    
    설치 위치 : /opt/homebrew/bin/node
    
2. brew install nodebrew 
    
    버전 선택하여 설치 가능
    
    설치 위치 : $HOME/.nodebrew/current/bin
    

3. brew install nvm 

버전 선택하여 설치 가능

4. nodeJs 홈페이지 페키지 인스톨

버전 선택하여 페키지 다운로드 및 인스톨

설치 위치 : /urs/local/bin/node

1. Yarn

    ```jsx
    brew install yarn
    ```
    

2. CocoaPods

    ```jsx
    sudo gem install cocoapods
    ```
    
    ```jsx
    Sudo gem install ffi
    ```
    

3. Watchman

    ```jsx
    brew install watchman
    ```
    

4. react-native-cli

    ```jsx
    brew install --cask react-native-cli
    ```
    

5. react-native-debugger

    ```jsx
    brew install --cask react-native-debugger
    ```
    

6. openJDK

```jsx
brew tap AdoptOpenJDK/openjdk
```

```jsx
brew install --cask adoptopenjdk8
```

7. Android Studio

download from official website and install 

Xcode

Xcode로 IOS앱을 실제 디바이스와 시뮬레이터에 구동. 

개발자 아이디 등록 필요 (계정정보 in google drive) 

Simulator로 구동 _: xcode 빌드 또는 vscode cli command

project 경로에서 npm or yarn run ios  

ios 앱 구동할 경우 xcode에 별도의 설정이 필요함. 
Build setting > excluded architecture > any ios simulator SDK> arm64 추가

실제 디바이스로 구동_ : xcode에서 build 버튼을 사용함.

Build setting > excluded architecture > any ios simulator SDK> arm64 삭제

연결된 디바이스 선택 

Xcode clean build 방법 
(에러 발생 시 자주 사용) 

1. cmd + shift + k  (Xcode)
2. rm -rf ~/Library/Developer/Xcode/DerivedData/* (Terminal)

Android studio

안드로이드는 project 경로에서 npm or yarn run android

Sdk setting(안드로이드 스튜디오 설치할 때) 
    
    - Android SDK Platform 29
    - Sources for Android 29
    - Intel x86 Atom_64 System Image
    - Google APIs Intel Intel x86 Atom System Image
    - Google APIs Intel Intel x86 Atom_64 System Image
    
    
    
   vi ~/.zshrc or. ~/.zprofile in Terminal
    
    export ANDROID_HOME=$HOME/Library/Android/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

연결된 디바이스 확인

adb devices 

CocoaPods & pod install

여기서 에러가 많이 남. 특히 기존에 만들어둔 ios앱을 구동할 경우

pod install : project name / ios 폴더 안에서
npx pod-install : project name 폴더 안에서

A . pod install 오류 발생 시

rm -rf pods podfile.lock
pod cache clean -- all 
pod install 

*해결 안될 경우

sudo arch -x86_64 gem install ffi 

in ios 폴더

arch -x86_64 pod install 
arch -x86_64 pod install —repo-update

*그래도 안될 경우

sudo gem install cocoapods 로 설치한 경우에 참고바람.

CocoaPods 삭제 & gem 삭제

sudo gem uninstall cocoapods

gem list --local | grep cocoapods | awk '{print $1}' | xargs sudo gem uninstall

재설치

sudo arch -x86_64 gem install ffi 
sudo arch -x86_64 gem install cocoapods

in ios 폴더

arch -x86_64 pod install 

VSCode

참고용.

Extensions 설치

eslint & prettier

https://velog.io/@cookncoding/ESLint-Prettier-Airbnb-Style-Guide로-프로젝트-세팅하기