[React Native] 맥 미니 M1칩 리액트 네이티브 개발환경 세팅하기(+expo, React-Native CLI)

 

새로 들어가게 된 회사에서 맥북 미니를 받았는데, 개발환경을 세팅하려고 하니, M1칩이 아주 말썽이었다. 인프런에서 듣고 있는 리액트 네이티브 강의 내용대로 세팅을 하려는데, 아마 강사님은 맥북 프로를 쓰시는 건지 척척척 환경이 세팅이 되는데... 나는 왜 안될까..ㅠ_ㅠ

 

구글링을 몇 시간동안 하다가, 새벽 3시까지 환경을 세팅했고 결국 난 해냈다. 아직 props 진행하면서 라이브러리를 하나씩 다운 받을 때마다 매우 버벅거리고 다른 방법으로 또 깔아야 하긴 하지만... 얼추 기본적인 세팅은 다 되었다 :) 

 

나중에 또 깔아야 할때나, 아직 맥북을 쓰지 않고 있는 동료에게... 곧 써야하기에 정리를 해두려고 한다. 아마 나처럼 삽질 of 삽질을 엄청나게 해댈걸 알기에. 

일단 맥 미니 M1칩은 개발자들 사이에서도 말이 많은 듯 하다. 특히 애플 M1의 기초가 된 ARM 아키텍처는 기존 인텔 프로세서에서 처리하는 명령어 세트와는 전혀 다르다. 그렇기 때문에 이러한 부분들이 호환되지 않는 것을 이해한다면 얼마나 많은 기술적 난제가 있을 지 짐작할 수 있다.(내가 삽질을 한 이유이기도 하다)

 

몇 시간동안 스택플로우와 여러 기술블로그를 뒤져본 결과, 해당 블로그가 그나마 가장 안정적으로 설치가 되도록 잘 설명해 놓았고, 이 절차대로 설치했을 때 오류가 나거나 변경해서 진행해야 하는 점을 아래에 기록해 두었다.

(참고 블로그 : https://qnrjs42.blog/react-native/m1-arm64-setting)

 

*필수조건*

일단 먼저, 기본 터미널 말고 로제타 2로 진행을 해야 하며, 라이브러리나 무언가를 설치하고 나서는 거의 대부분 .zsh설정파일에 실행설정을 추가해주어야 한다(맨마지막 줄에 설치 경로 추가). 

그리고 노드 버전이 호환이 되지 않는 버전이 있으므로, 대부분 다운 그레이드 해서 재설치 해야 한다. 

1. brew로 nvm 설치시, 프로그램 설치 / 삭제

칩셋이 다른 M1 macbook 같은 경우 Cannot install under Rosetta 2 in ARM default prefix (/opt/homebrew) 라는 에러가 발생할 수 있다.

 

이때는 brew 앞에 arch -arm64 를 같이 작성하여 설치를 시도한다.

# 설치

brew install [packege or program]



# install 시 Rosetta2 관련 에러 발생 시

arch -arm64 brew install [packege or program]



# 삭제

brew uninstall [packege or program]

Bash

 

2. node 버전 바꿔서 설치하기 - 개발환경 세팅 전에 node 버전을 상위버전으로 설치한 경우

- Nvm install 16.6.1 안먹힐때

//[Delete and Reset the prefix]
$ npm config delete prefix 
$ npm config set prefix $NVM_DIR/versions/node/v버전

 

3. Facebook SDK 패키지 설치하기

yarn add react-native-fbsdk-next

 

4. React Native CLI 설정

- XCODE에서 BridgingFile.switft 파일을 생성하는 이유

 

: 현재는 문제가 없을수도 있지만, 이후 라이브러리에서 Swift를 사용하는 라이브러리를 설치하시거나, Swift 코드를 작성하는 경우가 생긴다면 Bridging Header가 필요함.

 

5. iOS 또는 Android 스뮬레이터 실행 시 Diconnect to Metro 오류 발생 시

: Reload 하기 -> Commnd+r

<!-------끝-------!>