이미 global하게 react-native-cli 패키지를 설치했다면 예상치 못한 이슈가 발생할 수 있으므로 지우세요...
1. AwesomeProject라는 이름의 새로운 리액트 네이티브 프로젝트를 만들어보자
npx react-native init AwesomeProject이미 존재하는 어플리케이션에 리액트 네이티브를 통합시키는 중이거나.
Expo에서 "ejected"했거나,
기존의 React Native 프로젝트에 ios support를 추가하는 중이라면 (참고 페이지 :reactnative.dev/docs/platform-specific-code)
이를 실행할 필요가 없다.
또, React Native app을 시작하기 위해 Ignite CLI(github.com/infinitered/ignite ) 같은third-party CLI를 사용해도된다.
[선택사항] 특정 버전이나 특정 템플릿을 사용하려면
- React Native 의 특정버전을 사용해 새 프로젝트를 만들고 싶으면 : --version을 사용
npx react-native init AwesomeProject --version X.XX.X
- TypeScript 같은 custom React Native template을 사용해 새프로젝트를 만들고 싶으면 : --template 사용
npx react-native init AwesomeTSProject --template react-native-template-typescript
- 위 명령어에서 오류가 난다면 ?
아마도 구 버전의 react-native 나 react-native-cli가 pc에 global하게 깔려있을 수 있음. cli를 삭제하고 npx를 이용해 cli를 돌려볼 것!
2. React Native application 동작시키기
1) Metro 시작하기
React Native를 나르는(?) Javascript 번들인 Metro를 실행해야한다.
시작하려면 리액트 네이티브 프로젝트 폴더 내에서
npx react-native start- Yarn 패키지를 사용하는 사람은 npx대신 yarn으로 사용해도 됩니당
- 웹개발에 익숙하다면, Metro는 react native app을 위한 webpack이랑 상당히 비슷하다. Kotlin이나 java랑은 다르게 자바스크립트랑 리액트 네이티브는 컴파일이 되지 않는다. Bundling은 compiling이랑 다르지만, 번들링은 퍼포먼스 시작 성능을 개선시키거나 어떤 플랫폼의 translate를 향상시킨다 (예를들어 특정 자바스크립트를 더 많은 자바스크립트로 translate).
2) Application 시작하기
Metro Bundler가 자기만의 터미널에서 run하게 하자. 리액트 네이티브 프로젝트 폴더 내에서 새로운 터미널을 열고 아래 코드를 돌린다.
npx react-native run-ios아니면 아래 코드를 사용하는 것도 방법임
npx react-native run-ios아니면 Xcode내에서 직접 run 해도된다.
방법을 모르겠다면 ➡️ reactnative.dev/docs/troubleshooting#content
Troubleshooting · React Native
These are some common issues you may run into while setting up React Native. If you encounter something that is not listed here, try searching for the issue in GitHub.
reactnative.dev
디바이스에서 돌리기
위에서 command들을 실행하면 디폴트로 iOS Simulator에서 app이 실행된다. 만약 실제 물리적인 iOS 장치에서 app을 돌려보고 싶다면 이 링크를 클릭 ➡️reactnative.dev/docs/running-on-device
Running On Device · React Native
It's always a good idea to test your app on an actual device before releasing it to your users. This document will guide you through the necessary steps to run your React Native app on a device and to get it ready for production.
reactnative.dev
앱 수정하기
앱이 성공적으로 실행되었을 때, 수정하는 방법이다.
- App.js 를 아무 텍스트 에디터를 열어서 몇몇 라인을 수정한다
- cmd+R 을 누르면 iOS Simulator에서 앱이 reload 된다
<document 원문>
reactnative.dev/docs/environment-setup
Setting up the development environment · React Native
This page will help you install and build your first React Native app.
reactnative.dev
'🎸 > React Native' 카테고리의 다른 글
| [ React Native ] 리액트 네이티브 기본강좌 5강 - state (0) | 2021.02.05 |
|---|---|
| [ React Native ] 리액트 네이티브 기본강좌 4강- props 정리 (0) | 2021.02.05 |
| [ React Native ] 리액트 네이티브 기본강좌: 3강 Hello world(2) (0) | 2021.02.05 |
| [ React Native ] React Native CLI Quickstart 리액트 네이티브 환경 구축 (0) | 2021.02.03 |
| [ React Native ] Xcode 설치 빠르게 (0) | 2021.02.02 |