아이오닉 capacitor의 사용방법

Ionic capacitor란?

하나의 코드로 iOS, Android 웹 앱을 설치가능한 앱으로 만들 수 있도록 해주는 크로스 플랩폼 앱런타임입니다.

기존에는 이러한 하이브리드 앱 기능을 위해서 cordova를 사용해 왔는데, cordova에는 몇가지 한계점이 드러나게 되면서, capacitor가 등장 하였습니다.

capacitor는 iOS, Android, Web가릴것 없이 거의 동일한 UI를 적용이 가능하게 하며, 일관된 웹 API 세트를 제공하게 됩니다.

npm init @capacitor/app

npm i @capacitor/core
npm i -D @capacitor/cli

npx cap init

프로젝트에 capacitor용 Android와 iOS를 설치하고, capacitor로 android와 ios 프로젝트를 생성합니다.

npm i @capacitor/android @capacitor/ios
npx cap add android
npx cap add ios

생성한 프로젝트를 동기화 해줍니다.

npx cap sync

자바 버전 확인 : java -version 11버전 이상
gradle 설치 확인 : gradle 버전 7.4이상
환경 변수 확인 : gradle 및 java의 환경 변수가 올바르게 설정되어있는지 확인
안드로이드 스튜디오 설치 여부 확인 : https://capacitor.ionicframework.com/docs/getting-started/dependencies#android-development

ng build 명령어를 실행합니다.
→ www폴더가 생성됩니다.
ionic capacitor add android 를 실행하여 줍니다.
- 만약 처음 실행한다면, appId 및 appName등을 설정하는 문구들이 보이게 되는데
- appId : com.도메인
- appName : 프로젝트 명으로 설정해 줍니다.
ionic capacitor copy android : www폴더에 생성된 정보들을 android폴더로 복사해주는 명령어 입니다.
ionic capacitor run android : 캐패시터가 자동으로 해당 빌드 파일을 androidStudio로 실행시켜주는 명령어 입니다.
- ionic capacitor run android -l : 해당 명령어를 이용하면 실시간으로 업데이트 되는 기능을 제공합니다.

참고