react-native 공식문서에 충실한 개발환경 셋팅하기!

개발자 커리어 전환 후 1개월 반의 시간이 흘렀다.
현업에 가면 얼마나 많은 것을 배우고 부딪힐지 설레기도 했고 걱정도 되었는데..

짧은 시간이지만 그 동안의 개발자로서 지낸 시간을 돌아보니,
가장 어려웠던 점은 코딩도 아니고! 로직 구현도 아니고!! 개발환경 셋팅이었다.. 😭 😭

React는 크게 어려운 점은 없는데 문제는 React-Native..
업무용 맥북과 개인용 맥북을.. 여러 에러로 삽질해가며 익힌!!!
React-Native 개발환경 셋팅 방법에 대해 정리해본다.

시작하기 전!! 사수님이 하셨던 말씀 꼭 기억하기!!!

공식 문서에서 크게 벗어나지 않는다!!!

---

iOS 개발 환경 셋팅하기

1. Xcode 설치

Xcode는 다운하는 데에도 오랜 시간이 소요되기 때문에 우선 다운부터 하자!

appStore > Xcode 검색 및 설치

---

2. Node & Watchman 설치

Homebrew를 먼저 설치해준다.

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

설치 완료되었다면 버전 확인이 되어야 한다.

brew --version

Homebrew는 맥에서 다양한 도구들을 설치할 수 있는 패키지 매니저. 개발할때 굉장히 유용하다.

그 다음 아래 명령어로 Node와 Watchman을 설치한다.

brew install node
brew install watchman

node가 설치될때 node package manager인 npm도 같이 설치된다. 마찬가지로 잘 설치 되었는지 버전 확인하기!

node -v
npm -v

watchman은 특정 폴더나 파일을 감시해서 변경시에 특정 동작을 하는 역할로 react-native에서 코드 수정시 바로 적용 할 수 있도록 도와준다.
마찬가지로 잘 설치 되었는지 확인!

watchman --version

그 동안 Xcode가 설치되었다면 아래와 같은 그림으로 Command Line Tools 선택하기!

Preferences > Locations

---

3. CocoaPods 설치

CocoaPods는 ios 개발을 할때 꼭 필요한 의존성 관리자이다. 마찬가지로 버전 확인까지!!
참고로, CocoaPods를 업데이트하려면 gem을 다시 설치하기만 하면된다.

sudo gem install cocoapods
pod --version

---

4. ffi 설치

Ruby FFI 라이브러리 까지 설치해주면 끝!

sudo gem install ffi

---

5. Rosetta 설정

Xcode와 터미널 우클릭 > 정보가져오기 > Rosetta를 사용하여 열기 선택

---

6. React-Native 설치

React-Native 설치 후 정확히 설치되었는지 버전까지 꼭 확인하자!

npm install -g react-native-cli
react-native --version

설치가 잘 되었다면 프로젝트를 생성하고,

react-native init 생성할프로젝트명

ios 폴더로 가서 pod를 설치하고

cd ios
pod install

다시 프로젝트 폴더로 돌아와 앱을 실행시키면 된다!!

cd ..
npm run ios

---

7. 에러

1) cache 에러

npm cache 문제 때문에 npm ERR! code ELIFECYCLE 이런 에러가 보인다면
프로젝트 폴더에서 캐쉬와 모듈 모두 지우고 npm 다시 설치하기!

npm cache clean --force
rm -rf node_modules package-lock.json
npm install

2) version 에러

내 경우엔 맥북을 사고 node를 설치한 지 좀 돼서 그런지(사실 몇 개월 안된것같은데.. 여튼!)

에러메세지:metro has encountered an error: cannot read property 'transformfile' of undefined

라는 이상한 에러가 발생했는데, node 버전을 업데이트 하니 에러가 사라졌다. 👀

3) cocoapod를 통한 pod install 실패

Ruby FFI 라이브러리 호환성 에러

M1 환경에서 cocoapod 설치까지는 잘 진행되었으나 pod install 실패..
구글링해보니 Ruby FFI 라이브러리 호환성 에러로 확인되어 ffi 아키텍쳐를 지정해서 실행해보니 에러가 해결되었다...🥲

에러메세지: Don't forget to include the Crash Report log file under DiagnosticReports directory in bug reports.

ffi를 설치할 때 아키텍쳐를 x86_64 로 지정하여 설치하는 방식

• M1은 arm 기반이라 arch 명령을 수행해보면 arm64 라고 나온다

sudo arch -x86_64 gem install ffi

설치만 하면 pod install 이 잘 동작하지 않는다😥😥
그냥 pod install 명령을 사용하면 아키텍쳐가 arm64 로 인식되기 때문에 여전히 아키텍쳐 관련한 호환성 문제가 발생한다😱😱😱 명령 앞에 아키텍쳐를 지정해서 실행해보니 에러가 해결되었다..

arch -x86_64 pod install

---