REACT-NATIVE - M1 React-Native 첫 세팅하기! (react Native CLI)

1. Xcode 설치하기

• 가장 오래 걸리기 때문에 처음부터 설치 하기를 권장 appstore에서 로그인후 설치하기

2. Homebrew설치하기

• https://brew.sh/index_ko

#설치 후 next step에 있는거 그대로 복붙
# zsh 설정 파일 열기
vim ~/.zshrc

# 작성
eval $(/opt/homebrew/bin/brew shellenv)

# homebrew 버전 확인
brew --version
Homebrew 3.2.6
​
# homebrew 정상 작동 확인
# 정상일 때 아무것도 안 뜸
eval $(/opt/homebrew/bin/brew shellenv)

3. zsh, oh-my-zsh 설치하기

# zsh 설치
brew install zsh
​
# oh-my-zsh 설치
sh -c "$(curl -fsSL https://raw.github.com/robbyrussell/oh-my-zsh/master/tools/install.sh)"

4. nvm 설치하기

#nvm 설치하기
brew install nvm

#zsh 설정 파일 하단에 
export NVM_DIR=~/.nvm
source $(brew --prefix nvm)/nvm.sh

#:wq로 나오는거 잊지 말기

#nvm 버전 확인
nvm --version

5. node 설치하기 

# node 설치
nvm install --lts

# 노드 버전 확인
node -v
v16.6.1

# npm 버전 확인
npm -v
8.11.0

6. watchman 설치하기

# watchman 설치
brew install watchman
​
# watchman 버전 확인
watchman -v
2022.05.30.00

7. cocoapods 설치하기

# cocoapods 설치
brew install cocoapods
​
# pod 버전 확인
pod --version
1.11.3

8. ffi 설치하기

# ffi 설치
sudo gem install ffi

vim ~/.zshrc

//맨 아래 추가해주기
# GEM
export GEM_HOME=$HOME/.gem
export PATH=$GEM_HOME/bin:$PATH

//저장해죵
source ~/.zshrc

9. Xcode 시뮬레이터 설정

• xcode 열기 -> 상태 바에 xcode -> preferences
• account -> 하단에 + 누르고 애플 아이디로 로그인 하기
• locations -> command line tools -> 가장 최신 버전 
•  

• components -> ios시뮬레이터 설치 

10. android JDK 설치하기

vim ~/.zshrc

//맨 아래에 추가 해쥬깅
# JDK
export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home
export PATH=${PATH}:$JAVA_HOME/bin

# 설정 파일 실행
source ~/.zshrc

# java_home 확인
/usr/libexec/java_home -V


Matching Java Virtual Machines (2):
    11.0.15 (arm64) "Azul Systems, Inc." - "Zulu 11.56.19" /Library/Java/JavaVirtualMachines/zulu-11.jdk/Contents/Home

11. android Studio 설치하기

• https://developer.android.com/studio#downloads

• Mac (64-bit, ARM) 설치 파일다운로드 하기

vim ~/.zshrc

export ANDROID_HOME=/Users/choiboogeon/Library/Android/sdk
export PATH=$PATH:$ANDROID_HOME/emulator
export PATH=$PATH:$ANDROID_HOME/tools
export PATH=$PATH:$ANDROID_HOME/tools/bin
export PATH=$PATH:$ANDROID_HOME/platform-tools

source ~/.zshrc

 

• Release Name: S
• API Level: 31
• ABI: arm64-v8a
• Target: Android 12 Preview (Google Play)
• 인지 확인하기

12. react Native CLI 설치하기

• 설치 전 캐시 지우기

pod cache clean --all
yarn cache clean
rm -rf ~/Library/Developer/Xcode/DerivedData/*

• 프로젝트 생성하기

npx react-native init Test
​
cd Test

 

• facebook SDK 관련 패키기 설치 

yarn i react-native-fbsdk-next

 

• xcode 파일 열기

cd ios
open Test.xcworkspace

 

13. iOS Deployment Target 설정하기

• 좌측에 Test 선택
• Info 선택
• Deployment Target
• iOS Deployment Target
• 12.1

14. iOS Simulator SDK 설정하기 

 

• 좌측에 Test 선택
• Build Settings
• Architectures
• Excluded Architectures
• Debug - Any iOS Simulator SDK - arm64 추가
• Release - Any iOS Simulator SDK - arm64 추가

15. Library Search Path 설정합니다.

• 좌측에 Test 선택
• Build Settings
• 검색 -> 'library search'
• Library Search Paths 다 지웁니다. (초기화)

16 . BridgingFile.switft 파일을 생성

• 좌측에 Test 선택
• New File
• Swift File
• Save As: BridgingFile.swift
• Create 선택
• Create Bridging Header 선택
• 좌측에 Test 보면 BridgingFile.swift 파일과 Test-Bridging-Header.h 파일이 생성됨.

17. ios 폴더로 돌아와 Pod 설정하기

vim Podfile


# 4번째 줄에 아래와 같이 바꿔줍니다.
platform :ios, '12.1'


# Podfile에서 아래로 내리면 use_flipper!()라고 있는데 아래와 같이 바꿔줍니다.
# 2022.06.22  'Flipper-Folly' => '2.6.9'로 해야 오류가 없었습니다. 
use_flipper!({ 'Flipper' => '0.95.0', 'Flipper-Folly' => '2.6.9', 'Flipper-DoubleConversion' => '3.1.7' })
  post_install do |installer|
    installer.pods_project.build_configurations.each do |config|
      config.build_settings["EXCLUDED_ARCHS[sdk=iphonesimulator*]"] = "arm64"
      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '12.1'
    end
    react_native_post_install(installer)
  end
​
# 마지막 줄에 end가 하나 있어야 끝맺을 수 있습니다.
end

 

rm -rf Pods Podfile.lock
rm -rf ~/Library/Developer/Xcode/DerivedData/*
pod deintegrate && pod setup && pod install

18. 앱 실행하기!

//ios 실행
cd ..
yarn run ios

//android 실행
yarn run android

 

 

*타입스크립트로 앱 실행하기

npx react-native init {파일 이름} --template react-native-template-typescript

 

 

** 플리퍼 사용하긩

yarn add react-native-flipper redux-flipper rn-async-storage-flipper @react-native-async-storage/async-storage

cd ios/
pod-install