에뮬레이터와 상관없이 XCODE, Android Studio를 둘 다 설치해야 한다.
RN 설치 방법은 버전에 따라 환경을 구성하는 방법이 다르기 때문에 공식 문서를 그대로 따라 하자.
1. React Native CLI
아래 공식 문서에 따라 설치를 진행한다.
https://reactnative.dev/docs/environment-setup
1-1) [RN CLI Quickstart] -> [macOS] -> [Andorid] and [iOS] 둘 다 진행해야 한다.
1-2) 현재 기준 JDK 17 설치
Homebrew로 jdk 17 설치
brew install openjdk@17
1-3) xcode 설치
AppStroe에서 xcode 검색 후 설치를 진행한다.
1-4) Android Studio 설치
공홈에서 설치
1-5) Node 설치
#nvm 설치
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
# 설정 적용
source ~/.zshrc
1-5) cocoapaods설치
# Mac은 brew install cocoapods
sudo gem install cocoapods
- CocoaPods를 설치하는 것은 React Native 패키지 및 종속성을 관리하고 통합하기 위해 필요하다.
반응형
2. 프로젝트 생성
# react native 전역 설치
npm i -g react-native
# 프로젝트 생성 typescript 템플릿으로 생성
react-native init [프로젝트] --template react-native-template-typescrip
# pod 설치
cd ./[프로젝트]/ios/ && pod install
2-1) 프로젝트 실행
# 해당 프로젝트 경로에서 명령어 실행
npm run start
# 특정 시뮬레이터로 실행
npm run start --simulator="iPhone14"
2-2) 시뮬레이터 버전이 변경되지 않는 경우
시뮬레이터를 먼저 실행시키고 이후에 npm run start 명령어만 실행시킨다.
반응형
'React' 카테고리의 다른 글
[React] TypeScript에서 텍스트 편집기(React-Quill) 사용 방법 (0) | 2023.04.20 |
---|---|
[카카오맵 API / 카카오 주소 API] 검색된 주소를 카카오 맵에 표시하는 방법 (0) | 2023.04.18 |
[카카오맵 API] React 클릭 위치로 마커(Marker) 변경 및 주소 가져오는 방법 (0) | 2023.04.17 |
[카카오맵 API] React TypeScript에서 Geolocation를 사용한 현재 위치 표시 방법 (0) | 2023.04.11 |
[카카오맵 API] React TypeScript에서 카카오맵 불러오기 (0) | 2023.04.10 |