좋은향기's 프로그램 블로그

https://blog.naver.com/hjleesm/221481403537

AppStore를 통하지 않고 App을 배포하려면(Enterprise배포)

기업용개발자 계정이 필요하고, 

배포용 인증서의 유효기간은 3년이지만,

1년마다 provisional profile을 갱신해서 배포해야 한다.

1년이 경과하면 신규 설치 뿐 아니라, 기본에 설치된 App들도 더이상 구동되지 않는다.

ipa 파일에서 인증서 정보 확인

ipa파일 압축해제

unzip YOURAPP.ipa

인증서 추출

codesign --display --extract-certificates --verbose=4 Payload/YOURAPP.app

0번째 인증서 날짜 확인

openssl x509 -inform DER -in codesign0 -noout -subject -issuer -dates

ipa 파일에서 provisional profile 확인

ipa파일 압축해제

unzip YOURAPP.ipa

.app폴더 이동

 cd YOURAPP.app

profile추출

security cms -D -i embedded.mobileprovision > profile.plist

파일 확인( ExpiratonDate 검색

» vi profile.plist  

?ExpirationDate

1. Apache cordova -  App 개발 기본

2. Apache cordova - plugin 사용( for android )

3. Apache cordova -  plugin 개발( for android ) 

 4. Apache cordova -  Activity를 포함하는 plugin 개발 ( for android ) 

개발 환경:

OS: Windows

개발툴: VS Code

support Platform : Androd

지난 글에서 단순한 기능을 포함하는 cordova plugin개발에 대해서 알아봤다.

한가지 더 궁금 했던 부분은 cordova plugin내에 Activity나 string, image 등의 리소스를 포함하여 패키징 할 수 있는냐는 것이다.

cordova plugin으로 어떤 기능까지 제공할 수 있느냐 하는 문제와 크게 다르지 않은 의문이라 조금만 더 파보고자 한다.

이전 글에 이어서 몇가지만 정리 하고 넘어 가자.

cordova plugin은 cordova app과 어느 시점에 어떤 방식으로 병합(?)되는 걸까?

plugin을 추가하면 app 프로젝트에 반영되는 주요 변경 사항을 살펴보자.

기억을 상기 시키기 위해, 이전 글에서 작성한 소스코드 두벌을 다시 소환한다.

1. cdvplugin.js - 노출 API를 export한 javascript 소스 파일 ( platform 공통 )

2. cdvplugin.java  - 노출된 API를 구현한 Java 소스 파일 ( android platform 종속 )

cordova app 프로젝트 관점

1. package.json 파일에 plugin 설정이 추가 된다.

2. plugins 폴더 하위에 plugin source 파일들이 복사된다. cdvplugin.js , cdvplugin.java,, plugin.xml ...

(파일/폴더 구조 및 소스 및 설정 파일까지 통째로 복사됨)

Android app 프로젝트

cordova platform add android

커맨드를 통해 생성되는 [platforms/android] 폴더에 생성되는 프로젝트는

Android Studio를 통해 오픈되며 빌드 가능하다. ( gradle 버전이라던가 plugin 버전이라던가  sdk 버전의 missmatch에서 오는 이슈를 해결해야 하는 경우가 많지만 ...)

이 이야기인 즉슨, platforms/android 폴더에는 모든 app 코드와 모듈(플러그인)이 어떤 형태로든 병합(?)되어 빌드가능한 형상으로 존재한다는 뜻이다)

Android project의 구조를 살펴보며, cordova app의 구동구조를 살짝만 엿보도록 하자.

1. Webview에서 구동될 webapp 코드( cdvplugin.js등의 plugin코드 포함)들은 asset 폴더에 추가되고

2. MainActivity에 의해 로드된다.

(아래 그림을 보면 cordova plugin 소스 파일인 cdvplugin.java 또한 프로젝트에 포함되어 있는 것을 확인 할 수 있다.

MainActivity.java

asset에 포함된 webapp의 코드를 webview에 로드할 것으로 추측

package com.thirteenrains.cdvapp;

import android.os.Bundle;

import org.apache.cordova.*;

public class MainActivity extends CordovaActivity
{
    @Override
    public void onCreate(Bundle savedInstanceState)
    {
        super.onCreate(savedInstanceState);

        // enable Cordova apps to be started in the background
        Bundle extras = getIntent().getExtras();
        if (extras != null && extras.getBoolean("cdvStartInBackground", false)) {
            moveTaskToBack(true);
        }

        // Set by <content src="index.html" /> in config.xml
        loadUrl(launchUrl);
    }
}

자, 여기까지 살펴보면 cordova app과 plugin이 어떻게 android project에 병합(?) 되는지 감이 오지 싶다.

다시 처음의 주제로 돌아와서 ....

cordova plugin의 소스를 대상 플랫폼의 빌드 구성안에 우겨 넣는 형태로 연동하는 것으로 보이는데

Custom Activity나 Resource를 plugin에 추가해서 배포하려면 어떻게 해야 할까?

하나의 방법을 제시하자면, 

Androdi Library(AAR)에 리소스를 포함하고, 해당 aar을 plugin에서 참조하는 방법으로 구현이 가능하다.

(다른 방법이 추가로 존재할 수도 있지만 굳이 찾지 않는다.)

AAR 프로젝트

Simple한 Activity를 하나 포함한 AAR 라이브러리를 작성한다.

AndroidManifest.xml

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    package="com.thirteenrains.nativelib">

    <application
        android:allowBackup="true"
        android:dataExtractionRules="@xml/data_extraction_rules"
        android:fullBackupContent="@xml/backup_rules"
        android:supportsRtl="true"
        android:theme="@style/Theme.Nativelib"
        tools:targetApi="31">
        <activity
            android:name=".SimpleActivity"
            android:exported="true">
        </activity>
    </application>

</manifest>

SimpleActivity.ava

package com.thirteenrains.nativelib

import androidx.appcompat.app.AppCompatActivity
import android.os.Bundle

class SimpleActivity : AppCompatActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContentView(R.layout.activity_simple)
    }
}

activity_simple.xml

<?xml version="1.0" encoding="utf-8"?>
<androidx.constraintlayout.widget.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context=".SimpleActivity">

    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="Hello World!"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

build..gradle

plugins {
    id 'com.android.library'
    id 'org.jetbrains.kotlin.android'
}

android {
    compileSdk 30

    defaultConfig {
        minSdk 23
        targetSdk 30
        versionCode 1
        versionName "1.0"

        testInstrumentationRunner "androidx.test.runner.AndroidJUnitRunner"
    }

    buildTypes {
        release {
            minifyEnabled false
            proguardFiles getDefaultProguardFile('proguard-android-optimize.txt'), 'proguard-rules.pro'
        }
    }
    compileOptions {
        sourceCompatibility JavaVersion.VERSION_1_8
        targetCompatibility JavaVersion.VERSION_1_8
    }
    kotlinOptions {
        jvmTarget = '1.8'
    }
}

dependencies {

    implementation 'androidx.core:core-ktx:1.7.0'
    implementation 'androidx.appcompat:appcompat:1.3.0'
    implementation 'com.google.android.material:material:1.3.0'
    implementation 'androidx.constraintlayout:constraintlayout:2.0.4'
    testImplementation 'junit:junit:4.13.2'
    androidTestImplementation 'androidx.test.ext:junit:1.1.5'
    androidTestImplementation 'androidx.test.espresso:espresso-core:3.5.1'
}

cordova plugin 프로젝트

1. cdvplgin/src/android 폴더에

1) nativelib.aar 복사

2) cdvplugin.gradle 파일 생성

repositories{    
  jcenter()
  flatDir {
      dirs 'src/main/libs'
   }
}

dependencies {
  // nativelib.aar dependency추가
  implementation 'com.thirteenrains.nativelib:nativelib@aar'
  // 필요에 따라 추가 dependency를 추가 할 수 있다.
  implementation 'com.google.android.material:material:1.4.0'
}

android {
  packagingOptions {
    exclude 'META-INF/NOTICE'
    exclude 'META-INF/LICENSE'
  }
}

2. cdvplugin/plugin.xml

- gradle 레퍼런스, aar 라이브러리 복사 설정

<?xml version='1.0' encoding='utf-8'?>
<plugin id="com.thirteenrains.cdvplugin" 
    version="0.0.1" 
    xmlns="http://apache.org/cordova/ns/plugins/1.0" 
    xmlns:android="http://schemas.android.com/apk/res/android">
    ...
    <platform name="android">
        ...
        <!-- gradle 설정 -->
        <framework src="src/android/cdvplugin.gradle" custom="true" type="gradleReference" />
        <!-- resource(aar파일) 복사 설정 -->
        <!-- src: plugin폴더 내의 경로, tartget: app 프로젝트 내의 경로 -->
        <resource-file src="src/android/nativelib.aar" target="libs/nativelib.aar" />
        ...
    </platform>
</plugin>

cordova app 프로젝트

index.html

<div>
        <p>
          <button id="btnShowActivity">show activity</button>
        </p>
      </div>

my.js

document.getElementById("btnShowActivity").addEventListener("click", toast);

function toast() {
  var cdvplugin = cordova.plugins.cdvplugin;
  cdvplugin.showAct("hi! cordova plugin", onSuccess, onError);
}

function onSuccess(status) {
  alert("onSuccess : " + status);
}

function onError(error) {
  alert("onError : " + error);
}

실행

cordova run android

- 끝 -

1. Apache cordova -  App 개발 기본

2. Apache cordova - plugin 사용( for android )

3. Apache cordova -  plugin 개발( for android )

4. Apache cordova - Activity를 포함하는 plugin 개발 ( for android ) 

개발 환경:

OS: Windows

개발툴: VS Code

support Platform : Androd ( iOS - windows에서는 빌드 불가 : 나중에 정리 )

간단한 cordova plugin 개발을 통해, cordova plugin 구조에 대해 알아보자.

Plugman

plugman은

Apache Cordova 프로젝트 와 함께 사용할 플러그인을 설치 및 제거하는 명령줄 도구입니다 .

라고 설명되어 있습니다.

https://github.com/apache/cordova-plugman

plugman을 통해 cordova plugin 프로젝트를 생성 할수 있습니다.

Cordova plugin 개발

plugman 설치

npm install -g plugman

plugin 프로젝트 생성

plugman create

지정된 경로에 Cordova 플러그인 프로젝트에 대한 템플릿 구조를 생성

명령 구문:

plugman create 
--name <pluginName> 
--plugin_id <pluginID> 
--plugin_version <version> 
[--path <directory>] 
[--variable NAME=VALUE]

인수:

값설명

코도바 플러그인 프로젝트를 생성해 봅니다.

plugman create --name cdvplugin --plugin_id com.thirteenrains.cdvplugin --plugin_version 0.0.1

[src] 폴더

플랫폼별 플러그인 코드가 작성될 폴더 입니다.

- www/cdvplugin.js 파일

cordova plugin에서 노출할 API가 정의될 파일 입니다.

'플로그인 이름'과 함수 명을 인자로 cordova.exec() 를 호출하는

coolMethod를 Export하고 있는 것을 확인 할 수 있습니다.

 plugin.xml 파일

플러그인의 설정이 저장될 파일 입니다.

- 프로젝트 생성 커맨드 실행시 입력한 인자와 비교해보면 되겠습니다.

음 기본 템플릿은 심플하네요.

www / cdvplugin.js가 cordova app쪽에서 호출할 API가 정의 되는 파일 이고,

src / 하위에 각 플랫폼별 동작 코드가 들어가는 구조인것 같습니다.

그럼 Android 플랫폼을 지원하도록 추가 해 보겠습니다.

Cordova plugin Platfom 추가

cd cdvplugin
plugman platform add --platform_name android

src / android 폴더 하위에 cdvplugin.java파일이 생성됩니다.

예상한 것처럼 coolMethod의 실행 코드가 포함되어 있습니다.

성공하면 success callback을

실패하면 error callback을 호출 하는 군요.

package com.thirteenrains.cdvplugin;

import org.apache.cordova.CordovaPlugin;
import org.apache.cordova.CallbackContext;

import org.json.JSONArray;
import org.json.JSONException;
import org.json.JSONObject;

/**
 * This class echoes a string called from JavaScript.
 */
public class cdvplugin extends CordovaPlugin {

    @Override
    public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("coolMethod")) {
            String message = args.getString(0);
            this.coolMethod(message, callbackContext);
            return true;
        }
        return false;
    }

    private void coolMethod(String message, CallbackContext callbackContext) {
        if (message != null && message.length() > 0) {
            callbackContext.success(message);
        } else {
            callbackContext.error("Expected one non-empty string argument.");
        }
    }
}

이전 글의 플러그인 함수 호출 코드를 소환해 보면 호출 흐름이 파악됩니다.

document
  .getElementById("reqCamPermission")
  .addEventListener("click", requestCameraPermission);

function requestCameraPermission() {
  var permissions = cordova.plugins.permissions;
  permissions.requestPermission(permissions.CAMERA, onSuccess, onError);
}

function onSuccess(status) {
  if (status.hasPermission) {
    alert("SUCCESS - get permission");
  } else {
    alert("FAIL - get permission");
  }
}

function onError() {
  alert("error ");
}

플러그인 기능 추가

그러면 내가 만든 플러그인에 'toast'를 팝업 시키는 간단한 기능을 추가해 보겠습니다.

www / cdvplugin.js

exports.toast = function (arg0, success, error) {
  exec(success, error, "cdvplugin", "toast", [arg0]);
};

src / android / cdvplugin.java

 public boolean execute(String action, JSONArray args, CallbackContext callbackContext) throws JSONException {
        if (action.equals("toast")) {
            String message = args.getString(0);
            if (message != null && message.length() > 0) {
                android.widget.Toast.makeText(cordova.getActivity().getApplicationContext()
                , message, android.widget.Toast.LENGTH_SHORT).show();
                callbackContext.success(message);
            } else {
                callbackContext.error("message is empty");
            }
            
            return true;
        }
        
        return false;
    }

cordova app에 플러그인 사용

이전 글에서 생성한 cdvapp에 cdvplugin을 추가해서 호출해 보겠습니다.

로컬에 존재하는 플러그인도 cordova plugin add 명령어를 통해 추가 할 수 있습니다.

다만 package.json파일을 먼저 생성해야 합니다.

plugman createpackagejson ./

cordova app프로젝트에 플러그인 추가

cdvapp과 cdvplugin폴더가 동일한 폴더에 있다고 가정하면

아래의 커맨드를 통해 로컬 폴더의 플러그인을 app에 추가 할 수 있습니다.

cordova plugin add ../cdvPlugin

--link 옵션을 추가로 주면, plugin 폴더를 sysbolic link로 참조하여 플러그인 변경사항이 바로 적용됩니다.

(플러그인 개발 중에는 --link옵션이 유용할 것 같네요)

* --link 옵션으로 command를 실행시, 아래와 같은 에러가 발생할 수 있는데 이경우 cmd창을 관리자권한으로 실행 한후 명령어를 실행하면 정상 설치 됩니다.

플러그인 추가

플러그인 리스트 확인

플러그인 삭제

cordova app프로젝트에서 플러그인 사용

www / index.html

- toast 버튼 추가

<button id="btnToast">toast</button>

www / js / my.js

- toast plugin 호출 코드 추가

document.getElementById("btnToast").addEventListener("click", toast);

function toast() {
  var cdvplugin = cordova.plugins.cdvplugin;
  cdvplugin.toast("hi! cordova plugin", onSuccess, onError);
}

function onSuccess(status) {
  alert("SUCCESS");
}

function onError(error) {
  alert("ERROR : " + error);
}

다음 글에서는 Activity ( View ) 혹은 resource를 포함하는 plugin 개발에 대해 좀 더 알아 보겠습니다.

4. Apache cordova - Activity를 포함하는 plugin 개발 ( for android ) 

1. Apache cordova - App 개발 기본

2. Apache cordova - plugin 사용( for android )

3. Apache cordova - plugin 개발( for android )

4. Apache cordova - Activity를 포함하는 plugin 개발 ( for android ) 

cordova app에 카메라, GPS, PUSH등의 Native 기능을 사용하려면 cordova plugin을 사용해야 한다.

이번 글에서는 cordova plugin을 추가하고 사용하는 기본적인 방법에 대해서 가볍게 살펴본다.

개발 환경:

OS: Windows

개발툴: VS Code

support Platform : Androd ( iOS - windows에서는 빌드 불가 : 나중에 정리 )

Apache cordova 핵심 플러그인

플러그인 Command

cordova plugin command

프로젝트 플러그인 관리

Command Syntax:

cordova {plugin | plugins} [
    add <plugin-spec> [..] {--searchpath=<directory> | --noregistry | --link | --save | --force} |
    {remove | rm} {<pluginid> | <name>} --save |
    {list | ls}
]

플러그인 적용

상대적으로 적용이 간단한 권한처리 플러그인을 적용해 본다.

플러그인 추가

android permission plugin(cordova-plugin-android-permissions) 

cordova plugin add cordova-plugin-android-permissions

cordova plugin add 명령어로 plugin을 추가 하면, package.json에 관련 정보가 추가된다.

plugin 테스트를 위한 UI추가

- index.html에 버튼을 하나 추가

- 플러그인 사용 코드를 추가할 my.js파일도 include

plugin 테스트를 위한 코드 추가

- js/my.js 파일을 생성후, 코드 추가

document
  .getElementById("reqCamPermission")
  .addEventListener("click", requestCameraPermission);

function requestCameraPermission() {
  var permissions = cordova.plugins.permissions;
  permissions.requestPermission(permissions.CAMERA, onSuccess, onError);
}

function onSuccess(status) {
  if (status.hasPermission) {
    alert("SUCCESS - get permission");
  } else {
    alert("FAIL - get permission");
  }
}

function onError() {
  alert("error ");
}

실행

App을 실행 해 봅니다.

cordova run android

- 권한 요청 창이 뜨면 성공

플러그인 구조 엿보기

cordova plugin을 개발하는 글에서 다시 설명하겠지만,

cordova plugin add  명령을 통해 , 플러그인을 설치하면, 아래 그림과 같은 구조의 폴더와 파일들이 생성된다.

www폴더 하위의 permissions.js 파일의 아래 부분과

android/plugins 폴더 하위의 Permissions.java 파일을 살펴보면 cordova Plugin의 동작구조를 엿볼 수 있다.

3. Apache cordova - plugin 개발( for android )

4. Apache cordova - Activity를 포함하는 plugin 개발 ( for android ) 

Aparch Cordova - App 개발

1.Apache cordova - App 개발 기본

2. Apache cordova - plugin 사용 ( for android )

3. Apache cordova - plugin 개발( for android )

4. Apache cordova - Activity를 포함하는 plugin 개발 ( for android ) 

개발 환경:

OS: Windows

개발툴: VS Code

support Platform : Androd ( iOS - windows에서는 빌드 불가 : 나중에 정리 )

Cordova 설치

npm install -g cordova

Cordova App 개발 - Android

프로젝트 생성

cordova create cdvapp com.thirteenrains.cdvapp cdvapp -d

-d (or --verbose) 옵션은 처리과정의 상세 내역을 표시해 주므로 유용하다.(이하 동일)

cordova create

지정된 경로에 Cordova 프로젝트에 대한 디렉터리 구조를 생성

명령 구문:

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

인수:

값설명

프로젝트 폴더 구조

플랫폼 추가

cordova platform

추가된 platform list 출력

cordova platform list

Android 플랫폼 지원

Android Platform용 App 빌드를 위한 환경설정 가이드

플랫폼 추가

cordova platform add android

폴더 구조

빌드

cordova build android

[windows]

* path 환경 변수에 'ANDROID_HOME'이름으로 Android SDK경로를 추가 해야 함

* 빌드관련 에러 대응

- JDK - Gradle version missmatch

- GRADLE path 관련

실행

cordova run android

2. Apache cordova - plugin 사용 ( for android )

3. Apache cordova - plugin 개발( for android )

4. Apache cordova - Activity를 포함하는 plugin 개발 ( for android ) 

Mobile 앱을 개발하는 방법은 크게 3가지로 구분된다.

'네이티브 앱 개발' 은 아주 직관적이지만, "하이브리드 앱"과 "크로스 플랫폼 앱" 개발방법의 정의는 일견 모호한 부분이 있다.

하나씩 알아보며 천천히 정리해 보자.

네이티브 앱

Android 와 iOS 각 플랫폼에 종속적인 방법으로 App을 개발하는 방식이다.

장점은

각 플랫폼에서 제공하는 SDK를 이용하여 개발하므로 플랫폼이 제공하는 모든 기능을  사용할 수 있고 플랫폼에 최적화된 UI/UX 구현이 수월하다는 점,

그리고 각 플랫폼에 최적화된 바이너리 구성으로 성능의 저하요인이 없다는 점을 들 수 있다.

단점은

동일한 기능을 제공하는 앱을 개발하려면 Android App과 iOS App을 각각 개발해야 하며, 코드자체가 플랫폼 종속적이기 때문에 업그레이드나 유지보수에도 많은 비용이 든다는 것이다.

네이티브 앱 개발의 경우, 길게 설명할 건덕지가 없으므로 짧게 정리한다.

하이브리드 앱

하이브리드 앱 이란 ?

개발:  기존의 웹앱(Web app) 개발 방법( language 및 기술, 개발 Framework )을 그대로 차용한다.

- 웹앱 개발 프레임웍 및 UI 컴포넌트는 Anguler / react / vue 를 활용하여 개발 할 수도 있고 아닐 수도 있다, 결국은 html / css / javascript 를 사용하는 webapp을 개발하는 것과 다르지 않다.

설치 : "하이브리드 앱 개발 프레임워크"를 이용하여, 각 플랫폼별 설치 패키지로 빌드하여 App Store를 통해 배포할 수 있다.

구동 : 설치된 웹앱이 Webview에 로드되어 실행된다.

- Webview에 로드되어 실행되는 형태이므로, Remote의 page를 로드하는 것도 가능

플랫폼 Native 자원(기능)접근 방법 : Built-in / 3rd-party / custom plugin을 통해 일반적인 Webapp에서 접근 할 수 없는 플랫폼 Native 자원(기능) 을 사용할 수 있다.

하이브리드 앱의 장/단점

하이브리드 앱의 장점은

웹개발에 능한 개발자가 손쉽게 앱을 개발/배포할 수 있고

(기본적인 기능들만 제공한다 했을때)완벽하진 않지만 단일 소스로 멀티 플랫폼에서 구동되는 앱을 개발할 수 있다.

단점은

내장 Webview를 통해 렌더링되고 구동되다 보니 플래폼에 최적화된 UI/UX구현에 제한이 있고 Native App 대비 성능상의 손실을 감수해야 한다.

결국은 WebApp이기 때문에 Native 기능은 plugin을 통해서만 접근 가능하며

잘 만들어진 plugin인 제공되지 않는다면 플랫폼이 제공하는 Native기능을 사용할 수 없다.

(혹은 plugin을 직접 개발해서 사용해야 한다.)

하이브리드 앱 개발 프레임워크 종류

정의와 아키텍처를 설명할때 개발 프레임워크의 명칭이 언급되거나 특정 프레임워크의 설명을 링크할 예정이므로, 먼저 살펴보고 가자.

하이브리드 앱을 개발하는데 사용되는 대표적인 "하이브리드 앱 개발 프레임워크"는

* Adobe PhoneGap / Apache Cordova 과

- PhoneGap과 Cordova는 거의 동일하게 취급해도 무방할 듯 하고, PhoneGap의 경우 Adobe의 지원이 종료된것 같다.

# 참조 : PhoneGap과 Apache cordova의 역사와 차이점

* Ionic

- Ionic은 표준 WebApp을 개발하는데 사용되는 Anguler / React / Vue 등의 웹앱개발 프레임워크를 Cordova에 접목한 형태로 이해하면 될것 같다.( 최근에 들어 cordova를 대체 할 capacitor Framework를 추가하여 cordova를 대체해 가는 모양새 이지만 여전히 cordova flugin은 사용가능하다)

#참조 : Capacitor vs cordove 차이점

등이 있다.

하이브리드 앱의 구조

하이브리드 앱의 구성을 러프하게 살펴보면 아래 그림으로 대변된다.

(한참 살펴보다 보니 '하이브리드 앱 개발 플랫폼'에 대한 이해는 cordova에 대한 이해와 결을 같이 한다고 결론을 내렸다.)

Ionic article중 Apache cordova 설명부분을 옮겨본다.

Apache Cordova 프레임워크란 무엇입니까?

코르도바는 어떻게 작동하나요? Apache Cordova는 웹 개발자가 HTML, CSS 및 JavaScript 콘텐츠를 사용하여 다양한 모바일 플랫폼용 기본 애플리케이션을 만들 수 있도록 하는 하이브리드 오픈 소스 프레임워크입니다.

Apache Cordova의 작동 방식을 자세히 살펴보겠습니다.

Cordova는 웹 애플리케이션을 가져와 기본 WebView 내에서 렌더링합니다. WebView는 기본 애플리케이션 내에서 웹 콘텐츠를 표시하는 데 사용되는 애플리케이션 구성 요소(예: 버튼 또는 탭 표시줄)입니다. WebView는 URL 필드나 상태 표시줄과 같은 표준 사용자 인터페이스 요소가 없는 웹 브라우저로 생각할 수 있습니다. 이 컨테이너 내에서 실행되는 웹 애플리케이션은 모바일 브라우저 내에서 실행되는 다른 웹 애플리케이션과 마찬가지로 추가 HTML 페이지를 열고, JavaScript코드를 실행하고, 미디어 파일을 재생하고, 원격 서버와 통신할 수 있습니다. 이러한 유형의 모바일 애플리케이션을 흔히 하이브리드 애플리케이션이라고 합니다.

일반적으로 웹 기반 응용 프로그램은 샌드박스 내에서 실행됩니다. 즉, 장치의 다양한 하드웨어 및 소프트웨어 기능에 직접 액세스할 수 없습니다. 이에 대한 좋은 예는 모바일 장치의 연락처 데이터베이스입니다. 이름, 전화번호, 이메일 및 기타 정보로 구성된 이 데이터베이스는 웹 앱에서 액세스할 수 없습니다 . 기본 애플리케이션 내에서 웹 앱을 실행하기 위한 기본 프레임워크를 제공하는 것 외에도 Cordova는 연락처 데이터베이스와 같은 다양한 장치 기능에 액세스할 수 있도록 JavaScript API도 제공합니다. 이러한 기능은 플러그인 컬렉션을 사용하여 노출됩니다. 플러그인은 웹 애플리케이션과 장치의 기본 기능 사이에 다리를 제공합니다.

Apache Cordova의 아키텍처 구조도(?)를 참조하면 좀 더 구체적으로 살펴볼 수 있다.

애플리케이션은 각 플랫폼을 대상으로 하는 래퍼 내에서 실행되며
표준 호환 API 바인딩을 사용하여 센서, 데이터, 네트워크 상태 등과 같은 각 장치의 기능에 액세스합니다.

* "Cordova App 및 Plugin 개발"방법은 아래링크의 추가 글을 통해 알아본다.

크로스 플랫폼 앱 개발 프레임워크

하이브리드 앱 개발 동일하게  "One Source - Multi-Platform 지원"이라는 공통적인 지향점을 가지고 있으나

내장 WebView를 통해 코드가 로드되는 하이브리드 앱 과는 달리 자체적인 UI 렌더링 시스템을 구현하고 있으며,

플랫폼별 설치파일 빌드 시, 해당 플랫폼에 최적화(?)된 바이너리 변환을 수반하기도 한다.

이러한 이유로 "하이브리드 앱'에 비해 성능상적으로 더 뛰어나다 할 수 있다.

개발 언어 측면에서는 "크로스 플랫폼 앱"개발을 위한 전용 언어를 사용하는 경우와 기존의 개발언어(웹 개발 언어/ Desktop App 개발언어)를 사용하는 경우가 혼재한다.

- React Native(Meta)

- Flutter(Google)

- Xamarin(MS)

등이 있다.

Cordova로 대변되는 하이브리드 앱 개발 프레임워크와 달리,

크로스 플랫폼 앱 개발 프레임워크의 경우

개발과 구동구조간의 상당한 차이가 존재하므로 React Native와 Flutter에 대해 살짝만 살펴보고 마무리 한다.

리액트 네이티브(React Native)

리액트 네이티브는 페이스북(Meta)에서 개발한 React를 기반으로 하는 '크로스 플랫폼 개발 프레임워크'로

React를 기반으로 모바일앱을 개발할 수 있도록 지원한다.

아래 그림을 보고 대략 이해해 보자

React Native’s architecture

이미지 출처: https://medium.com/front-end-weekly/how-does-react-native-work-understanding-the-architecture-d9d714e402e0

플랫폼 Native 자원(기능) 접근

- Native Module을 통해 Native 자원(기능) 접근

플러터(Flutter)

플러터는 구글에서 개발해 제공하고 있는 크로스플랫폼 개발 프레임웍으로 현재 가장 인기 있는 크로스 플랫폼 개발 프레임워크 중 하나이다.

개발언어는 Dart라는 언어를 사용한다.

Architectural layers

플랫폼 Native 자원(기능) 접근

- Plugin Package를 통해 Native 자원(기능) 접근

시간이되면 각각의 개발 프레임워크에 대해, 정리해 보기로 ...