ios & Android Simulator 구동하기
새 프로젝트 생성
https://github.com/sophia22001/React-Native
GitHub - sophia22001/React-Native
Contribute to sophia22001/React-Native development by creating an account on GitHub.
github.com
1. 리액트 네이티브 설치
VS Code를 열고, 다음 명령어를 통해 리액트 네이티브를 설치한다.
프로젝트 이름은 MyApp 로 정했다.
> npx @react-native-community/cli init MyApp
Need to install the following packages:
@react-native-community/cli@18.0.0
Ok to proceed? (y)
###### ######
### #### #### ###
## ### ### ##
## #### ##
## #### ##
## ## ## ##
## ### ### ##
## ######################## ##
###### ### ### ######
### ## ## ## ## ###
### ## ### #### ### ## ###
## #### ######## #### ##
## ### ########## ### ##
## #### ######## #### ##
### ## ### #### ### ## ###
### ## ## ## ## ###
###### ### ### ######
## ######################## ##
## ### ### ##
## ## ## ##
## #### ##
## #### ##
## ### ### ##
### #### #### ###
###### ######
Welcome to React Native 0.79.2!
Learn once, write anywhere
✔ Downloading template
✔ Copying template
✔ Processing template
✔ Installing dependencies
✔ Initializing Git repository
Run instructions for Android:
• Have an Android emulator running (quickest way to get started), or a device connected.
• cd "C:\\React-Native\\MyApp" && npx react-native run-android
Run instructions for Windows:
• See <https://aka.ms/ReactNativeGuideWindows> for the latest up-to-date instructions.
이렇게 나와야 성공임 !!!!
다른 예전 명령어로 쳤었다가 완전 뭐가 뒤죽박죽되어서 한참 고생하다가 다시 최신 명령어가 있다는 걸 알고 다 삭제하고 처음부터 설치했더니 잘 나왔다.
많이 수정했는데도 잘되지 않는다면 더 고치지 말고 전부 삭제하고 새로 만드는 게 훨씬 낫다는 걸 깨달았다. ㅎㅎ
또 보니까 이런 Metro 실행 창이 자동으로 나왔다.
2. Android Emulator 구동시키기
구동하기 전에 Android Studio 에서 SDK 설정이 끝난 상태에서,
AVD 에서 폰 기종을 선택하고 실행한다.
나는 랜덤으로 Pixel 2 라는 기종을 선택했다.
3. 에뮬레이터 구동
그전에 먼저 해당 MyApp 폴더에 들어가서 구동 명령어를 입력한다.
3-1. Metro 번들러를 먼저 실행해야 한다. (Metro 서버 실행)
npm start
3-2. 다른 터미널에서 아래 명령어로 앱을 실행한다.
npm run android
// 또는
npx react-native run-android4. 결과
아래 화면은 디폴트로 App.jsx의 코드가 렌더링된 것이다.
- rr 을 누르면 새로 고침 할 수 있다.
- ctrl + M 을 누르거나 폰을 흔들면 개발자 메뉴를 열 수 있다.
설치된 파일들을 보면, android 폴더와 ios 폴더가 생성된 것을 볼 수 있다.
다른 사람이 생성한 프로젝트 실행
다른 사람이 생성한 프로젝트를 내가 git clone 해서 사용하는 경우라면, 아래 명령어를 통해 안드로이드의 `gradlew`실행 파일 권한을 주어야한다.
왜냐하면 깃에는 파일 실행 권한이 저장되지 않기 때문이다.
`gradlew`는 Android 앱을 빌드할 때 사용하는 실행 스크립트이다.
cd android
chmod +x gradlew
가끔 npm run android를 실행하면 독립된 폰 창으로 뜨지 않고, Android Studio 앱 내에서 화면이 보여지는 경우가 있다.
독립된 폰 창으로 보고 싶다면 Settings > Emulator 에 가서 `Launch in the Running Device tool window` 체크를 해제한다.
그리고 실행 중인 Device Manager을 한번 끄고 다시 실행한 후 `npm run android`를 다시 실행하면 된다.
IOS Simulator 구동시키기
XCode 가 없어서 못한다.. 이젠 정말 맥북을 사야겠다 -> 샀다 ! ㅋㅋ
먼저 Xcode와 cocopods를 설치하고, Xcode에 들어가 ios 컴포넌트를 설치한다.
그리고! 프로젝트의 ios폴더로 들어가서 pods install로 설치도 해주어야한다.
cd ios
pod install
# 또는 bundle install
리액트 네이티브에서 아래 명령어는 매트로 번들러 실행 명령어이다.
Metro Bundler 란 ?
React Native의 자바스크립트 번들링 도구로, 앱의 JS 코드를 네이티브 앱과 연결해주는 서버이다.
npm start
그다음 아래 명령어로 ios 시뮬레이터를 구동할 수 있다.
cd ..
npm run ios
// 또는
npx react-native run-ios
만약 이때 pods 관련 문제가 나온다면 가장 흔한 방법으로는 pods 폴더를 재설치해준다.
cd ios
rm -rf Pods Podfile.lock
pod install --repo-update
cd ..그 다음 위의 run-ios를 다시 실행해주면 된다.
만약 폰 기종을 다르게 하고 싶으면 다음 명령어로 바꿀 수 있다.
npx react-native run-ios --simulator="iPhone 8 Plus"
짠- 실행 결과!
빌딩에 성공했다는 문구가 뜨고 그 아래는 시뮬레이션할 수 있는 다른 폰 기종들이 나온다.
- cmd + R 로 새로고침할 수 있다.
- cmd + D 로 디버깅을 할 수 있다. 오른쪽 화면처럼 Dev menu가 나온다.