[RN] 맥OS에서 리액트 네이티브 설치하기 feat 오류 폭탄🥲

리액트 네이티브란

리액트 네이티브(React Native)는 페이스북이 개발한 오픈 소스 모바일 애플리케이션 프레임워크이다.
안드로이드, iOS, 웹, UWP용 애플리케이션을 개발하기 위해 사용되며, 개발자들이 네이티브 플랫폼 기능과 더불어 
리액트를 사용할 수 있게 한다.

https://ko.wikipedia.org/wiki/%EB%A6%AC%EC%95%A1%ED%8A%B8_%EB%84%A4%EC%9D%B4%ED%8B%B0%EB%B8%8C

 

리액트를 사용하면서 장점 중 하나가 리액트 네이티브를 통해 쉽게 모바일 앱을 만들 수 있다는 것.

줄여서 RN 이라고 많이 쓰는데, RN을 사용하는 앱들이 생각보다 꽤나 다양해서 놀랐다.

페이스북, 인스타그램, 디스코드, 스카이프, 팀즈 등 익숙한 앱들이 있었는데,

전체 목록을 보고 싶으시면 여기 링크로! 👉🏻 https://reactnative.dev/showcase

 

회사에서 모바일 앱은 네이티브로 만들고 있어 시간 여유가 있을 때 미리 공부해보려고 뭣도 모르지만 일단 설치부터 시작했다.

리액트 공부할 때 '리액트를 다루는 기술(aka 리다기)'를 보고 도움이 많이 됐어서

'리액트 네이티브를 다루는 기술' 책을 구매해서 참고함.

 

 

0. Node.js 설치

노드는 기본적으로 설치되어 있어서 생략!

 

1. JDK 설치 (자바)

안드로이드 앱 개발을 위해 자바 설치가 필요하다고 한다.

homebrew 로 설치!

 

brew install -cask adoptopenjdk/openjdk/adoptopenjdk8

 

책에 나온 이 명령어로 입력하니 에러 발생 ㅠㅠ

 

 

 

 

 

 

검색도 해보고 이런저런 명령어를 시도해 본 결과

  brew install --cask adoptopenjdk

이 명령어로 설치 성공했다.

 

 

2. watchman 설치

맥OS 에서만 사용 가능한 모니터링 도구. 필수는 아니지만 좀 더 효율적인 작업이 가능하다고 한다.

brew install watchman

 

3. Android Studio 설치

이 역시 안드로이드 앱을 만들기 위한 것으로 아래 홈페이지를 통해 설치.

https://developer.android.com/studio

Download Android Studio & App Tools - Android Developers

 

4. 안드로이드 환경변수 설정

안드로이드 개발환경 준비를 위한 변수 설정.

vim $HOME/.zprofile

export ANDROID_SDK_ROOT=$HOME/Library/Android/sdk
export PATH=$PATH:$ANDROID_SDK_ROOT/emulator
export PATH=$PATH:$ANDROID_SDK_ROOT/tools
export PATH=$PATH:$ANDROID_SDK_ROOT/tools/bin
export PATH=$PATH:$ANDROID_SDK_ROOT/platform-tools

 

 

안드로이드 쪽 환경 세팅은 끝난거라 생각해서 여기까지 하고 프로젝트를 실행해봤는데..

아무래도 ios 까지 끝내야 프로젝트 실행이 가능한 듯 하다.

맥os 가 아니면 여기까지만 해도 가능한 듯.

 

✖ Installing Bundler
error Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
Error: Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
    at createFromTemplate (/Users/jihyejun/.npm/_npx/dea611a43221eddd/node_modules/@react-native-community/cli/build/commands/init/init.js:131:11)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.initialize [as func] (/Users/jihyejun/.npm/_npx/dea611a43221eddd/node_modules/@react-native-community/cli/build/commands/init/init.js:184:3)
    at async Command.handleAction (/Users/jihyejun/.npm/_npx/dea611a43221eddd/node_modules/@react-native-community/cli/build/index.js:106:9)
info Run CLI with --verbose flag for more details.

 

 

5. Xcode 설치

앱스토어에서 다운 받아 설치.

의외로 다운 받고 설치하는데에 꽤나 오랜 시간이 걸려서 먼저 받아두고 다른 환경 세팅하면 좋을듯.

 

6. CocoaPods 설치

sudo gem install cocoapods

 

하 여기서부터 또 에러 전쟁이었다..

 

 

sudo gem install activesupport -v 6.1.7.3

 

xcode-select --install

sudo gem install cocoapods

 

 

검색에 검색을 거듭하여 드디어 코코아팟 설치 완료.

그런데,, ㅠㅠ

 

 

✖ Installing CocoaPods dependencies (this may take a few minutes)
error warn Multiple Podfiles were found: ios/Podfile,vendor/bundle/ruby/2.6.0/gems/cocoapods-core-1.12.0/lib/cocoapods-core/Podfile. Choosing ios/Podfile automatically. If you would like to select a different one, you can configure it via "project.ios.sourceDir". You can learn more about it here: https://github.com/react-native-community/cli/blob/master/docs/configuration.md

✖ Installing CocoaPods dependencies (this may take a few minutes)
error Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
Error: Error: Looks like your iOS environment is not properly set. Please go to https://reactnative.dev/docs/next/environment-setup and follow the React Native CLI QuickStart guide for macOS and iOS.
    at createFromTemplate (/Users/jihyejun/.npm/_npx/dea611a43221eddd/node_modules/@react-native-community/cli/build/commands/init/init.js:131:11)
    at runMicrotasks (<anonymous>)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)
    at async Object.initialize [as func] (/Users/jihyejun/.npm/_npx/dea611a43221eddd/node_modules/@react-native-community/cli/build/commands/init/init.js:184:3)
    at async Command.handleAction (/Users/jihyejun/.npm/_npx/dea611a43221eddd/node_modules/@react-native-community/cli/build/index.js:106:9)
info Run CLI with --verbose flag for more details.

 

프로젝트 실행하는데 또 오류가 났다 ㅠㅠ

아래의 블로그에서 힌트를 많이 얻었다.

 

 

https://jaylee-log.tistory.com/83

[react-native]error warn Multiple Podfiles were found

 

 

 

 

 

드디어 만난 성공 화면..❤️