React-native setting(iOS)

오늘도 삽질중·2023년 6월 19일
RNexpo-goreact native clisettings
1

React-native

목록 보기
1/1
post-thumbnail

웹 개발자에서 앱 개발자로 가보자공~
RN을 사용하는것에는 2 가지 방법이 있는데

  1. Expo Go
  2. React Native CLI

✅ Expo Go

  • expo go는 로컬환경에서 아무것도 구축하지 않고 Android, iOS 장치에서 React Native앱을 테스트하기 위한 목적이다.
  1. 다음 커맨드 라인을 터미널 프롬프트에 입력(with Yarn)
yarn create expo-app AwesomeProject

cd AwesomeProject
yarn expo start
  1. 폰 카메라 켜서 터미널에 나오는 큐알 코드 스캔해서 expo go를 설치
  2. 폰화면에 Open up App.js to start working on your app! 뜨게됨.
    vscode들어가서 app.js에서 텍스트 내용 변경해보자. 변경 사항이 폰에 바로 반영되는걸확인할 수 있다.

expo go로 세팅 후 느낀 장점은 '너무 쉽다' 였다.
expo를 사용할 때 필요한것은 node.js 그리고 스마트폰만 있으면 되고 위에 사용방법 대로만 따라면 쉽게 테스트 환경을 만들 수 있다.

expo 공식문서에서 본 단점으로는
custom native code를 추가할 수 없고 Expo SDK에 빌트인된 native modules만 사용 가능하기때문에 외부 라이브러리를 가져다 사용하는데에는 제한이 있다고 한다. 때문에 확장성이 부족해 아무래도 본격적으로 개발을 할때는 제한이 있을것으로 보였다.

공식문서 : https://docs.expo.dev/

✅ React Native CLI

  • 설치해야할것

    Node,
    Watchman,
    the React Native command line interface,
    a Ruby version manager,
    Xcode and CocoaPods.




1. Node & Watchman 다운

brew install node
brew install watchman
  • Node 14버전 이상인지 확인해보자.
  • watchman은 파일 시스템에서 변화를 관측하는 툴이다. 공식 문서에서 매우 추천하는것이니 꼭 다운 받자. (개인적으로 다운받을 때 시간 꽤걸렸음)


2. Ruby 버전 체크

ruby는 React Native에서 iOS 종속성 관리와 관련된 일부 스크립트에서 사용한다.
ruby --version 확인해준다. 플젝에따라 필요한 version을 다운받아야한다.
참고로 현재 macOS 13.2는 Ruby 2.6.10과 함께 제공된다.

node의 npm이 있듯이 ruby에는 gem이라는 의존성 관리 도구가 있는데 나중에 gem을 이용해 뒤에 나올 cocoa pod를 다운 받을 것이다.



3. mac app store에서 Xcode 다운

  • mac app store에서 Xcode다운받자. Xcode를 다운받는건 iOS 시뮬레이터를 다운받고 iOS app빌드하기위해 필요한 모든 툴들을 설치하기 위함이다.
  • 버전 10 이상인지 확인
  • 단점: 평점 좋지 않음. 오래걸림.

    평점 안좋길래 '이게 맞나..?' 싶었다. 근데 그거 맞으니 다운받자.



4. Xcode에서 Command Line Tools & Simulator 다운

  • Xcode Command Line Tools 를 다운받자
    Xcode열어서 메뉴의 preference 클릭 → Locations 클릭 → Command Line Tools 에서 최신 버전 다운(드롭 다운해서 제일 최신 다운받으면 되는데, 디폴트로 최신 버전 14.3.1에 맞춰줘 있어서 그냥 확인만 했다.)

  • simulator 다운 받자.
    preferences 클릭 → Platforms클릭(이전Components) → ios의 버전과 상응하는 버전 다운 -> 하단의 +버튼 눌러서 시뮬레이터 선택하면됨.(이것도 다운 오래걸림..)



5. CocoaPod 다운

iOS에서 사용할 수 있는 종속성 관리 시스템이다. Ruby로 빌드되어있으므로 Ruby를 다운받아야 사용 가능

$ sudo gem install cocoapods

공식 문서: https://guides.cocoapods.org/using/getting-started.html

❌ 만난 에러1 (While executing gem ...)

ERROR:  While executing gem ... (Gem::FilePermissionError)

    You don't have write permissions for the /System/Library/Frameworks/Ruby.framework/Versions/2.6/usr/lib/ruby/gems/2.6.0 directory.

🙆🏻‍♀️ 해결

brew install chruby ruby-install
brew install cocoapods
brew upgrade cocoapods

참고 https://developer.apple.com/forums/thread/697220

❌ 만난 에러2 (Error installing cocoapods.)

ERROR:  Error installing cocoapods:
	The last version of activesupport (>= 5.0, < 8) to support your Ruby & RubyGems was 6.1.7.3. Try installing it with `gem install activesupport -v 6.1.7.3` and then running the current command again
	activesupport requires Ruby version >= 2.7.0. The current ruby version is 2.6.10.210.

🙆🏻‍♀️ 해결

sudo gem install activesupport -v 6.1.7.3 // 이거 하고 다시 sudo gem install cocoapods




6. 이제 앱 만들자

참고:
React Native Command Line Interface
npx react-native <command> 를 사용하면 명령이 실행될 때 현재 안정된 버전의 CLI가 다운로드됨.

 
  npx react-native init hee //hee라는 파일의 react-native만듦 
  // hee 파일에 들어감
  npx react-native start //  JavaScript 번들러인 Metro 시작 
  npm run ios

참고
Metro는 entry file 이랑 다양한 옵션을 가지고 당신의 모든 코드와 종속성들이 포함된 하나의 JavaScript 파일을 반환한다.

성공!

참고
expo go: https://reactnative.dev/docs/environment-setup?guide=quickstart
React Native CLI : https://reactnative.dev/docs/environment-setup?guide=native

포스팅 내용 중, 잘못된 사실이 있으면 꼭 알려주세요!

profile
오늘도 삽질중
의미없는 삽질은 없다1

0개의 댓글