2020: ionic/cordova v1 개발 참조

하이브리드Hybrid 또는 노드Node-스크립트 기반 모바일(예: React/React.native) 개발에서 가장 어려운 것은 뭐니 뭐니 해도 빌드환경Build-environment 잡는 것이다. (네이티브 개발은 그에 비하면 완전 껌 수준)

처음 개발할 때는 쉽다.

이것저것 제3사(3^rd-Party) 플러그인이나 라이브러리들을 필요할 때마다 구글링해서 가져다 쓰다 보면 어느새 완성!

언어가 유독 쉽거나, 원소스One-source 멀티유즈Multi-use라서 생산성이 높은 것이 아니라, 구글이나 스택오버플로우가 거의 7~80% 해결해 주어 어지간한 기능들은 복사-붙여넣기만으로도 뚝딱 완성되니 생산성이 높을 수밖에. (React.native는 자바스크립트 기반이지만, 자바스크립트를 C언어라고 한다면 React.native는 ATL/MFC다. 복잡하고 더럽다.)

그런데,

몇 개월 시간이 지나면 상황은 완전히 바뀐다.

미처 수정하지 못한 버그를 수정하려 하거나, 없던 기능을 추가하려 하거나, 하다못해 iOS 프로비저닝 프로파일이 갱신되어 단순 버전 업데이트를 하려고만 해도 뭐가 제대로 되는 것이 없다. 경고Warning가 잔뜩 뜰 뿐만 아니라 아예 빌드 자체가 안되는 경우도 허다하다. 모바일 프레임워크의 특성상 버전업Version-update이 굉장히 잦고, 심지어 하위 호환성을 제대로 유지하지 않는 제3사 플러그인들이 많기 때문.

ionic/cordova만 해도 그렇다. 불과 2~3년 전만 해도 ionic v1이 상용 버전이었으나 현재는 벌써 v5가 넘어갔고 그 사이 수많은 관련 플러그인이나 라이브러리들이 사라지거나 새 기능으로 바뀌었다. iOS 인증서 두어 번 갱신할 시간만 지나도 아예 기존 개발 환경(을 그 상태 그대로 유지하고 있지 않는 한)으로는 빌드조차 되지 않는다.

 

 

2016년 무렵 처음 개발했던, 즉 ionic/cordova: ionic-v1으로 만들어진 프로젝트를 2020년 현재 시점에서 빌드하기 위해 필요한 작업들을 두서없이 적어 본다. (해마다 이것 참... 참으로 지난한 작업이다... 이러느니 처음 개발할 때는 조금 더디고 어렵지만, 이후 유지보수가 쉽고 환경 관리도 깔끔하게 잘 되는 네이티브 개발 환경이 더 나은 것이 아닌가 하는 생각...)

 

먼저, 기본 ionic/cordova 환경을 새 버전으로 싹 갈아끼워야 한다.

# 버전 확인
npm -v
ionic -v
cordova -v

# 설치 제거
sudo npm uninstall -g angular-cli
sudo npm uninstall -g @angular/cli
sudo npm uninstall -g ionic
sudo npm uninstall -g cordova
sudo npm uninstall -g @ionic/v1-toolkit
sudo npm uninstall -g @ionic/cli

# 확인/캐시 업데이트
sudo npm cache verify

# 새 버전 설치
sudo npm i -g @ionic/cli
sudo npm i -g cordova@latest
sudo npm i -g @angular/cli@latest
sudo npm i -g @ionic/v1-toolkit@3.2.0

 

Cordova 버전이 달라져서 처음 개발할 때와 환경이 맞지 않으면 강제로 맞춰 준다.

# Cordova 플랫폼 버전 확인
cordova platform version

# Cordova 플랫폼 버전 조정
cordova plugin save
cordova platform rm ios
cordova platform add ios@4.5.5

# Cordova 플러그인 버전 확인
cordova plugin update

# Cordova 플러그인 버전 조정
cordova plugin rm cordova-plugin-file-transfer --nosave
cordova plugin add cordova-plugin-file-transfer@1.7.1 --nosave --force

# 사용되지 않는 Cordova 플러그인 제거
cordova plugin rm cordova-webintent
cordova plugin rm cordova-plugin-ionic-keyboard
cordova plugin rm cordova-plugin-ionic-webview
cordova plugin rm com.borismus.webintent

 

MacOS에서 Cocoa Pods가 필요한 경우에는 아래 명령으로 설치해 준다.

sudo gem install cocoapods

 

MacOS에서 아래와 같은 안드로이드 SDK 관련 에러가 발생하면,

WARNING: The Android SDK is not installed or is not configured properly. Cannot find a compatible Android SDK for compilation. To be able to build for Android, install Android SDK 22 or later. You need to have the Android SDK Build-tools installed on your system. You can install any version in the following range: '>=25.0.2'. You need to have Android SDK 22 or later and the latest Android Support Repository installed on your system.

적절한 SDK를 찾아서 설치해 주어야 한다.

cd ~/Library/Android/sdk
curl -O https://dl.google.com/android/repository/tools_r25.2.3-macosx.zip
unzip -o tools_r25.2.3-macosx.zip
rm tools_r25.2.3-macosx.zip

 

프로젝트 폴더 하위에 있는 node_modules 폴더 이하는 모두 사용자 권한으로 설정되어 있어야 하는데, 간혹 잘못 설정되는 경우가 있다. 그럴 때는 조정하면 된다.

sudo chown -R $(whoami) node_modules

 

그래도 잘 안되면 아예 싹 날리고 새로 설치해도 된다. (괜찮다. 잘 된다! 안전하다! 그래도 혹시... 라고 생각되면 백업해 두거나 SVN 등에 형상 관리를 하면 된다.)

rm -f *lock.json
sudo rm -fr node_modules
npm install

 

Gulp 라이브러리는 자동화를 위한 라이브러리로 sass나 watch에 많이 쓰는데, 역시 몇 년 사이에 많이 바뀌었다.

가급적 최신 버전을 쓰는 것이 좋다.

>> 참조: recoveryman.tistory.com/285?category=652407

[걸프(Gulp)] 1. 소개 및 설치

>> 참조: recoveryman.tistory.com/276

[사스(Sass)] 1. Sass 란 무엇인지 + 설치

 

# Gulp 기본 실행 후 ionic/cordova 빌드 수행 테스트
gulp && ionic cordova build ios --no-build --verbose

 

Gulp 버전이 이상하면 아예 싹 지우고 새로 설치하는 것도 좋다. Gulp는 전역 도구(CLI)와 로컬 프로젝트 도구 두 개가 다 필요하다. 각각 따로 총 두 번 설치해야 한다.

# package.json에서 gulp-sass 버전은 최소 3.0.0 이상이어야 한다.
"gulp-sass": "^3.0.0"

# Gulp 및 관련 패키지들을 최신 또는 특정 버전으로 재설치한다.
sudo npm uninstall -g gulp
sudo npm uninstall -g chokidar
sudo npm uninstall -g fsevents
sudo npm cache verify
sudo npm i -g chokidar@latest or chokidar@3.4.2
sudo npm i -g fsevents@latest or fsevents@2.1.3
sudo npm i -g gulp

# npm 전역 패키지 최신으로 업데이트
sudo npm -g update

# 로컬 Gulp 재설치
npm uninstall gulp
npm i gulp@4.0.2

# Gulp 버전 확인
gulp -v
CLI version 2.3.0
Local version 4.0.2

 

필요 시 아래 옵션으로 gulp-sass를 설치하는 방법도 있다. (참고만)

sudo npm uninstall -g node-sass
sudo npm cache verify
sudo npm i -g --unsafe-perm node-sass

sudo npm uninstall gulp-sass
sudo npm i --unsafe-perm gulp-sass

 

그리고, 기타 설정...

# window.open() 문제 해결을 위한 권한 추가
/config.xml:
 -> <allow-navigation href="*" />

# com.borismus.webintent는 없어졌다: cordova.webintent로 대체됨
/config.xml:
 -> com.borismus.webintent:  https://github.com/Initsogar/... -> https://github.com/cordova-misc/...

# Gulp 환경은 최소 아래 버전 이상이어야 한다.
/package.json:
 -> gulp: ^4.0.2, gulp-util: ^2.2.14, gulp-sass: ^3.0.0

# ionic-v1 빌드를 위한 설정
/ionic.config.json:
 -> "integrations": { "cordova": {} }, "type": "ionic1",

# Gradle wrapper는 http 서비스를 중지했다: https로 변경 필요
/platforms/android/cordova/lib/builders/GradleBuilder.js:
 -> https://services.gradle.org/distributions/...
/platforms/android/gradle/wrapper/gradle-wrapper.properties:
 -> https://services.gradle.org/distributions/...