일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 31 |
- 알고리즘
- 블록체인
- 전자계약
- 독후감
- 전자계약서
- 아주작은습관의힘
- 모두싸인
- 전자계약서비스
- 전자계약시스템
- javascript
- map
- 모두의사인
- 코딩테스트
- 온라인계약
- 갤럭시노트20
- 모두싸인마케터
- 아이폰12
- atomichabits
- 자바스크립트
- 자릿수더하기
- 아이폰13
- 좋은습관
- 독서리뷰
- 모두싸인마케팅
- 습관
- 전자계약솔루션
- 옥소폴리틱스
- 마케팅
- 아이폰
- 모두사인
- Today
- Total
찰리의 이야기
리액트웹으로 코르도바 안드로이드 앱 만들기(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)
'찰리: 개발이야기(Engineering)' 카테고리의 다른 글
구글 스프레드시트 앱스크립트 체크박스 이메일 보내기 (8) | 2022.05.20 |
---|---|
구글 스프레드시트 앱스크립트 단체메일 개인화로 보내기 (0) | 2022.04.25 |
Next.js 카카오맵 구현 (0) | 2021.09.30 |
Next.js Script Component 스크립트 컴포넌트 (0) | 2021.09.29 |