앞선 글에서 아이오닉 4 개발을 위한 설치와 환경 구성을 해보았다. 이번 글에서는 아이오닉 프로젝트를 IOS와 안드로이드의 시뮬레이터나 디바이스에서 실행하는 내용을 담는다.
사용되는 서드파티 라이브러리는 Capacitor 또는 Cordova이된다. Capacitor는 웹 기반의 프로젝트를 IOS, 안드로이드, 데스크탑(일렉트론)에서 실행할 수 있게하는 크로스 플랫폼 앱의 런타임 환경이며, Cordova는 카메라나 가속도계와 같은 디바이스 장치에 있는 기능을 액세스하기 위한 Javascript API를 제공하는 프레임워크이다.
두 서드파티 라이브러리로 각각 네이티브 앱을 실행하는 방법을 알아본다.
IOS 실행하기
프로젝트 생성
먼저 IOS로 실행하는 방법을 알아본다. 처음 할 일은 아이오닉 프로젝트에서 IOS 네이티브 프로젝트를 만들어야 한다.
아래 명령어를 수행하면 Capacitor의 경우 프로젝트 루트 경로에 ios에, Cordova의 경우 platforms/ios 경로에 IOS 네이티브 프로젝트가 생성된다.
// Capacitor의 경우
ionic capacitor add ios// Cordova의 경우
ionic cordova prepare ios
그 다음으로 프로젝트의 패키지 아이디를 설정 해준다. Capacitor의 경우 capacitor.config.json 파일에서 appId 속성을 프로젝트의 리버스 도메인 형식으로 수정한다. Cordova의 경우 config.xml 파일에서 <widget>의 id 속성을 마찬가지로 수정한다.
Xcode에서 프로젝트 열기
Capacitor의 경우 다음과 같이 실행하여 Xcode에서 앱을 연다.
ionic capacitor open iosCordova의 경우 Xcode를 직접 열고 File → Open에서 앱을 연다. 앱의 위치는 프로젝트의 platforms/ios 경로에 있다. 그 다음으로 패키지 아이디 및 서명을 확인한다.
Xcode의 프로젝트 탐색창에서 프로젝트 수정 창을 연다. Identity 섹션에서 전에 수정한 리버스 도메인이 Bundle Identifier와 동일한지 확인한다.
그 다음 아래 Signing 섹션에서 Autimatically manage가 활성화되어 있는지 확인한다. 그리고 나서 개발팀을 선택하면 Xcode는 프로비저닝과 서명을 자동을 준비하고 수행한다.
Xcode로 실행하기
아이오닉 앱을 개발하다가 한번씩 시뮬레이터에서 확인하고 싶을 것이다. 그럴 때 아이오닉 프로젝트를 네이티브 프로젝트로 한번씩 동기화 한다.
// Capacitor의 경우
ionic capacitor copy ios// Cordova의 경우
ionic cordova prepare ios
그 다음 Xcode에서 시뮬레이터나 디바이스를 선택하고 좌측 상단의 재생 버튼을 클릭하면 된다.
아이오닉 CLI로 실행하기
아이오닉 CLI는 간단한 명령으로 아이오닉 앱을 IOS 시뮬레이터나 디바이스에 빌드, 복사, 배포할 수 있다. 라이브 리로드도 가능하기 때문에 코드를 수정하고 저장하면 시뮬레이터나 디바이스에도 새롭게 빌드한 앱이 새로 고침된다.
Capacitor로 라이브 리로드
Capacitor로는 아직 네이티브 프로젝트를 빌드할 수 없고 Xcode를 사용하여 빌드하고 배포한다. 하지만 아이오닉 CLI는 라이브 리로드 서버를 부팅하고 Capacitor의 명령어로 사용할 수 있다.
ionic capacitor run ios -l --address=0.0.0.0장치를 선택하고 Xcode에서 재생버튼을 클릭한다.
Cordova로 라이브 리로드
Cordova는 프로그래밍 방식으로 아이오닉 앱을 빌드하고 배포할 수 있다.
$ ionic cordova run ios -l --address=0.0.0.0오류 해결 사항
IOS 네이티브 프로젝트를 생성한 후 Xcode를 열어 빌드를 수행했을 때 실패하는 경우가 있다. Target Support Files 경로의 설정파일을 읽을 수 없다는 에러가 발생한다. 여기서 확인해보니 프로젝트의 종속성이 해결되지 않아서 발생하는 문제라고 한다.
CocoaPods라는 Swift 및 Objective-C 코코아 프로젝트의 종속성 관리자 도구가 있는데 이것을 통해 캐시를 지우고 다시 설치하는 작업을 수행했다.
안드로이드 실행하기
IOS에 이어 안드로이드를 실행하는 방법을 알아본다.
프로젝트 생성
안드로이드도 IOS와 마찬가지로 안드로이드 시뮬레이터나 디바이스로 실행하려면 먼저 네이티브 프로젝트를 생성해야 한다.
// Capacitor의 경우
ionic capacitor add android// Cordova의 경우
ionic cordova prepare android
IOS 설정에서 동일하게 capacitor.config.json 파일의 appId 속성과 config.xml 파일에서 <widget>의 id 속성을 리버스 도메인 형식으로 수정한다. 이미 수정했다면 넘어간다.
Capacitor로 실행하기
Capacitor는 안드로이드 스튜디오를 이용하여 앱을 빌드하고 시뮬레이터나 디바이스에서 실행한다. 아이오닉 앱이 어느정도 개발되고 안드로이드 장치에서 확인해보고 싶을 때 다음과 같이 프로젝트를 복사한다.
ionic capacitor copy androidCordova로 실행하기
아이오닉 CLI로 아이오닉 앱을 안드로이드 시뮬레이터나 디바이스에 빌드, 복사, 배포할 수 있다. 라이브 리로드를 사용하느 경우 -l 옵션을 주면 된다.
ionic cordova android -l오류 해결 사항
안드로이드 네이티브 프로젝트를 생성한 후 안드로이드 9.0 버전으로 에뮬레이터를 실행했을 때 ERR_CLEARTEXT_NOT_PERMITTED 에러가 발생했다.
이것은 안드로이드 9.0 버전부터는 네트워크 보안정책이 강화되어 HTTP, FTP와 같은 cleartext 네트워크 트래픽을 사용하면 디폴트로 거부하게 되어있어서 발생하는 에러였다. 따라서 개발 모드에서 실행하고자 할 때는 다음과 같이 useCleartextTraffic 설정을 true로 변경해주어야 한다.
// android/app/src/main/AndroidManifest.xml<application android:usesCleartextTraffic="true">
이 플래그를 설정하게 되면 모든 cleartext 트래픽은 허용처리가 된다.
이상으로 아이오닉 프로젝트를 IOS와 안드로이드 프로젝트로 생성하고 실행하는 방법을 알아 보았다. 다음 글에서는 아이오닉 프로젝트에서 Angular가 어떻게 통합되어 개발되는지, 아이오닉 컴포넌트의 생명주기나 페이지 라우팅은 어떻게 핸들링하는지 등에 대해 알아본다.
