M1에서 React Native 세팅하기

Hyehyeon Moon·2023년 5월 29일

딩동프로젝트

목록 보기

1/1

React Native 세팅을 하게 된 이유

디프만 ding-dong 프로젝트에서 React Native를 이용해 웹뷰를 감싸기로 하였다.

처음 접하기 때문에 expo를 사용하려 했지만 이런저런 글들을 참고하면서 제약이 많은 expo보다는 조금 어렵더라도 React Native를 가는 게 좋다는 생각이 들었다.
그래서 React Native를 건드렸고...끝없는 에러와 싸우는 3시간...진짜 1시간 더 붙잡고 있었으면 expo로 갈아탔다..

이 글은 끝없는 에러와 싸우는 3시간을 우리 팀원들이 겪지 않게 하기 위해 적는 글이다.

세팅환경과 제약사항

세팅환경
- Development OS : macOS
- TargetOS : iOS
기본 준비사항 : Homebrew, Xcode, nvm
제약사항
- Node를 여러 버전 사용하고 있음(NVM)
- system ruby 버전을 글로벌하게 바꾸면 안됨
-함부로 mac 기본 세팅 바꾸는 걸 두려워함

세팅 과정

전반적인 세팅 과정은 React Native learning guide를 참고했습니다. 공식문서가 정말 잘 작성되어 있으니 한 번 훑어보시는 것을 추천드립니다.

NVM과 Node

NVM을 이용해 Node를 설치

nvm install v18.16.0 // ding-dong 프로젝트에서 현재 사용하는 버전

사용하고 싶은 Node 버전을 설정

만약 처음 React Native를 세팅하고 있다면 React Native에서 사용하고자 하는 Node 버전을 기본으로 설정해야 합니다.
그 이유는 npx react-native init {프로젝트이름}로 폴더 생성 시 폴더 내 node 버전은 기본 버전에 따르기 때문입니다.
```
nvm alias default v18.16.0
```
React Native application을 생성한 뒤 기본 Node 버전을 원래대로 수정하고 .nvmrc 파일을 만들어서 React Native project에 추가하세요. (예시 : .nvmrc)
```
nvm alias default v16.16.0 // 원래 사용하고 있던 버전으로 다시 바꿈
```
```
//.nvmrc 파일 생성
v18.16.0
```
다른 팀원들은 github에서 클론해 올 경우 아래 명령어로 충분합니다.
```
//.nvmrc 가 있을 경우
nvm use
```

Watchman

Watchman을 brew를 이용해 설치합니다.

brew install watchman

Ruby

system ruby 버전 확인
기본으로 Mac에 ruby가 설치되어 있습니다. React Native에서 지원하는 버전과 일치하는지 확인합니다.
```
ruby --version
```
rbenv 설치
만약 맞지 않다면 Ruby version manager인 rbenv를 설치합니다.
```
brew install rbenv ruby-build
```
아래 명렁어를 실행하면 rbenv를 쉘에 적용하기위한 지시사항이 나옵니다.
m1이기 때문에 zshrc로 나오지만 mac 기종에 따라서 파일이 각각 다르게 나올 수 있습니다.
```
rbenv init
```
~/.zshrc 에 eval "$(rbenv init -)" 을 덧붙여주라는 지시사항입니다.
아래 명령어를 입력하면 위 지시사항을 수행합니다.
```
echo `eval "$(rbenv init - zsh)"` >> ~/.zshrc
```
ruby 설치
React Native에 맞는 ruby 버전을 설치해줍니다.
```
rbenv install 2.7.6
```
Ruby 버전 변경

현재 설치된 ruby 버전을 확인할 수 있습니다. system이 global로 설정되어 있고 방금 설치한 2.7.6이 있는 것을 볼 수 있습니다.
```
rbenv versions
```

현재 디렉토리 하위 전체에 대하여 ruby version을 설정하거나

rbenv local 2.7.6

global로 전역에서 사용할 ruby version을 설정합니다.

rbenv global 2.7.6

저는 기본적인 system 버전을 수정할 경우 다른 곳에서 문제가 생길 수도 있는 점이 염려되어 local로 ruby version을 설정했습니다.

CocoaPods

CocoaPods를 설치합니다.

주의할 점은 CocoaPods도 필요로 하는 ruby version이 있습니다. 따라서 rbenv에서 local로 ruby version을 설정했을 경우에는 해당 디렉토리에서 CocoaPods를 설치하세요.

cd depromeet // 2.7.6 ruby version을 설정한 디렉토리로 이동
sudo gem install cocoapods

React Native application 시작하기

React Native application 생성

React Native 프로젝트를 만들기 위한 모든 세팅이 완료되었습니다!!
아래 명령어를 통해 프로젝트를 만들어 봅시다!

npx react-native init {프로젝트이름}

이전에 react-native-cli 를 global로 설치했다면 꼭 미리 삭제해주시기 바랍니다. 예상하지 못한 이슈들이 생길 수 있습니다.
npm uninstall -g react-native-cli @react-native-community/cli

React Native application 실행

Metro를 시작

// 생성한 폴더로 이동합니다.
cd {프로젝트이름}
npx react-native start or yarn react-native start

application을 실행

// 다른 터미널에서 명령어를 칩니다.
npx react-native run-ios or yarn react-native run-ios

내가 겪었던 에러들

Unable to boot device in current state: Booted

yarn react-native run-ios로 application을 실행하면서 만난 에러입니다.

해결방법은 아래와 같습니다. (참고 : 블로그)
Simulator를 열고 Preferences -> 'Simulator lifetime' 에서 When Simulator starts boots the most recently used simulator 체크해제

BUILD FAILED Requested but did not find extension point with identifier Xcode.IDEKit.ExtensionSentinelHostApplications for extension Xcode.DebuggerFoundation.AppExtensionHosts.watchOS of plug-in com.apple.dt.IDEWatchSupportCore

yarn react-native run-ios로 application을 실행하면서 만난 에러입니다.

commandLineTool을 삭제하고 다시 설치하기

아래 코드를 터미널에 작성합니다. (참고 : 블로그)
네트워크 상태에 따라서 시간이 상이하게 걸리며 저는 원활한 4G 상태에서 10분 정도 걸렸습니다.
```
// Remove CommandLineTools
sudo rm -rf /Library/Developer/CommandLineTools

// Reinstall CommandLineTools
xcode-select --install

// Select CommandLineTools
sudo xcode-select -s /Library/Developer/CommandLineTools
```
Xcode의 Preferences -> Location -> Command Line Tools 가 비어있을 것입니다. 해당 부분을 채워줍니다. (참고 : stackoverflow)
Xcode 설정을 바꾸기

xcode로 (아무 프로젝트나 괜찮은 듯)프로젝트를 열고
General- > Build phases -> Bundle React Native code and images 에서 Based on dependency analysis 를 체크 해제합니다.

두 가지 중 한가지만 적용해도 해결될 수도 있고 두 가지 모두 적용해야 해결될 수 있습니다. 상황과 기호에 따라서 선택하시면 될 것 같습니다.