[React] Cordova로 안드로이드, IOS 버전 만들기

# Cordova란?

- 코르도바 프로젝트의 디렉토리 구조

myapp/ //프로젝트
|-- config.xml
|-- hooks/
|-- merges/
| | |-- android/
| | |-- windows/
| | |-- ios/
|-- www/ //웹 artifacts를 가집니다. 예를들어 html, css, js 파일들이 해당합니다.
|-- platforms/ //프로젝트에 추가하는 플랫폼에 대한 모든 소스코드와 빌드 스크립트를 포함합니다.
| |-- android/
| |-- windows/
| |-- ios/
|-- plugins/
  |--cordova-plugin-camera/

 

- 코르도바는 www에 담겨져있는 파일을 가지고 안드로이드 빌드(cordova build android)를 하게됩니다.

- 기존에 우리가 만들어둔 리액트 React 프로젝트는 build 디렉토리에서 빌드하게 되겠죠.

- 기존 React 프로젝트에서 빌드한 다음, 이를 mv build www 를 통해서 www 로 이동시켜줘야 합니다.

 

0. React 운영용 build

$ sudo npm run build

1. 시작은 Cordova를 설치

$ sudo npm install -g cordova

2. 안드로이드 플랫폼을 추가

$ cordova platform add android

- 플랫폼이 잘 추가되었는지 확인하기 위해서는 ls로 확인할 수 있습니다.

$ cordova platform ls

- 오류가 나올 수 있습니다. 

예를 들면 android broken 같은 경우가 있습니다. 이 경우 sdk 의 경로 설정을 해주면 해결됩니다. 

bash 가 아니라 zsh의 경우에는 .zshrc 에서 추가해주시면 됩니다.

touch ~/.bash_profile; open ~/.bash_profile

export PATH=${PATH}:/SDK경로/platform-tools:/SDK경로/tools

 

- 빌드에 필요한 요구사항들을 설치해야합니다.

요구사항 프로그램들이 잘 설치되었는지는 다음으로 확인할 수 있습니다.

$ cordova requirements

 

- 이제 requirements도 준비가 되었습니다.

 

3. react build 폴더에서 www 폴더로 이동

mv build www

 

4. android platform도 준비 되었다면, 빌드를 할 수 있습니다.

$ cordova build android

- 빌드를 하면서 오류가 나오면 오류 설명을 보고 충분히 고쳐볼 수 있습니다.

- 빌드가 완료되었다면, 다 완료된 것입니다! 안드로이드 스튜디오의 에뮬레이터를 통해서 구동해볼 수 도 있고, apk 파일을 폰으로 옮겨서 직접 설치해서 이용할 수 있습니다.

- apk 파일은 여기에 만들어져 있습니다.

./platforms/android/app/build/outputs/apk/debug/app-debug.apk

 

# 출처

https://themarketer.tistory.com/34

리액트웹으로 코르도바 안드로이드 앱 만들기(react cordova android)