[React-Native] React-Native CLI로 프로젝트 시작, 셋팅(Mac,IOS)

전전 글에서 EXPO로 프로젝트를 생성했었다

그리고 나서 폰트 적용때문에 이것저것 찾다가 뭔가 파일구조가 다른 글을 보게되었다

분명히 나랑 똑같은 React-Native인 거 같은데 왜 다를까 궁금해서 찾아보니까 react-native cli로 프로젝트를 만들었다는 걸 알게 되었다.

사실 공홈에도 EXPO와 React-Native CLI로 나뉘어져있다. 단지 처음에 EXPO로 만드는 방법을 배워서 편한대로 프로젝트를 만들었는데, 지금보니 도대체 차이점이 뭘까 싶었다

 

1. 차이점

  1) EXPO

- EXPO에서 제공하는 관련 라이브러리가 많고 이를 활용해 빠른 앱 구축 가능

- xcode나 android studio없이도 EXPO App만 설치하면 내 휴대폰으로 바로바로 테스트 가능함

- EXPO에서 제공하지 않는 모듈의 경우 EXPO에서 제공하는 eject을 사용해 설정해주어야하는데 번거롭다고 함(아직 안 해봐서 모르겠음)

- EXPO로 만든 앱의 번들크기가 React-Native cli로 만든 앱에 비해 커서 앱을 다운받는데 시간이 좀 더 소요될 수 있음

- Expo를 사용하면 앱 스토어에서 새 버전을 다운로드할 필요 없이 앱 업데이트를 사용자 디바이스에 직접 배포할 수 있음

 

  2) Reactt-Native CLI

- 모든 네이티브 모듈에 접근할 수 있으므로 프로젝트 설정 및 구성을 최대한 유연하게 제어할 수 있음

- Reactt-Native CLI로 앱을 만들 때 초기 설정할 때 EXPO보다 시간이 더 오래 걸림

- 리액트 혹은 모바일 앱 개발에 익숙하지 않다면 러닝커브가 좀 있다

 

EXPO는 앱 개발이 처음이거나 혹은 빠르게 프로토 타입을 만들어야하는 경우 사용하면 좋을듯하다.

그리고 네이티브 모듈을 커스터마이징할게 아니고 EXPO에서 제공하는 기능들로 만들어도 충분한 경우라면 EXPO로 앱을 만들어도 될듯하다

React-Native CLI는 네이티브 앱 개발 경험이 있거나 네이티브 모듈을 제어하거나 커스터마이징해야하는 경우라면 사용하면 될거같다

 

사실 내가 다시 만드려는 앱도 그렇게 엄청난 기능을 요구하는 건 아니지만 EXPO로는 해봤으니까 React-Native CLI로 앱을 만들어보고 싶어졌다. 직접 해보면 어떻게 다른지 더 잘 알 수 있을테니까!

 

2. 설치 (IOS)

나는 맥을 사용하기 때문에 맥 기준으로 설치했다.

 

1) node.js, watchman install

 

brew install node
brew install watchman

 

설치한 후 node 버전이 18버전 이상인지 살펴보자

버전은 아래와 같이 확인할 수 있다

 

node -v

 

 

2) xcode 설치

- app store에서 xcode를 검색하고 설치한다

 

https://apps.apple.com/kr/app/xcode/id497799835?mt=12

‎Xcode

 

- 설치 후 xcode -> settings -> location의 command line tool을 가장 최신 버전으로 선택해준다

 

- ios 시뮬레이터를 설치한다

settings -> platforms 탭에서 ' + ' 버튼을 눌러 ios를 추가해준다

 

 

3) cocoapods 설치

https://guides.cocoapods.org/using/getting-started.html

CocoaPods Guides

 

sudo gem install cocoapods 
pod --version

 

에러)

cocoapods를 설치 후 pod --version를 입력해 버전을 확인하려고 했는데 설치가 아예 안 된 것인지 pod이 자꾸 없다는 에러 메세지가 나왔다. 아예 설치조차 안 되어있다니 무슨 일이지

이것저것 서치해보니 ruby 버전문제였다ㅋ...

ruby 버전이 낮았고 버전을 업데이트 해주기 위해서 아래와 같이 했다

 

brew update 
brew install rbenv

 

Homebrew를 최신버전으로 업데이트하고 난 후 마찬가지로 최신 버전의 rbenv를 설치한다

 

rbenv install -l
rbenv install 버전명 (ex: rbenv install 3.3.0)

 

rbenv install -l 명령어를 통해 설치가능한 스테이블한 최신 버전의 리스트들을 볼 수 있다

버전을 확인했다면 설치하고 싶은 버전을 설치한다

 

ruby -v

 

ruby 버전을 확인 후 버전이 업데이트 되었는지 확인한다

 

이것도 안 되면 path를 다시 설정해주는 것도 있던데 나는 여기까지 해도 잘 해결되었다

 

4) 앱 실행

npm run

 

Metro라는 리액트 네이티브용 자바스크립트 번들툴로 개발 서버를 시작하기 위해서 아래와 같이 입력한다

i(ios)를 눌러 아래와 같이 보인다면 성공한거다

 

하지만...

나는 여기서 에러가 좀 났었는데 (조금 오래 되서 기억이 잘 안남^^...)

이럴 때 유용한 것이 npx react-native doctor 였다

command line에 바로 입력하면 아래와 같이 에러와 경고를 보여주고 어떤 걸 고쳐야되는지 직관적으로 보여준다

이걸로 많이 도움을 받았다... 고마워요 react-native doctor...