[Cordova] 아파치 코도바 찍어먹기 - 설치와 세팅

아파치 코도바(Apache Cordova)로 리액트 프로젝트를 돌돌 말아서 모바일 앱으로 구동하는 것이 목표인 '아파치 코도바 리액트에 찍어먹기' 포스팅입니다.

Create your first Cordova app 을 따라해보겠습니다.

명령줄 인터페이스 - Apache Cordova

Cordova CLI 설치하기

npm에서 cordova를 설치합니다.

 

$ npm install -g cordova

 

프로젝트를 시작할 경로에서 다음 명령어를 입력하세요.

 

$ cordova create path [id [name]] [options]

 

• path: 만들 프로젝트 폴더 이름
• id: config.xml에서 위젯 요소의 id 속성에 매핑되는 도메인 역방향 스타일의 식별자입니다. (ex. com.tistory.r4bb1t) 변경할 수 있지만 이 값을 참조하는 코드(ex. Java 패키지명)가 있을 수 있어서 변경하지 않는 것이 좋습니다.
• name: config.xml에서 이름 요소를 매핑하는 응용 프로그램의 표시 제목입니다. 이하는 id와 동일.

$ cordova create hello com.example.hello HelloWorld 처럼 입력하면 됩니다.

기본적으로 cordova create시 프로젝트의 www/index.html 파일을 홈페이지로 하는 웹 기반 앱 구조로 만들어집니다.

플랫폼 추가하기

이제 프로젝트 디렉토리로 가서 플랫폼을 추가해줍시다.

 

$ cordova platform add android
$ cordova platform add browser

 

저는 MacOS가 아니어서 안드로이드와 브라우저를 추가해봤습니다.

 

$ cordova platform ls

 

위 명령어를 치면 현재 설치된 플랫폼과 설치할 수 있는 플랫폼을 알려줍니다. 또, 프로젝트 내의 최상위 디렉토리의 platforms 폴더에서도 확인할 수 있습니다. (platforms 내의 파일들은 절대 수정하면 안됩니다.)

 

그렇습니다.

빌드를 위한 전제 요소 설치하기

앱을 빌드하고 실행하기 위해서는 대상으로 할 각 플랫폼들의 SDK를 설치해야 합니다. (그리고 브라우저는 SDK가 필요 없습니다.) 플랫폼 빌드를 위한 요구 사항을 충족하는지 확인해볼 수 있습니다.

 

$ cordova requirements

 

아놔

안드로이드 앱 빌드를 위해서는 얘네를 설치하시면 됩니다.JDK 8, Gradle, Android Studio(와 원하는 안드로이드 버전 SDK 패키지들)를 깔아줍니다. 설치와 환경변수 세팅 후에는 VS Code를 재시작해줍니다.

 

모두 설치가 된 모습

 

앱 빌드하기

프로젝트를 빌드하려면 다음 명령어를 실행하면 됩니다.

 

$ cordova build //모든 플랫폼 빌드
$ cordova build andriod //안드로이드만 빌드

 

이 상태에서 안드로이드로 빌드해보면

뭔가 된 것 같아 보입니다.

 

앱 실행하기

모바일 플랫폼용 SDK들은 기기 이미지를 실행하는 에뮬레이터와 함께 제공되는 경우가 있습니다. 안드로이드 스튜디오의 경우 설치시에 에뮬레이터를 함께 설치하는 옵션이 있었습니다.

 

$ cordova emulate android

 

이렇게 하면 안드로이드 에뮬레이터에서 앱을 테스트해볼 수 있습니다....

 

엥

아무것도 설정하지 않고 실행했더니 Wating만 하고 있군요. 문서를 찾아보니 시스템 환경 변수에

 

C:\Users\[your user]\AppData\Local\Android\Sdk\platform-tools
C:\Users\[your user]\AppData\Local\Android\Sdk\tools

 

안드로이드 SDK tool 경로도 등록해주어야 했습니다. 근데 그래도 안 되어서 확인해 보니

 

 

안드로이드 스튜디오 AVD 매니저에서 직접 켜야 하더라고요. 영감탱 가만안도

 

browser에서 실행도 됩니다

이렇게 에뮬레이터에서도 테스트를 해보았습니다. 컴퓨터에 장치를 연결한 후

 

$ cordova run android

 

하면 장치에서 직접 실행하는 것도 가능하다고 하는데, 아직 해보지는 않았습니다.

일단 띄우는 것 까지는 잘 되는데, 앞으로 어떤 난관이 기다리고 있을지 정말 기대가 되고 있습니다.