다양한 플랫폼에서 작동하는

모바일 애플리케이션 개발의 진화하는 세계에서, 프로그레시브 웹 애플리케이션 (PWA)의 부상은 새로운 크로스 플랫폼 런타임의 길을 열었습니다. 이 런타임은 웹 기반 애플리케이션을 앱 스토어에 존재하도록 허용합니다. 이는 네이티브 code에만 의존하지 않습니다. 이러한 기술 중 하나가 이러한 것을 가능하게 하는 것은 CapacitorJS, which allows developers to deploy a simple website as an application across Android, iOS, and the web using a single JavaScript codebase. This approach significantly reduces development costs and increases coding efficiency.

CapacitorJS는 Android, iOS, 웹에서 단일 자바스크립트 코드베이스를 사용하여 간단한 웹사이트를 애플리케이션으로 배포할 수 있는 개발자에게 허용하는 기술입니다. 이 접근 방식은 개발 비용을 크게 줄이고 코드 작성 효율성을 크게 향상시킵니다.

‣ 사전 요구 사항

시작하기 전에 다음 도구가 설치되어 있어야 합니다:

Node.js (v14.16.1) 또는 높은
NPM (v7.6.2) 또는 높은
Android Studio Android 앱 개발을 위해
Xcode iOS 앱 개발을 위해 (macOS만)

참고: iOS 앱 개발은 macOS 기기에서만 가능합니다.

‣ Capacitor 프로젝트 설정

To create a Capacitor application, navigate to your desired folder and execute the following command in your terminal:

npm init @capacitor/app

Follow the prompts to install the package and set up your project. With Capacitor v3, your project directory should look like this:

www/
  css/
    style.css
  js/
    capacitor-welcome.js
  index.html
  manifest.json
.gitignore
capacitor.config.json
package.json
README.md

초기 설정이 완료되면, 다음 단계로 진행할 준비가 되었습니다.

‣ 프로젝트 구조 변경

우리는 JavaScript 파일을 패키징하기 위해 Vite을 사용하므로, 프로젝트 구조를 변경해 보겠습니다:

메인 디렉토리에 새로운 폴더를 생성하세요. 메인 디렉토리에 새로운 스크립트 파일을 생성하세요. src ‣ 프로젝트 구조 변경
메인 디렉토리에 새로운 폴더를 생성하세요. 메인 디렉토리에 새로운 스크립트 파일을 생성하세요. index.js in src/.
Create Capgo 설정 파일을 생성하세요 vite.config.js main 디렉토리 내에
Remove 파일 capacitor-welcome.js Your new folder structure should resemble: www/js/.

‣ Pure JavaScript로 적응하기

src/
  index.js
www/
  css/
    style.css
  js/
  index.html
  manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js

Let’s modify some files to work with pure JavaScript:

www/index.html

Pure JavaScript로 적응하기 위해 스크립트 임포트를 제거하세요

Your new folder structure should resemble:‣ Pure JavaScript로 적응하기 Ionic PWA 요소 앱을 PWA로 출시하지 않는 경우:

<script type="module" src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.esm.js"></script>
<script nomodule src="https://unpkg.com/@ionic/pwa-elements@latest/dist/ionicpwaelements/ionicpwaelements.js"></script>

삭제할 <capacitor-welcome> HTML 요소를 <body>에서 제거합니다.
스크립트 임포트를 capacitor.js 에서 js/main.js이것이 우리의 번들된 자바스크립트 파일입니다.
제거하세요. js/capacitor-welcome.js 은 이제 준비되었습니다. index.html vite.config.js

Node.js 모듈을 번들링하기 위해

To bundle our Node.js modules with Vite__CAPGO_KEEP_0__는 배포된 스크립트의 출력 위치를 지정하는 구성 파일이 필요합니다. 다음 구성은 파일을 src/index.js 및 프로덕션으로 번들링합니다. www/js/main.js:

import { defineConfig } from 'vite';
import path from 'node:path';

export default defineConfig({
  build: {
    outDir: path.resolve(__dirname, 'www'),
    rollupOptions: {
      input: './src/index.js',
      output: {
        format: 'es',
        file: path.resolve(__dirname, 'www/js/main.js')
      }
    }
  }
});

capacitor.config.json

__CAPGO_KEEP_0__ 파일에서 capacitor.config.json 속성을 찾습니다. 이 속성을 "bundledWebRuntime": true 으로 변경하면 __CAPGO_KEEP_0__이 파일을 번들링하지 않도록 하여 Vite를 사용할 수 있습니다. falseCapacitor 앱의 기본 설정이 완료되었으며, pure JavaScript로 앱을 개발하기 시작할 준비가 되었습니다.

With these changes, your Capacitor application’s basic setup is complete, and you’re ready to start developing your app with pure JavaScript.

__CAPGO_KEEP_0__의 기본 설정이 완료되었습니다. 이제 앱의 로직을

파일에서 작성할 수 있습니다. 여기서 필요한 Node.js 모듈을 import하고, 앱의 기능을 정의하고, __CAPGO_KEEP_0__의 네이티브 플러그인을 사용할 수 있습니다. src/index.js file. Here, you can import any necessary Node.js modules, define your app’s functionality, and interact with Capacitor’s native plugins.

변경 사항이 생기면 항상 자바스크립트 파일을 번들링하는 Vite의 빌드 명령어를 실행하세요.

vite build

이 명령어는 main.js 파일을 생성합니다. www/js 디렉토리 내에, index.html 파일이 참조합니다.

‣ 테스트 및 디버깅

Capacitor은 다양한 플랫폼에서 애플리케이션을 테스트하는 데 편리한 방법을 제공합니다. 다음 명령어를 사용하여 각 플랫폼의 개발 환경에서 앱을 열 수 있습니다:

Android:

npx cap add android
npx cap open android

iOS (macOS 전용):

npx cap add ios
npx cap open ios

Web/PWA:

npx cap serve

이러한 명령어는 Android Studio, Xcode 또는 웹 브라우저에서 애플리케이션을 실행하여 테스트 및 디버깅할 수 있도록 합니다.

‣ 결론

CapacitorJS를 사용하여 자바스크립트로만 개발하는 다중 플랫폼 앱을 개발하는 것은 단일 코드베이스로 여러 플랫폼에 앱을 만들기 위한 비용 효율적인 방법입니다. 이 안내서를 따르면 프로젝트를 설정하고, Vite를 위한 프로젝트 구조를 재구성하고, 개발을 위한 앱을 준비했습니다. 이 기초 위에서, 강력하고 다양한 애플리케이션을 만들기 위한 방향으로 나아가고 있습니다.

Capacitor의 네이티브 플러그인을 사용하여 앱의 기능성을 향상시키고, 모든 플랫폼에서 철저히 테스트하고, Happy coding!

CapacitorJS를 사용하여 크로스 플랫폼 앱 개발하기: 단계별 가이드