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

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

 

 

이번 시간에는 리액트 React로 만들어진 프로젝트를 

코르도바를 이용해서 안드로이드 앱으로 변환해보는 내용을 다뤄보겠습니다.

 

우선 코르도바는 다음과 같은 디렉토리 구조를 가집니다.

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

여기서 중요한 점은 저 www 디렉토리인데요.

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

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

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

 

시작은 Cordova를 설치해야합니다.

$ sudo npm install -g cordova

그다음 안드로이드 플랫폼을 추가합니다.

$ 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도 준비가 되었고,

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

$ cordova build android

빌드를 하면서 오류가 나오면 

오류 설명을 보고 충분히 고쳐볼 수 있습니다.

저같은 경우에는 버전 오류가 많이 있었습니다.

 

빌드가 완료되었다면, 다 완료된 것입니다!

안드로이드 스튜디오의 에뮬레이터를 통해서 구동해볼 수 도 있고,

apk 파일을 폰으로 옮겨서 직접 설치해서 이용할 수 있습니다.

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

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

 

처음으로 코르도바를 사용하고 앱을 처음 만들다보니 많이 헤매었지만 

하고나니 크게 어렵지 않네요.

 

잘못된 내용이나 수정할 부분이 있다면 편하게 댓글 달아주세요.

감사합니다.

 

 

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