[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