출처 : https://reactnative.dev/docs/environment-setup
RN은 두 가지 방법으로 만들 수 있다.
1. 간단한 방법 : Expo CLI
-최근 버전의 node.js
-모바일 기기 / emulator
2. 기존의 네이티브 코드에 RN을 넣는 경우 : React Native Cli
설치하기
1) 아이폰: Xcode
- ios에서 RN 앱을 만들기 위해 필요한 툴들을 세팅하기 위해 필요하다
- ios simulator를 알아서 설치해준다
- 10이상의 버전이어야 한다
- Xcode CLI 설치하기
xcode-select --install2) 안드로이드 : Android Studio
이 둘을 설치하는데 시간이 좀 걸린다
특히 Xcode는 앱스토어에서 설치하려면 시간도 장난 아니게 들고 번거로워서
이 방법을 사용하는 것을 추천한다.
버전 업그레이드가 필요하다고 할 때도 있는데 그럼 이걸 참고하는 것을 추천한다.
또 xcode의 cli tool까지 설치하려면 엄청 무거워서 메모리를 어느 정도 확보하고 해야 한다.
3) node : 14 이상의 버전
4) watchman : 페이스북이 만든 툴로 파일 시스템에서 생긴 변화를 트래킹한다. 더 좋은 퍼포먼스를 위해 추천한다
brew install node
brew install watchman5) cocoapods
출처 : https://guides.cocoapods.org/using/using-cocoapods.html
- Xcode 프로젝트의 라이브러리 dependency를 관리해준다
- 라이브러리 사이의 dependency들을 해결하고, 결과적으로 나오는 소스코드를 받아서 Xcode 워크스페이스와 연결해 프로젝트를 빌드한다
-즉, 3rd-party 오픈 소스 라이브러리를 쉽게 발견하고 사용하기 위한 생태계를 만들어주는 것 - 이런 dependency들은 Podfile이라는 하나의 텍스트 파일에 구체적으로 적혀있다
- 아래와 같이 Podfile를 생성한다
- pod install
- App.xcworkspace를 열어서 빌드한다
target 'MyApp' do
pod 'AFNetworking', '~> 3.0'
pod 'FBSDKCoreKit', '~> 4.9'
end- Ruby로 만들어져 있다
- 맥에서 제공되는 Ruby로 설치 가능 : macOS에서 제공하는 디폴트 Ruby를 사용하는 거니까 sudo 필요
sudo gem install cocoapods //mac에 있는 디폴트 ruby로 gem 설치, cocoapod 설치- 또는 rbenv(Ruby version manager)로 설치 가능
M1의 경우 에러가 일어날 수 있다
에러 발생 시
arch -x86_64 pod install (추천)이 명령어들을 통해 해결
ffi 패키지를 설치해서 동적으로 연결된 라이브러리들을 준비시켜주고 pod install을 제대로 할 수 있게 해준다
cocoapods를 이용해서 xcode 프로젝트를 생성하는 방법
1. xcode 프로젝트를 하나 만든다
2. 해당 프로젝트 디렉토리로 들어간다
3. pod init 를 이용해서 podfile을 생성한다
4. podfile을 열어서 첫 줄에 플랫폼과 버전을 명시한다 : platform :ios, '9.0'
5. CocoaPods를 이용하기 위해서는 연결할 Xcode 타겟을 정의해준다
- 앱의 이름을 이용해서 연결해준다
- target section을 만들어서 한다
6. target section에 pod '$PODNAME'을 추가해서 Cocoapod 하나를 추가한다
target '앱의 이름' do
//이 사이가 target section
end 예시
target 'MyApp' do
pod 'ObjectiveSugar'
end - podfile을 저장한다
- pod install을 실행한다
- 생성된 MyApp.xcworkspace을 열어서 앱을 만든다
만약 이미 있는 workspace와 cocoapod를 통합하려면
- podfile에 한줄 더 추가한다 : .xcworkspace의 파일 이름을 target block 바깥에 적는다
ex. workspace 'MyWorkspace'
react native pod 관련 에러 해결
error Failed to build iOS project. We ran "xcodebuild" command but it exited with error code 65.
출처 : https://velog.io/@bcgo99/react-native-pod-%EA%B4%80%EB%A0%A8-%EC%97%90%EB%9F%ACm1-silicon
6) rn cli
- R은 빌트인 CLI가 있다. 그러므로 특정 버전의 CLI를 글로벌하게 설치하지 말고 최신 버전을 npx를 이용해서 실행하는 것을 추천한다. 그래야 node와 사용하기에 좋으니까. npx react-native <명령어> 의 형태로 사용하면 가장 최신 버전의 안정적인 CLI를 다운로드하고 실행할 수 있다
즉 이미 global하게 react-native-cli 패키지를 설치했으면 삭제하는 것이 좋다
명령어들
cf. 이미 있는 앱과 연결 시 : https://reactnative.dev/docs/integration-with-existing-apps
1. 새로운 프로젝트 생성
npx react-native init AwesomeProject
2. 특정 버전 사용하기
npx react-native init AwesomeProject --version X.XX.X
3. RN 템플릿을 이용해서 프로젝트 만들기 ex. 타입스크립트 이용
npx react-native init AwesomeTSProject --template react-native-template-typescript=> 만약 이런 명령어들이 실패한다면 rn의 버전이 오래되었거나 rn-cli가 글로벌하게 설치되어 있을 수 있으니까 설치된 것을 삭제하고 다시 npx를 이용해서 cli를 실행하는 것이 좋다
실행하기
- metro를 실행한다
metro란?
- rn에서도 사용할 수 있는 js 번들러
- "항목 파일과 다양한 옵션을 가져와서 모든 코드와 dependency를 포함하는 단일 JavaScript 파일을 반환합니다."
- rn앱을 위한 webpack과 비슷하다
: swift, object-c와 달리 JS는 컴파일되지 않고 RN도 컴파일되지 않는다
: 번들링은 컴파일과 다르지만 퍼포먼스를 향상시키고 특정 플랫폼에 특화되어 있는 JS를 더 포괄적으로 지원하는 JS로 번역해준다
//metro bundler 시작하기
npx react-native start
yarn react-native start
- 앱을 실행한다
- metro는 다른 터미널에서 돌고 해당 프로젝트 폴더에서 아래 명령어를 실행하면 ios simulator에서 아래와 같이 도는 것을 볼 수 있다
npx react-native run-ios- 또는 xcode 안에서 직접 실행시킬 수 있다
- 시뮬레이터가 아니라 기기에서 돌리고 싶으면 여기 참고
- 수정하기
- App.js에서 추가한다
- cmd + R를 시뮬레이터에서 치면 리로딩이 된다
cf. 깃 특정 브랜치만 clone하는 방법
git clone -b {branch_name} --single-branch {저장소 URL}
