[React Native] 시작하기
React Native 개발환경
- Expo CLI
준비 : Node.js, 디바이스 또는 에뮬레이터
가장 쉽게 시작할 수 있는 방법으로 React Native를 중심으로 구축된 도구 세트이다. 많은 기능 포함되어 있지만 필요없는 기능까지 설치되어 무겁다.- React Native CLI
준비 : Xcode(iOS) 또는 Android Studio(windows)
Expo CLI의 많은 이슈로 React Native CLI을 사용할 예정
1. Chocolatey 설치
: windows용 패키지 관리자 (참고 : https://chocolatey.org/install)
- 명령 프롬프트(CMD) 관리자 권한으로 실행
- Chocolatey 공식 홈페이지 install commend 붙여넣기
Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://chocolatey.org/install.ps1'))
- Chocolatey 설치 확인
choco -v
- Node.js 설치 및 확인
choco install -y node.js install node --version npm --version
- jdk8 설치 및 확인 (무조건 jdk8 이상으로 설치하기)
choco install -y jdk8
windows 사용자로 Android Studio 설치
iOS 사용자는 공식 홈페이지 참조 (https://reactnative.dev/docs/environment-setup)
2. Android Studio 설치
(참고 : https://developer.android.com/studio?hl=ko)
기존에 설치를 했기 때문에 간단하게 중요한 부분만 설명
- SDK Components Setup
모든 항목을 선택하고 설치해야한다.
특히 Indet HAXM의 경우 에뮬레이터를 사용할 수 있는 파일이기 때문에 설치가 필요하다.
- File > Settings > Othser Settings > Kotlin Compiler
Kotlin to JVM에서 Target JVM version이 1.6으로 되어있는데 호환성 문제로 오류가 날 수 있기 때문에 1.8로 바꿔준다.
- File > Settings > Appearance&Behavior > System Settings > Android SDK
우측 하단의 Show Package Details 체크하고 Android 9.0(Pie)에서 아래의 패키지를 찾아 체크 후 설치를 진행한다. (Apply)
추가로 Android SDK Loaction의 SDK 경로를 복사해준다.
3. 환경 변수 설정
- 제어판 > 시스템 및 보안 > 시스템
- 고급 시스템 설정 > 고급 > 환경변수
- "사용자"에 대한 사용자 변수 > 새로 만들기
변수 이름 : ANDROID_HOME
변수 값 : SDK 경로(아까 복사한 경로를 붙여넣기 해준다.)
- "사용자"에 대한 사용자 변수 > Path 선택 후 편집 > 새로 만들기
SDK 경로\platform-tools 로 편집한다.
- 명령프롬프트 실행
명령프롬프트에서 확인해준다.adb
4. React Native CLI 설치 및 확인
npm install -g react-native-cli
debug 기록
- port
설치 시 포트 에러가 날 수도 있다.
이전에 깔아둔 프로그램과 포트가 겹쳐졌기 때문인데 포트를 확인하고 사용하지 않는 프로그램이면 그 프로그램의 포트를 죽이고 리액트 네이티브가 사용하면 된다. 하지만 이 당시에는 그 생각을 못하고 그냥 포트를 변경하였다. 이때 AVD 포트 번호도 같이 변경 해주어야 한다.npx react-native start --port=8088
5. React Native 프로젝트 생성
react-native init "project-name"
debug 기록
- 파일이 열리지 않음
프로젝트 생성 기본 경로인 C:\Windows\System32에 생성하면 파일을 열지못하는 오류가 있는데 드라이브 하위 폴더에 생성하여 오류가 난 것 같다. 그래서 꼭 명령 프롬프트에서 경로를 변경해주고 프로젝트를 생성 해주어야 한다.
6. React Native 프로젝트 실행
npx react-native run-android
환경 변수가 제대로 설정이 되어있다면 자동적으로 에뮬레이터가 실행된다.
debug 기록
- 에뮬레이터 실행 불가
환경 변수 설정도 잘 되어있는데 에뮬레이터가 실행되지 않았고 구글링 끝에 에뮬레이터가 정상적으로 실행되고 있지만 그 안 앱이 설치가 되지 않아 에러가 발생된다는 것을 알게됐다.
프로젝트 파일 > android > gradle > wrapper > gradle-wrapper.properties
이동 후 gradle 버전을 변경해 준다.변경 전 distributionUrl=https\://services.gradle.org/distributions/gradle-6.2-all.zip 변경 후 distributionUrl=https\://services.gradle.org/distributions/gradle-6.5-all.zip
프로젝트 파일 > android
폴더로 다시 이동 후 local.properties 파일을 생성한 뒤 아래와 같이 작성해준다.sdk.dir = C:\\Users\\<USERNAME>\\AppData\\Local\\Android\\sdk
- 웃긴 비하인드
이 프로젝트 전에 안드로이드 스튜디오를 이용한 프로젝트 도중 에뮬레이터가 멈춰서 작동이 되지 않은 적이 있었다. 에뮬레이터 실행 기준이 어떤지는 모르겠지만 React Native 프로젝트 실행 시 작동이 멈춘 에뮬레이터가 실행이 되어 찾던 중 그냥 단순하게 AVD를 삭제하니 해결이 되었다.- Unable to load script 에러
React-Native 최초 설치 후 에뮬레이터 실행할 경우 위와 같은 오류가 발생하는데 구글링 끝에 해결하게 되었다.
프로젝트 파일 > android > app > src > main
폴더로 이동 후 assets 폴더가 있는지 확인 후 없으면 생성해준다.
명령 프롬프트에서 프로젝트\android 경로로 이동 후./gradlew clean
명령 프롬프트 프로젝트 폴더에서 아래 명령어 실행하면 된다.
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res
Author And Source
이 문제에 관하여([React Native] 시작하기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@s2ilver8/React-Native-시작하기저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)