시작하기
이 플러그인의 설치 단계와 전체 마크다운 가이드가 포함된 설정 프롬프트를 복사하세요.
Set up this Capacitor plugin in the project.
Use the package manager already used by the project.
Install these packages:
- `@capacitor-plus/core`
- `@capacitor-plus/cli`
- `@capacitor-plus/android` if the project targets Android
- `@capacitor-plus/ios` if the project targets iOS
Complete the required Capacitor initialization, platform, sync, native setup, and configuration work.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/capacitor-plus/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.
빠른 시작
“빠른 시작” 섹션bun add @capgo/capacitor-plusnpx cap sync자주 하는 실수
“흔한 실수” 섹션- 모든 @capacitor/* 의존성을 교체하세요.
- 마이그레이션 후 native 프로젝트를 재생성하세요.
- 버전을 올리기 전에 릴리스 노트를 확인하세요.
새 프로젝트 설치
“새 프로젝트 설치” 섹션AI 지원 설정으로 Capacitor+를 설치할 수 있습니다. 다음 명령어로 AI 도구에 Capgo 스킬을 추가하세요:
npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins그런 다음 아래 프롬프트를 사용하세요:
Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capacitor-plus/core`, `@capacitor-plus/cli`, `@capacitor-plus/android`, and `@capacitor-plus/ios` packages in my project.수동 설정을 원하면 다음 명령어를 실행해 패키지를 설치한 뒤, 아래 플랫폼별 지침을 따르세요:
-
코어 패키지 설치
터미널 창 npm install @capacitor-plus/core @capacitor-plus/cli -
플랫폼 패키지 추가
터미널 창 npm install @capacitor-plus/android # for Androidnpm install @capacitor-plus/ios # for iOS -
Capacitor 초기화
터미널 창 npx cap init터미널 창 pnpm cap init터미널 창 yarn cap init터미널 창 bunx cap init -
플랫폼 추가
터미널 창 npx cap add android터미널 창 pnpm cap add android터미널 창 yarn cap add android터미널 창 bunx cap add android터미널 창 npx cap add ios터미널 창 pnpm cap add ios터미널 창 yarn cap add ios터미널 창 bunx cap add ios
공식 Capacitor에서 마이그레이션하기
“공식 Capacitor에서 마이그레이션하기” 섹션기존 Capacitor 프로젝트를 사용 중이라면, Capacitor+로의 마이그레이션은 매우 간단합니다:
-
공식 패키지 제거
터미널 창 npm uninstall @capacitor/core @capacitor/cli @capacitor/android @capacitor/ios -
Capacitor+ 패키지 설치
터미널 창 npm install @capacitor-plus/core @capacitor-plus/clinpm install @capacitor-plus/android # if using Androidnpm install @capacitor-plus/ios # if using iOS -
프로젝트 동기화
터미널 창 npx cap sync터미널 창 pnpm cap sync터미널 창 yarn cap sync터미널 창 bunx cap sync
사용량
“Usage” 섹션API 호환성을 지원하는 Capacitor+ 덕분에, 기존 code를 수정 없이 그대로 사용할 수 있습니다:
import { Capacitor } from '@capacitor/core';import { registerPlugin } from '@capacitor/core';
// Check platformconst platform = Capacitor.getPlatform();console.log('Running on:', platform);
// Check if nativeif (Capacitor.isNativePlatform()) { console.log('Running on native platform');}
// Register a custom pluginconst MyPlugin = registerPlugin('MyPlugin');공식 Capacitor 플러그인 사용 시
“공식 Capacitor 플러그인 사용” 섹션모든 공식 Capacitor 플러그인은 완벽하게 작동합니다:
import { Camera, CameraResultType } from '@capacitor/camera';import { Geolocation } from '@capacitor/geolocation';import { Storage } from '@capacitor/preferences';
// Cameraconst photo = await Camera.getPhoto({ quality: 90, resultType: CameraResultType.Uri});
// Geolocationconst position = await Geolocation.getCurrentPosition();
// Storageawait Storage.set({ key: 'name', value: 'John' });Capgo 플러그인 사용
“Capgo 플러그인 사용” 섹션Capgo 플러그인은 Capacitor+와 완벽하게 호환됩니다:
import { CapacitorUpdater } from '@capgo/capacitor-updater';import { ScreenOrientation } from '@capgo/capacitor-screen-orientation';import { CapacitorFlash } from '@capgo/capacitor-flash';
// Live updatesawait CapacitorUpdater.notifyAppReady();
// Screen orientationawait ScreenOrientation.lock({ orientation: 'portrait' });
// Flashlightawait CapacitorFlash.toggle();동기화 방식
“동기화 방식” 섹션┌─────────────────────┐ ┌──────────────────┐ ┌──────────────────┐ ┌─────────────────┐│ ionic-team/ │ │ CI/CD │ │ Claude Code │ │ npm publish ││ capacitor │────▶│ Pipeline │────▶│ Security Review │────▶│ @capacitor-plus││ (upstream) │ │ (daily sync) │ │ (AI analysis) │ │ packages │└─────────────────────┘ └──────────────────┘ └──────────────────┘ └─────────────────┘- 일일 동기화: GitHub Actions가 다음에서 최신 변경 사항을 가져옵니다
ionic-team/capacitor - PR 생성: 변경 사항이 다음 브랜치로 pull request됩니다:
plusbranch - CI 검증: 전체 테스트 스위트 실행 (lint, unit tests, iOS build, Android build)
- 보안 리뷰: AI 기반 분석을 통해 취약점 및 breaking changes 확인
- 자동 머지: CI 통과 및 보안 리뷰 승인 시에만 실행
- 자동 배포: npm에 새 버전이 배포됩니다:
@capacitor-plus/*
보안 리뷰 상세 정보
“Security Review Details” 섹션모든 업스트림 동기화 시 다음 항목을 분석합니다:
| 체크 항목 | 탐지 내용 |
|---|---|
| 보안 | 커맨드 인젝션, XSS, path traversal, 하드코딩된 시크릿 |
| 주요 변경 사항 | 제거/이름 변경된 API, 시그니처 변경, 설정 변경 |
| 안정성 | 널 역참조, 처리되지 않은 예외, 레이스 컨디션, 메모리 누수 |
| 데이터 안전성 | 데이터 손실 시나리오, 개인정보 침해, 보안에 취약한 저장소 |
| Code 무결성 | 난독화된 code, 의심스러운 네트워크 호출, 백도어 |
PR 제출하기
“PR 제출하기” 섹션공식 Capacitor 레포지토리에서 PR이 멈춰 있나요? Capacitor+에서 바로 머지하세요:
-
Issue 생성 플러그인의 Capacitor+ 레포지토리 업스트림 PR 링크 연결
-
직접 제출하기 해당 브랜치로
plusPR을 보내주세요 -
팀에서 검토 및 CI를 실행하며, 통과 시 머지합니다.
이렇게 하면 업스트림 릴리스 주기를 기다리지 않고도 본인의 작업물을 즉시 활용할 수 있습니다.
자주 묻는 질문
“FAQ” 섹션실제 서비스에 사용해도 되나요?
“실제 서비스에 사용해도 되나요?” 섹션네. Capacitor+는 실제 서비스 중인 앱에서 사용되고 있습니다. 모든 릴리스는 공식 Capacitor와 동일한 테스트 스위트를 통과하며, 추가적인 보안 분석도 거칩니다.
기존 공식 플러그인도 계속 작동하나요?
“기존 공식 플러그인도 계속 작동하나요?” 섹션네, 모두 가능합니다. @capacitor/* 모든 플러그인은 Capacitor+와 즉시 호환됩니다.
업스트림에서 breaking change가 발생하면 어떻게 되나요?
“업스트림에서 breaking change가 발생하면 어떻게 되나요?” 섹션AI 보안 리뷰가 breaking change를 감지하여 수동 검토 대상으로 분류합니다. 변경 사항이 머지되기 전에 문서화된 내용을 확인할 수 있습니다.
이슈는 어떻게 보고하나요?
“이슈는 어떻게 보고하나요?” 섹션다음 저장소에 이슈를 등록해 주세요: Capacitor+ GitHub 리포지토리공식 Capacitor에도 영향을 미치는 이슈의 경우, 업스트림과의 조율을 도와드립니다.
기여할 수 있나요?
“기여할 수 있나요?” 섹션물론입니다! PR은 언제나 환영합니다. 직접 수정을 제출하시거나 특정 upstream PR의 머지를 요청하실 수 있습니다.
시작하기 다음 단계
“Getting Started에서 계속하기” 섹션사용 중이라면 시작하기 네이티브 플러그인 작업을 계획하려면, 이를 다음 항목과 연결하세요: Capacitor+ (@capacitor-plus) 패키지 사용하기 Capacitor+ (@capacitor-plus) 패키지 사용 시 네이티브 기능에 대해서는, Capgo 플러그인 디렉토리 Capgo Plugin Directory의 제품 워크플로우에 맞춰, Capgo의 Capacitor 플러그인 Capgo의 Capacitor 플러그인 구현 상세 내용에 대해서는, 플러그인 추가 또는 업데이트 플러그인 추가 또는 업데이트 구현 상세 내용에 대해서는, Ionic Enterprise 플러그인 대안 Ionic Enterprise 플러그인 대안의 제품 워크플로우에 대해서는.