[ReactNative] 개발환경 설정 (Mac OS)

팔자에도 없던 React Native를 개발하게 되어 정리를 시작하려고한다.

우선 개발환경 부터 셋업!
https://reactnative.dev/docs/environment-setup

Setting up the development environment · React Native

영문으로 된 가이드를 잘 읽어보니, Expo를 이용해서 프로젝트를 만들어도 되고, 기존 스튜디오/ xcode 를 사용해서 개발을 진행해도 되는 것 같다.

Expo를 이용하는 방식은 Android/IOS 개발환경 없이, 리얼 디바이스만 있으면 개발할 수 있는 방식이다.
Android/ IOS 에서 Expo 라는 앱을 설치하고 (IOS 는 Expo GO)
PC에서는 react처럼 javascript 코드로 코딩을 한다음에, 스마트폰에 설치된 Expo앱으로 javascript 코드를 전송하여 실행시키는 방식이다.

리얼 프로젝트가 아닌 학습용으로 퀵하게 테스트 해볼 경우 추천하는 방식인것으로 보인다.

여기선 기존 Android studio를 이용해서 개발환경을 셋업하고자 한다.

Homebrerw 설치

Homebrew를 이용하여 개발환경을 설치해야되니 사전 세팅을 할 것을 권장한다.

Android 환경 셋업

1. Node 와 Watchman 설치

brew install node
brew install watchman

Node는 이미 있으니 설치하지 말아야지라고 생각했는데, 바로 밑에 14버전 이상인지 확인하라고 되어있었다. (내맘을 꿰뚫어 보았군)
node --version으로 확인했더니 18버전이니 패스~

watchman 은 파일시스템의 변화를 관찰하기위한 페이스북에서 만든 툴인데, 성능을 위해서 설치하는 것이 추천된다고 한다.

2. Java Development Kit
Azul Zulu 라고 불리는 OpenJDK를 설치한다.

brew tap homebrew/cask-versions
brew install --cask zulu11

Zulu OpenJDK 는 intel과 m1 을 모두 지원한다.
JDK 버전이 11 이상이면 문제가 발생할 수 있기 때문에 11로 맞출 것을 권장한다고한다.

3. Android 개발환경 설치
- 일반적인 Android 개발 환경 셋업이다. 이 부분은 생략한다
- Android studio를 설치하는 건, SDK / AVD / development tool을 다운로드 및 설정하기 위한 용도이고 실제 개발은 Android studio보단 Visual Studio 를 쓰는듯하다?

4. 프로젝트 생성

npx react-native init AwesomeProject

만약에 이전에 설치된 react-native 버전이 있으면, 오류가 발생할 수 있기 때문에 삭제를 권장한다

npm uninstall -g react-native-cli @react-native-community/cli

npx 로 init을 실행하면, 리엑트 개발을 위한 sdk부터 설치가 진행되며, 그뒤에 프로젝트가 생성된다.

✔ Downloading template
✔ Copying template
✔ Processing template
✖ Installing Bundler
error Your Ruby version is 2.6.8, but your Gemfile specified 2.7.6

✖ 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/app-service-plan/.npm/_npx/7930a8670f922cdb/node_modules/@react-native-community/cli/build/commands/init/init.js:129:11)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Object.initialize [as func] (/Users/app-service-plan/.npm/_npx/7930a8670f922cdb/node_modules/@react-native-community/cli/build/commands/init/init.js:181:3)
    at async Command.handleAction (/Users/app-service-plan/.npm/_npx/7930a8670f922cdb/node_modules/@react-native-community/cli/build/index.js:106:9)
info Run CLI with --verbose flag for more details

내 PC에서는 위와같이 에러가 발생했는데, ios 개발환경 설정이 안되서 그런것으로 보인다.
일단 무시하고 진행한다.

작업이 끝나면 AwesomeProject 라는 폴더가 생성된다.

버전을 추가해서 생성하고 싶다면 다음과같이 입력하면 된다.

npx react-native init AwesomeProject --version X.XX.X

4. 프로젝트 실행
생성한 AwesomeProject 폴더로 이동해서 아래와같이 실행하여 Metro Bundle 이 실행되게끔 한다.
(Metro는 react의 Webpack과 유사한 역할을 한다고 보면된다고 한다)

npx react-native start

위와 같이 수행하면, 해당 터미널에 Metro가 실행이된다.

이상태에서 프로젝트를 빌드 및 실행하기 위해서 새로운 터미널을 실행시키고, 프로젝트 폴더로 이동한다.

그 다음 아래와같이 입력한다.

npx react-native run-android

그럼 에뮬레이터가 실행이되며, 자동으로 빌드 및 설치를 수행한다.

Metro 가 실행된 터미널에서 명령어 r/d/i/s 를 입력하면 그에 따른 액션이 취해진다.


근데, 개발환경 셋업하고, 실수로 start 과정없이 바로 run-android를 했더니, 자동으로 새 터미널이 열리고 거기서 metro 가 실행이 되었고, 에뮬레이터도 같이 떴다.

이럴거면 굳이 start 를 안해도 그냥 run-android만 해도 될듯하다?