In 모바일 애플리케이션 개발의 진화하는 세계에서, 프로그레시브 웹 애플리케이션 (PWA)의 부상은 새로운 크로스 플랫폼 런타임의 길을 열었습니다. 이 런타임은 네이티브 code에만 의존하지 않고 앱 스토어에 웹 기반 애플리케이션을 표시할 수 있도록 합니다. CapacitorJS은 개발자가 Android, iOS 및 웹에서 단일 자바스크립트 코드베이스를 사용하여 간단한 웹사이트를 애플리케이션으로 배포할 수 있도록 하는 기술입니다. 이 접근 방식은 개발 비용을 크게 줄이고 코드 작성 효율성을 크게 향상시킵니다.
이 가이드는 CapacitorJS를 사용하여 pure JavaScript로만 애플리케이션을 만들고 native 플러그인을 사용하는 방법에 대한 전반적인 튜토리얼을 제공합니다.
‣ 사전 요구 사항
애플리케이션을 만들기 전에 다음 도구가 설치되어 있어야 합니다.
- Node.js (v14.16.1) or higher
- NPM (v7.6.2) or higher
- Android Studio 안드로이드 앱 개발을 위해
- Xcode macOS 전용으로 iOS 앱 개발을 위해
주의: iOS 앱 개발은 macOS 기기에서만 가능합니다.
‣ Capacitor 프로젝트 설정
Capacitor 애플리케이션을 만들려면, 터미널에서 다음 명령어를 실행하세요:
npm init @capacitor/app설치 패키지와 프로젝트 설정을 위해 안내를 따라주세요. Capacitor v3에서는 프로젝트 디렉토리가 다음과 같이 보일 것입니다:
www/
css/
style.css
js/
capacitor-welcome.js
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md초기 설정이 완료되면, 다음 단계로 진행할 준비가 되었습니다.
‣ 프로젝트 구조 변경
우리는 JavaScript 파일을 번들링하기 위해 Vite를 사용하므로, 프로젝트 구조를 변경해 보겠습니다:
- 만들기 새 폴더
src메인 디렉토리 내. - 만들기 새 스크립트 파일
index.jsinsrc/. - 만들기 Vite 설정 파일
vite.config.js메인 디렉토리 내. - 삭제 파일
capacitor-welcome.js에서www/js/.
Your new folder structure should resemble:
src/
index.js
www/
css/
style.css
js/
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js‣ Pure JavaScript로 적응하기
Pure JavaScript를 사용하기 위해 파일을 수정해 보겠습니다:
www/index.html
- 만약 앱을 PWA로 출시하지 않는다면 Ionic PWA Elements 스크립트 임포트를 삭제하세요:
<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>-
body에서
<capacitor-welcome>HTML 요소를 삭제하세요. -
스크립트 임포트를
capacitor.js에서js/main.js로 업데이트 해 주세요. 이 파일은 우리의 번들된 JavaScript 파일입니다. -
만약 앱을 PWA로 출시하지 않는다면
js/capacitor-welcome.jsimport. __CAPGO_KEEP_0__index.html은(는) 이제 준비되었습니다.
vite.config.js
Node.js 모듈을 번들링하기 위해 Vite을 사용하려면, 번들링된 스크립트의 출력 위치를 지정하는 구성 파일이 필요합니다. 다음 구성은 파일 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
파일에서 capacitor.config.json 속성을 찾고 "bundledWebRuntime": true 으로 변경하세요. 이 조정은 __CAPGO_KEEP_0__이 파일을 번들링하지 않도록 하며, 대신 Vite를 사용하도록 합니다. false이 설정은 Capacitor이 번들링하지 않도록 하며, 대신 Vite를 사용하도록 합니다.
이러한 변경 사항을 통해 Capacitor 앱의 기본 설정이 완료되었으며, 자바스크립트로만 개발을 시작할 준비가 되었습니다.
‣ 앱 개발
지금까지의 기반을 마련한 후, 애플리케이션 로직을 작성할 수 있습니다. src/index.js 이 파일에서, 필요한 Node.js 모듈을 import할 수 있으며, 앱의 기능을 정의하고 Capacitor의 네이티브 플러그인을 사용할 수 있습니다.
변경 사항이 있을 때마다 자바스크립트 파일을 번들링하기 위해 Vite의 빌드 명령어를 실행하십시오.
vite build이 명령어는 __CAPGO_KEEP_0__ 디렉토리 내의 main.js 파일을 생성합니다. www/js 이 파일은 index.html 파일에 의해 참조됩니다.
‣ 테스트 및 디버깅
Capacitor은 다양한 플랫폼에서 애플리케이션을 테스트하는 편리한 방법을 제공합니다.
다음 명령어를 사용하여 각 플랫폼의 개발 환경에서 앱을 열 수 있습니다: Android:
npx cap add android
npx cap open androidiOS (macOS only) 용:
npx cap add ios
npx cap open ios웹 / PWA 용:
npx cap serve이 명령어들은 Android Studio, Xcode, 또는 웹 브라우저에서 애플리케이션을 실행할 수 있도록 해줍니다. 여기서 테스트 및 디버깅이 필요할 때까지 테스트 및 디버깅을 할 수 있습니다.
‣ 결론
CapacitorJS를 사용하여 순수 자바스크립트로 개발하는 크로스 플랫폼 애플리케이션은 단일 코드베이스로 여러 플랫폼에 앱을 만들기 위한 비용 효과적이고 효율적인 방법입니다. 이 가이드를 따라하면 프로젝트를 설정하고, Vite를 위한 구조를 재구성하고, 개발을 위해 앱을 준비할 수 있습니다. 이 기초 위에서 강력하고 다양한 애플리케이션을 만들기 위해 빌드하기 시작했습니다.
Capacitor의 네이티브 플러그인을 사용하여 앱의 기능성을 향상시키세요. 모든 플랫폼에서 철저히 테스트하고, Capacitor’s 네이티브 플러그인을 사용하여 앱의 기능성을 향상시키세요. Happy coding!
__CAPGO_KEEP_0__ Plugin Directory로 계속 진행하세요.
__CAPGO_KEEP_0__ Plugin Directory __CAPGO_KEEP_0__ Plugin Directory 이 가이드를 따라서 Capgo Plugin Directory Capgo Plugin Directory Capacitor 플러그인들에 의해 Capgo Capacitor 플러그인들에 의해 Capgo의 구현 세부 사항에 대해 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트의 구현 세부 사항에 대해 아이오닉 엔터프라이즈 플러그인 대체 아이오닉 엔터프라이즈 플러그인 대체의 제품 워크플로에 대해, 그리고 Capgo 네이티브 빌드 Capgo 네이티브 빌드의 제품 워크플로에 대해.
