[React Native] React Native

React Native는 React 구성 요소와 동일한 API 구조를 사용하므로 시작하려면 React 구성 요소 API를 이해해야 함

 

React의 javascript 코드와  Native 는 Bridge 를 통해  커뮤니케이션한다.

 

React Native 의 Api 보다 Expo Api 를 사용하면 더 많은 Third Party Package 들이 있다.

 

하지만 난 React Native Cli 로 스터디

요즘엔 또 Expo 로 해야한다는데.... 뭐야 진짜... 어렵다... 웹 오픈소스 생태계.....;;; 

일단 회사가 Cli로 되어있으니 Cli 로 스터디

 

환경 설정부터 시작해보자. 

https://reactnative.dev/docs/0.72/environment-setup?platform=android

 

 

내 개발 환경

Apple M3 / MacOS 16

(집에 있는건 Apple Intel / MacOS 12)

 

homebrew 설치

https://brew.sh/

 

brew install nvm

어느 곳에서도 사용할 수 있게 nvm 환경변수 설정

vim ~/.zshrc

export NVM_DIR="$HOME/.nvm"

[ -s "/opt/homebrew/opt/nvm/nvm.sh" ] && \. "/opt/homebrew/opt/nvm/nvm.sh"  # This loads nvm

[ -s "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm" ] && \. "/opt/homebrew/opt/nvm/etc/bash_completion.d/nvm"  # This loads nvm bash_completion

intel 맥은 아래와 같이 설정해준다.

export NVM_DIR="$HOME/.nvm" [ -s "/usr/local/opt/nvm/nvm.sh" ] && . "/usr/local/opt/nvm/nvm.sh" # This loads nvm [ -s "/usr/local/opt/nvm/etc/bash_completion.d/nvm" ] && . "/usr/local/opt/nvm/etc/bash_completion.d/nvm" # This loads nvm bash_completion

source ~/.zshrc

작업하던 터미널 끄고 재실행

(nvm 환경변수 설정 적용 완료)

 

nvm -v 로 설치 확인

 

nvm 으로 node 설치

nvm install —lts

만약 특정 node 버전을 설치해야한다면

nvm install v[버전]

 

node -v

npm -v 

로 설치 정상 확인

 

// 설치된 node 목록 확인

nvm ls 

 

// 특정 버전의 node 사용하기

nvm use [버전]

 

// 현재 사용중인 버전 확인하기

nvm current

 

// node.js 설치 경로 확인하기

which node

 

// 필요없는 node 버전 삭제하기

nvm uninstall [버전]

이제 RN 설치 시작

https://reactnative.dev/docs/getting-started-without-a-framework

 

 

npx @react-native-community/cli@latest init <프로젝트명>

Do you want to install CocoaPods now? 라고 나오면 N 입력 (나중에 따로 설치 가능하니 N으로 선택)

 

watchman 설치

brew install watchman

Error: Cannot install under Rosetta 2 in ARM default prefix (/opt/homebrew)!
To rerun under ARM use:
    arch -arm64 brew install ...
To install under x86_64, install Homebrew into /usr/local.

위와 같은 오류시 인텔 맥이 아닌 환경에서 발생한다.

arch -arm64 brew install watchman 명령어로 해결

(MacOS 12 는 오래되서 지원이 안되더라.... watchman 설치가 안돼.... wach그래서 MacPorts 를 통해 자신의 OS에 맞는걸 설치하고 터미널 재실행 후  sudo port install watchman   로 ports 를 통해 설치

 

Android Studio 설치

https://developer.android.com/studio

 

vim ~/.zshrc 

아래 코드 추가 후 source ~/.zshrc 를 통해 환경변수 적용

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

which adb 를 실행시 경로가 나온다면 설정 완료

 

Xcode 설치

앱스토어에서 다운로드

 

 

아.... 집에 있는 MacOS 12 로 하려니......... 최신버전은 당연히 안되고...... 따로 설정해줘야하는게 너~~~무 많네 ㅜㅜ ㅎㅎㅎㅎㅎ

장난아니네 ㅎㅎㅎㅎㅎ

 

 

 

npx react-native run-android

Metro 실행 터미널 생성 후

애뮬레이터 실행됨.

애뮬레이터가 실행됐고 빌드는 성공했지만 아무것도 안 나올때

- 실행됐던 애뮬레이터 종료하고, 안드로이드 스튜디오 실행 후 Virture Device Manager 를 실행해서 원하는 애뮬레이터 실행, 그리고 이전에 실행되고 있던 Metro 의 터미널을 끄고, 다시 npx react-native run-android 실행. 그럼 잘 나옴

 

 

 

 

npx react-native run-ios

(이전에 Metro 실행 터미널이 있다면 따로 또 안 뜸)

오류 발생!! CocoaPods 을 설치 안 했기 때문

cd ios 로 ios 폴더로 이동하여 CocoaPods 을 설치한다.

pod install 

pod 이 설치 안되있을 경우

-

 

pod 설치가 완료되었다면 다시 npx react-native run-ios 실행(처음엔 오래걸리네;;)

npx react-native run-ios <- 이 명령어로 처음 실행했을때는 아래와 같은 오류가 나온다. 

error Signing for "kidkidsClone" requires a development team. Select a development team in the Signing & Capabilities editor. (in target 'kidkidsClone' from project 'kidkidsClone')
error Failed to build ios project. "xcodebuild" exited with error code '65'. To debug build logs further, consider building your app with Xcode.app, by opening 'kidkidsClone.xcworkspace'.

프로젝트 폴더의 ios 폴더로 이동한 다음 .xcworkspace 파일을 클릭하여 Xcode 를 실행하여 Signing 을 설정해줘야한다.

 

 

 

환경 구성 및 설치 완료!!!

개발 시작!!!