모바일 앱 개발 환경이 급변하면서, Progressive Web Applications(PWA)의 부상은 새로운 크로스 플랫폼 런타임의 길을 열었습니다. 이러한 런타임 덕분에 웹 기반 앱은 Native code에만 의존하지 않고도 앱 스토어에 출시될 수 있습니다. 이를 가능하게 하는 기술 중 하나가 바로 CapacitorJS이며, 개발자는 단일 JavaScript 코드베이스만으로 웹사이트를 Android, iOS 및 웹 전용 애플리케이션으로 배포할 수 있습니다. 이 방식은 개발 비용을 획기적으로 줄이고 코딩 효율성을 높여줍니다.
본 가이드에서는 별도의 프레임워크 없이 순수 JavaScript만을 사용하여 애플리케이션을 만드는 방법에 집중합니다. 2021년 기준으로 순수 JavaScript 앱 개발 리소스를 찾기 쉽지 않지만, CapacitorJS를 사용하여 앱을 구축하고 native plugin을 활용하는 포괄적인 튜토리얼을 제공해 드리고자 합니다.
‣ 사전 준비 사항
시작하기 전에 다음 도구들이 설치되어 있는지 확인하세요:
- Node.js (v14.16.1) 이상
- NPM (v7.6.2) 이상
- Android Studio Android 앱 개발용
- iOS 프로파일링 iOS 앱 개발용 (macOS 전용)
참고: 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.js에서src/. - 생성 Vite 설정 파일
vite.config.js메인 디렉토리에. - 제거 해당
capacitor-welcome.js파일에서www/js/.
새로운 폴더 구조는 다음과 같아야 합니다:
src/
index.js
www/
css/
style.css
js/
index.html
manifest.json
.gitignore
capacitor.config.json
package.json
README.md
vite.config.js‣ 순수 JavaScript로 전환하기
순수 JavaScript로 동작하도록 파일을 수정해 보겠습니다:
www/index.html
- 다음의 script import를 제거하세요: Ionic PWA Elements 앱을 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>body에서 HTML 요소를 제거합니다. -
스크립트 import 경로를 다음으로 업데이트하세요:
capacitor.js대상js/main.js. 이것이 번들링된 JavaScript 파일이 됩니다. -
다음 항목을 제거하세요:
js/capacitor-welcome.jsimport를 삭제합니다. 이제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 속성을 찾아 false로 변경하세요. 이렇게 하면 Capacitor가 파일을 번들링하지 않으므로, 대신 Vite를 사용하여 번들링할 수 있습니다.
이 설정을 마치면 Capacitor 애플리케이션의 기본 설정이 완료되며, 순수 JavaScript로 앱 개발을 시작할 준비가 됩니다.
‣ 앱 개발하기
이제 기초 작업이 끝났으므로, src/index.js 파일에 애플리케이션 로직을 작성할 수 있습니다. 여기서 필요한 Node.js 모듈을 import하고, 앱의 기능을 정의하며, Capacitor의 native plugin과 상호작용할 수 있습니다.
변경 사항이 생길 때마다 JavaScript 파일을 번들링하려면 Vite의 build 명령어를 실행해야 합니다:
vite build이 명령어를 실행하면 main.js 파일이 www/js 디렉토리에 생성되며, index.html 파일에서 이를 참조하게 됩니다.
‣ 테스트 및 디버깅
Capacitor를 사용하면 다양한 플랫폼에서 애플리케이션을 간편하게 테스트할 수 있습니다. 다음 명령어들을 사용하여 각 플랫폼의 개발 환경에서 앱을 실행하세요:
Android의 경우:
npx cap add android
npx cap open androidiOS (macOS 전용):
npx cap add ios
npx cap open iosWeb/PWA:
npx cap serve이 명령어들을 통해 Android Studio, Xcode 또는 웹 브라우저에서 애플리케이션을 실행하고, 필요에 따라 테스트와 디버깅을 진행할 수 있습니다.
‣ 마치며
순수 JavaScript를 사용하여 CapacitorJS로 크로스 플랫폼 애플리케이션을 개발하는 것은 단일 코드베이스로 여러 플랫폼용 앱을 만드는 비용 효율적이고 효율적인 방법입니다. 이 가이드를 통해 프로젝트를 설정하고, Vite에 맞춰 구조를 재편성하며, 개발 준비를 마쳤습니다. 이제 탄탄하고 다재다능한 애플리케이션을 구축할 준비가 되었습니다.
모든 플랫폼에서 철저히 테스트하는 것을 잊지 마세요. 또한 Capacitor의 native plugin을 활용하여 앱의 기능을 강화해 보세요. 즐거운 코딩 되시길 바랍니다!
Developing Cross-Platform Apps with CapacitorJS: A Step-by-Step Guide에서 계속 읽기
사용 중이라면 CapacitorJS로 크로스 플랫폼 앱 개발하기: 단계별 가이드 네이티브 플러그인 작업을 계획하려면, 이를 다음 항목과 연결하세요: Capgo 플러그인 디렉토리 Capgo Plugin Directory의 제품 워크플로우에 맞춰, Capgo의 Capacitor 플러그인 Capgo의 Capacitor 플러그인 구현 상세 내용에 대해서는, 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트의 구현 세부 사항은, Ionic Enterprise 플러그인 대안 Ionic Enterprise 플러그인 대안의 제품 워크플로우와, Capgo Native Build Capgo Native Builds의 제품 워크플로우를 위해.
