Cordova란
Cordova
- Javascript, HTML 5, CSS를 이용하여 모바일 기기를 위한 응용 프로그램을 만들 수 있게 하는 프레임워크이다.
- Node.js 플랫폼 기반의 하이브리드 앱 개발 프레임워크
하이브리드 앱
- 네이티브 앱 + 웹 앱
- 화면 및 기능과 같은 콘텐츠 영역은 웹 기반
- 최종 앱 배포 및 앱 마켓 등록, 설치 패키징 처리는 네이티브 앱으로 구현
- 디바이스 자체 기능, 네이티브 기기 API도 이용할 수 있다.
- 주소록, 카메라, 진동 ,GPS 등의 모바일 고유의 기능
Cordova로 React 앱 Android APK 파일 만들기
1. cordova 설치
npm install -g cordova
2. 프로젝트 생성
- 이미 완성된 React 앱이 있으면 React 앱 폴더 안에서 생성한다.
cordova create [폴더명] [패키지명] [프로젝트 명]
cordova create hello com.example.hello hello
- 없으면 react 프로젝트 생성 후에 해당 폴더 안에서 생성
npx create-react-app [프로젝트명]
cordova create [폴더명] [패키지명] [프로젝트 명]
cordova create hello com.example.hello hello
- package 명명 규칙
- 애플리케이션을 구분하는 고유한 값으로 디바이스에 설치되었을 때 다른 앱들과 구분하는 역할을 하므로 unique 해야한다.
- reverse-domain style convention을 따른다.
- 일반적으로 회사가 개발한 도메인 이름을 거꾸로 배열한 뒤 그 뒤에 프로젝트 명을 붙이고 필요에 따라서 기능별로 세분화한다.
- 모두 소문자 권고
- package.json에 이렇게 들어가 있다.
3. Cordova 프로젝트 안으로 이동
cd [폴더명]
cd hello
4. 플랫폼 추가
- android, ios 등 원하는 플랫폼 추가
cordova platform add [플랫폼]
cordova platform add android
- 해당 플랫폼 build를 위해 필요한 환경 확인
cordova requirments [플랫폼]
cordova requirements android
5. 환경 변수 설정
- Java JDK와 Android SDK 가 기본적으로 필요하다.
- 안드로이드 스튜디오를 설치한 후 Android SDK 설정해줘야 한다.
- 시스템 환경 변수 설정에서 시스템 변수에 두 값을 추가해 준다.
- 두 변수 같은 변수 값으로 넣어 주면 된다.
ANDROID_HOME = [SDK 경로]
ANDROID_HOME = C:\Users\사용자명\AppData\Local\Android\SdkANDROID_SDK_ROOT = [SDK 경로]
ANDROID_HOME = C:\Users\사용자명\AppData\Local\Android\Sdk
- 시스템 환경 변수 설정에 환경 변수 중 Path에 Gradle 경로 새로 만들어 준다.
- .gradle 폴더가 없다면 안드로이드 스튜디오에서 새 프로젝트를 생성 후 run 한 번 해주면 보일 것이다.
C:\Users\사용자명\.gradle\wrapper\dists\gradle[버전]\[폴더명]\gradle[버전]\bin
6. Build Tools 설치
- 안드로이드 스튜디오 >> 좌측 상단 메뉴 >> File >> Settings
- 검색에 SDK라고 치면 Android SDK가 나온다.
- SDK Tools에서 하단 Hide Obsolete Packages와 Show Package Details 둘 다 체크
- Android SDK Build-Tools를 누르면 상세 버전이 나오는데 필요한 버전으로 설치한다.
- 필요한 버전 확인
- 터미널에 cordova build android라고 명령어 입력하면 SDK 버전이나 그 이상의 버전이 필요하다고 나오는데 해당 버전을 정확히 설치해준다.
7. Emulator 생성
- 안드로이드 스튜디오에서 우측 세 아이콘 중 중간 부분을 누르면 Device Manager가 나온다.
- 추가 아이콘을 누른 후 Device 하나 만들어준다.
- start 누르면 device 실행된다.
8. package.json property 추가
- react 프로젝트 내 package.json에서 dependencies 전에 다음 property를 추가 해준다.
- index.html 파일의 상대 경로로 asset들을 fetch 해준다.
cd ..
cd [react 프로젝트 경로]"homepage" : "./"
9. 일부 코드 조정
<BrowserRouter>를 <HashRouter>로 바꿔준다.
- BrowserRouter는 URL을 통해 서버의 폴더를 이동하는 것처럼 보여준다.
- server side rendering처럼 보여지게 된다.
- 검색엔진 최적화
- 배포를 위해서 추가 설정이 필요하다.
- basename 속성 설정
- homepage 주소 셋팅
- 새로고침 시, 해당 URL을 바탕으로 페이지 새로 불러온다.
- Link 태그 사용하여 단순히 주소 바꿔주면서 렌더링 하기 때문에 새로고침 시 해당 페이지를 찾지 못한다.
- HashRouter는 #는 내부 링크 기능을 한다.
- '#'이 붙으면서 도메인 주소 확실히 인식 시킬 수 있었다.
- 검색엔진으로 읽지 못한다.
- 정적인 페이지에 적합하다.
- 새로고침 시 # 이전의 URL만 서버를 통해 불러온다. 에러 발생하지 않게 된다.
10. React App build
- React 프로젝트를 build 해준다.
npm run build - build 폴더가 생성된다.
11. http 통신
- axios 등을 사용하여 http API를 사용하는 경우가 있다.
- 안드로이드 9부터 http 통신을 허용하지 않는다.
- AndroidManifest.xml을 변경해줘야 하는데 cordova에서는 config.xml을 통해서 바꿔줘야 한다.
- cordova 프로젝트 내 config.xml 파일 안에서 widget 태그 안에 다음 태그를 추가해준다.
<edit-config file="AndroidManifest.xml" mode="merge" target="/manifest/application">
<application android:usesCleartextTraffic="true" />
</edit-config>- usesCleartextTraffic = true 는 모든 url을 허용한다는 설정이다.
- 위 방식으로도 안된다면 다음 태그를 config.xml 파일 안 widget 태그 안에 추가해준다.
<access origin="<http 상세 url>"/>
12. www 폴더 내 파일 변경
- cordova 프로젝트 내 www 파일을 다 비운 후, react app에 있는 build 폴더 안 모든 파일을 그대로 www 폴더 내로 옮긴다.
- 이 www 폴더 내 파일을 기반으로 build 한다.
- 이 www 폴더 내 파일을 기반으로 build 한다.
13. Emulator 실행
- 안드로이드 스튜디오 디바이스가 켜진 상태로 다음 코드를 실행하면 앱이 build된 후 실행된다.
cordova emulate [플랫폼]
cordova emulate android
- 물론 build만 할 수도 있다.
cordova build [플랫폼]
cordova build android
14. APK 파일
- 이 apk 파일을 android 기기에 옮겨서 직접 설치하여 실행할 수 있다.
[cordova 프로젝트 폴더]/platforms/android/app/build/outputs/apk/debug/app-debug.apk
- cordova 공식 문서 참조
https://cordova.apache.org/docs/en/12.x/plugin_ref/spec.html#edit-config
Plugin.xml API - Apache Cordova
Plugin.xml API Plugin.xml file defines the structure and settings required for your plugin. It has several elements to provide details about your plugin. plugin The plugin element is the plugin manifest's top-level element. Attributes Description xmlnsStri
cordova.apache.org
- stackoverflow 참조
https://stackoverflow.com/questions/43336924/cordova-with-create-react-app
Cordova with Create-react-app
I have created a ReactJs app with create-react-app and then made the Production build with npm run build. In my www folder created with Cordova I just copy all the files from the create-react-app's...
stackoverflow.com
