안녕하세요, 저는 Michael (WcaleNieWolny)입니다 👋,
\n한 달간의 힘들고 (약간 고통스러운 🙃) 작업 끝에, Capacitor Social Login의 첫 릴리스를 발표하게 되어 기쁩니다. 이 플러그인은 iOS와 Android에서 Google과 Apple 로그인을 모두 처리하는 것을 돕기 위해 설계되었습니다. 또한, Martin과 함께 다음과 같은 독특한 기능들을 개발해왔습니다:
\n먼저, Android에서 ‘Apple 로그인’의 주요 혁신에 대해 이야기해보겠습니다. Apple SDK가 이 기능을 제공하지 않기 때문에 간단하지 않았습니다. 이 문서를 참고했지만, 더 안전하게 만들기 위해 약간 수정했습니다. 최종적으로 구현된 흐름은 다음과 같습니다:
\n안타깝게도 백엔드와 앱 코드의 일부 수정이 필요하지만, 현재로서는 최선의 방법입니다.
\n다음으로, Android에서 Google 로그인을 구현하고자 했습니다. CodetrixStudio의 CapacitorGoogleAuth가 곧 지원 중단될 GMS 라이브러리를 사용한다는 것을 알게 되었습니다. 이 GMS 라이브러리가 레거시로 간주되어, CredentialManager를 사용하기로 결정했습니다. 이를 통해 로그인 흐름을 단순화하고 성가신 오류 10을 제거할 수 있었습니다 🎉
\n마지막으로, 훌륭한 ✨ 문서를 작성했습니다. 문서의 정확성과 포괄성을 보장하기 위해 많은 시간을 투자했습니다.\n문서에는 Apple과 Google 설정에 대한 상세한 가이드가 포함되어 있습니다. 또한 Apple 로그인을 위한 예제 백엔드도 제공했습니다 🍎
\n\n결론적으로, Capacitor Social Login 플러그인은 많은 새롭고 흥미로운 기능을 도입했으며, 앞으로도 더 많은 기능이 추가될 예정입니다 🚀
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"소개"],"text":[0,"소개"]}],[0,{"depth":[0,2],"slug":[0,"android에서-apple-로그인"],"text":[0,"Android에서 Apple 로그인"]}],[0,{"depth":[0,2],"slug":[0,"android에서-개선된-google-로그인"],"text":[0,"Android에서 개선된 Google 로그인"]}],[0,{"depth":[0,2],"slug":[0,"문서"],"text":[0,"문서"]}],[0,{"depth":[0,2],"slug":[0,"결론"],"text":[0,"결론"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"release-of-a-brand-new-capacitor-social-login"],"title":[0,"CapacitorのSNSログインプラグインの新リリース"],"description":[0,"Capacitor Social Login 플러그인은 iOS, Android 및 웹에서 Google, Facebook 및 Apple로 로그인할 수 있게 해주는 플러그인입니다."],"author":[0,"WcaleNieWolny"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/50914789?v=4"],"author_url":[0,"https://github.com/WcaleNieWolny/WcaleNieWolny"],"created_at":[3,"2024-10-08T00:00:00.000Z"],"updated_at":[3,"2024-10-08T00:00:00.000Z"],"head_image":[0,"/social_login_plugin_blog.webp"],"head_image_alt":[0,"Capgo의 시스템 구성도"],"keywords":[0,"Oauth, social login, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Capacitor"],"published":[0,true],"next_blog":[0,""],"locale":[0,"ko"]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/automatic-capacitor-ios-build-github-action.md"],"data":[0,{"slug":[0,"automatic-capacitor-ios-build-github-action"],"title":[0,"GitHub actions를 사용한 자동 Capacitor iOS 빌드 및 인증서 설정"],"description":[0,"iOS fastlane와 GitHub Actions를 사용하여 5분 만에 Ionic 앱 CI/CD 파이프라인 구성하기 (2024)"],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[0,"2024-08-04T00:00:00.000Z"],"updated_at":[0,"2025-01-21T00:00:00.000Z"],"head_image":[0,"/fastlane_ios.webp"],"head_image_alt":[0,"GitHub 액션 Testflight Fastlane 설명"],"keywords":[0,"Fastlane, CI/CD, iOS, automatic build, automatic release, mobile app updates"],"tag":[0,"CI/CD"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,"automatic-capacitor-android-build-github-action"]}],"body":[0,"# GitHub Actions를 이용한 iOS 자동 빌드 인증서 설정\n\nCapacitor 앱의 CI/CD 설정은 복잡하고 시간이 많이 소요될 수 있습니다. 알아야 할 내용은 다음과 같습니다:\n\n## 사전 요구사항\n\n시작하기 전에 다음이 필요합니다:\n\n- 관리자 권한이 있는 GitHub 계정\n- iOS 개발자 프로그램 멤버십 \n- 적절한 권한이 있는 App Store Connect API 접근\n- GitHub Actions 워크플로우 이해\n- Fastlane 설정 지식\n- 파이프라인 유지보수 및 디버깅 시간\n- 적절한 인증서와 프로비저닝 프로파일\n\n## Capgo의 전문 CI/CD 설정\n\n복잡성을 건너뛰고 [Capgo](https://capgoapp/ci-cd/)가 선호하는 플랫폼에서 직접 CI/CD 파이프라인을 구성합니다:\n\n- **플랫폼 독립성**: GitHub Actions, GitLab CI 등에서 작동\n- **원활한 통합**: 플랫폼 전환이 필요 없으며 현재 프로세스와 함께 작동\n- **맞춤형 구성**: 프로젝트 요구사항에 맞는 맞춤 설정\n- **전문가 가이드**: 이미 50개 이상의 앱에 대해 CI/CD를 설정했습니다\n\n### 가격\n- 일회성 설정 비용: $2,600\n- 운영 비용: ~$300/년\n- 다른 독점 솔루션과 비교: $6,000/년\n- **5년 동안 $26,100 절약**\n\n[지금 CI/CD 설정하기](https://calcom/martindonadieu/mobile-ci-cd-done-for-you/)\n\n## 수동 설정 가이드\n\n직접 모든 것을 설정하고 싶다면, 다음과 같이 해야 합니다:\n\n## Fastlane과 GitHub Actions 및 인증서를 사용한 iOS 지속적 배포\n\n## 사전 요구사항\n\n튜토리얼을 계속하기 전에:\n\n- 개발 머신에 Fastlane이 [설치](https://docsfastlanetools/)되어 있는지 확인하세요\n- iOS 개발자 프로그램 멤버십에 속해 있는지 확인하세요\n\n## 가격에 대한 중요 정보\n\n\n\n[https://githubcom/features/actions](https://githubcom/features/actions/)\n\n이 서비스는 선택한 머신에 따라 제한까지 '무료'입니다 \n우리는 **_macOS_** 머신을 사용할 것이며, 스크린샷에서 가격과 제한을 볼 수 있습니다 (튜토리얼 작성 시점의 가격이며, 향후 변경될 수 있습니다)\n\n**요구사항과 가격에 대해 안내했으니, 계속 진행하겠습니다**\n\n> **참고: 이 포스트에서는 App Store Connect에 앱이 생성되어 있다고 가정합니다. 중요한 정보는 Fastlane이 복사할 것입니다!**\n\n## 이 튜토리얼에서 배울 내용\n\n**포스트에서 따라야 할 단계**\n\n1. _Fastlane과 함께 App Store Connect API 사용하기_\n - _요구사항:_\n - _App Store Connect API 키 생성_\n - _App Store Connect API 키 사용_\n2. _Fastlane 파일 복사_\n3. _GitHub Actions 구성_\n\n## 1. Fastlane과 함께 App Store Connect API 사용하기\n\n> 2021년 2월부터 App Store Connect에 로그인하려면 2단계 인증 또는 2단계 확인이 필요합니다. Apple ID에 대한 이 추가 보안 계층은 계정에 접근할 수 있는 유일한 사람이 귀하임을 보장합니다. \n> [Apple Support](https://developerapplecom/support/authentication/) 참조\n\n### 요구사항\n\nFastlane이 App Store Connect API를 사용하여 앱을 업로드하려면 다음 **세 가지**가 필요합니다:\n\n1. 발급자 ID\n2. 키 ID\n3. 키 파일 또는 키 내용\n\n### App Store Connect API 키 획득하기\n\n키를 생성하려면 App Store Connect에서 관리자 권한이 있어야 합니다. 해당 권한이 없다면 관련 담당자에게 이 문서를 안내할 수 있습니다.\n\n1. [App Store Connect](https://appstoreconnectapplecom/)에 로그인\n\n2. [사용자 및 액세스](https://appstoreconnectapplecom/access/users/) 선택\n\n\n\n3. 통합 탭 선택\n\n\n\n4. API 키 생성 또는 추가(+) 버튼 클릭\n\n\n\n5. 키의 이름을 입력합니다. 이름은 참조용이며 키 자체의 일부가 아닙니다\n\n\n\n6. 액세스에서 키의 역할 선택귀하의 팀의 사용자에게 적용되는 역할과 동일한 역할이 키에 적용됩니다. [역할 권한](https://helpapplecom/app-store-connect/#/deve5f9a89d7/)을 참조하세요. **App manager**를 선택하는 것을 권장합니다.\n\n7. Generate를 클릭하세요.\n\n> **API 키의 접근은 특정 앱으로 제한할 수 없습니다**\n\n새 키의 이름, 키 ID, 다운로드 링크 및 기타 정보가 페이지에 나타납니다.\n\n\n\n여기서 필요한 세 가지 정보를 모두 얻을 수 있습니다:\n- Issue ID (`APPLE_ISSUER_ID` 시크릿)\n- Key ID (`APPLE_KEY_ID` 시크릿)\n- \"Download API Key\"를 클릭하여 API 프라이빗 키를 다운로드하세요. 다운로드 링크는 프라이빗 키가 아직 다운로드되지 않은 경우에만 나타납니다. Apple은 프라이빗 키의 복사본을 보관하지 않습니다. 따라서 한 번만 다운로드할 수 있습니다.\n\n> _🔴_ 프라이빗 키를 안전한 곳에 보관하세요. 키를 공유하거나, 코드 저장소에 저장하거나, 클라이언트 측 코드에 포함해서는 안 됩니다.\n\n### App Store Connect API 키 사용하기\n\nJWT 토큰 인증을 생성하기 위해서는 API 키 파일(다운로드한 p8 파일), 키 ID, 발급자 ID가 필요합니다. 이 정보를 Fastlane에 전달하는 방법은 여러 가지가 있습니다. 저는 Fastlane의 새로운 액션인 `app_store_connect_api_key`를 사용하기로 했습니다. 다른 방법은 [Fastlane 문서](https://docsfastlanetools/actions/app_store_connect_api_key/)에서 확인할 수 있습니다. 이 방법을 보여드리는 이유는 대부분의 CI에서 환경 변수를 설정할 수 있어 가장 쉬운 방법이라고 생각하기 때문입니다.\n\n다운로드한 p8 파일을 Base64로 변환하여 시크릿(`APPLE_KEY_CONTENT`)으로 저장해 주세요.\n\n```shell\nbase64 -i APPLE_KEY_CONTENT.p8 | pbcopy\n```\n\n_이제 API 키를 사용하여 Fastlane으로 App Store Connect를 관리할 수 있습니다. 좋습니다!_\n\n## 2. 인증서\n\nXCode를 열고 **설정** > **계정** > **Apple ID** > **팀**으로 이동하여 귀하의 팀을 선택하세요.\n\n\n\n**인증서 관리**를 클릭하세요.\n\n아직 인증서를 생성하지 않았다면, 새 인증서를 생성할 수 있습니다.\n\n**+**를 클릭하고 **Apple Distribution**을 선택하세요.\n\n\n\n그런 다음 키체인에서 인증서를 `p12` 파일로 다운로드해야 합니다.\n\n이를 위해 키체인으로 이동하여 **로그인** 키체인으로 전환한 다음 **내 인증서** 탭으로 이동해야 합니다.\n\n\n\n그런 다음 다운로드하려는 인증서를 선택할 수 있습니다(인증서의 날짜를 확인하세요).\n\n그리고 인증서의 개인 키를 마우스 오른쪽 버튼으로 클릭하고 **내보내기**를 선택하세요.\n\n파일 형식으로 **개인 정보 교환(.p12)**을 선택하세요.\n\n그러면 인증서가 `p12` 파일로 다운로드됩니다.\n\n터미널에서 파일을 열고 다음 명령을 사용하여 Base64로 변환하세요:\n\n```shell\nbase64 -i BUILD_CERTIFICATE.p12 | pbcopy\n```\n\n이것이 `BUILD_CERTIFICATE_BASE64` 시크릿이 됩니다. 또한 요청 시 인증서의 비밀번호를 제공해 주세요. 이 비밀번호가 `P12_PASSWORD` 시크릿이 됩니다.\n\n## 3. 프로비저닝 프로필\n\n[Apple Developer](https://developerapplecom/account/resources/profiles/list)를 열고 올바른 팀을 선택하세요.\n\n그런 다음 **+**를 클릭하여 새 프로필을 생성하세요.\n\n\n\n그리고 **App Store Connect**를 선택하세요.\n\n\n\n그런 다음 올바른 앱을 선택해야 합니다. 서명이 실패할 수 있으므로 와일드카드를 사용할 수 없으니 주의하세요.\n\n\n\n이전에 생성한 올바른 인증서를 선택하고(만료 날짜를 확인하세요. 오늘과 같은 날짜여야 합니다) **계속**을 클릭하세요.\n\n\n\n마지막으로 프로필의 이름을 입력하고 **생성**을 클릭하세요.\n\n> 이 이름은 Fastlane에서 `APPLE_PROFILE_NAME` 값으로 프로필을 식별하는 데 사용됩니다.\n\n\n\n프로필을 `mobileprovision` 파일로 다운로드할 수 있습니다.\n\n\n\nBase64로 프로파일을 변환하여 시크릿(`BUILD_PROVISION_PROFILE_BASE64`)으로 저장하세요\n\n```shell\nbase64 -i BUILD_PROVISION_PROFILE.mobileprovision | pbcopy\n```\n\n## 4. Fastlane 파일 복사\n\nFastlane은 일반적인 모바일 개발 작업을 자동화하기 위해 만들어진 Ruby 라이브러리입니다. Fastlane을 사용하면 일반적으로 Android Studio에서 수행하는 작업을 수행하는 \"actions\"를 번들로 묶는 사용자 정의 \"lanes\"를 구성할 수 있습니다. Fastlane으로 많은 것을 할 수 있지만, 이 튜토리얼에서는 핵심 작업 중 일부만 사용할 것입니다.\n\n프로젝트 루트에 Fastlane 폴더를 만들고 다음 파일을 복사하세요:\n`Fastfile`\n```ruby\nplatform :ios do\n desc 'Export ipa and submit to TestFlight'\n lane :beta do\n keychain_info = { keychain_name: \"ios-build-#{Time.now.to_i}.keychain\", keychain_password: SecureRandom.uuid }\n \n begin\n setup_signing(keychain_info)\n bump_build_number\n build_app_with_signing(keychain_info)\n submit_to_testflight\n ensure\n cleanup_keychain(keychain_info)\n end\n end\n\n private_lane :setup_signing do |options|\n create_keychain(\n name: options[:keychain_name],\n password: options[:keychain_password],\n unlock: true,\n timeout: 0,\n lock_when_sleeps: false, \n add_to_search_list: true\n )\n import_cert(options)\n install_profile\n update_project_settings\n end\n\n lane :bump_build_number do\n\t\tfile = File.read('../package.json')\n\t\tdata_hash = JSON.parse(file)\n\t\tapi_key = app_store_connect_api_key(\n key_id: ENV['APPLE_KEY_ID'],\n issuer_id: ENV['APPLE_ISSUER_ID'],\n key_content: Base64.decode64(ENV['APPLE_KEY_CONTENT']),\n duration: 1200,\n in_house: false\n )\n\t\tbuild_num = app_store_build_number(\n api_key: api_key,\n\t\t\tapp_identifier: ENV['BUNDLE_IDENTIFIER'],\n\t\t\tlive: false\n )\n\t\tbuild_num = build_num + 1\n\t\tUI.message(\"Bumped build number to #{build_num}\")\n\t\tincrement_build_number(\n\t\t\tbuild_number: build_num,\n\t\t\txcodeproj: \"./ios/App/App.xcodeproj\",\n\t\t\tskip_info_plist: true\n\t\t)\n\tend\n\n private_lane :import_cert do |options|\n cert_path = \"#{Dir.tmpdir}/build_certificate.p12\"\n File.write(cert_path, Base64.decode64(ENV['BUILD_CERTIFICATE_BASE64']))\n import_certificate(\n certificate_path: cert_path,\n certificate_password: ENV['P12_PASSWORD'] || \"\",\n keychain_name: options[:keychain_name],\n keychain_password: options[:keychain_password],\n log_output: true\n )\n File.delete(cert_path)\n end \n \n private_lane :cleanup_keychain do |options|\n delete_keychain(\n name: options[:keychain_name]\n )\n end \n\n private_lane :install_profile do\n profile_path = \"#{Dir.tmpdir}/build_pp.mobileprovision\"\n File.write(profile_path, Base64.decode64(ENV['BUILD_PROVISION_PROFILE_BASE64']))\n UI.user_error!(\"Failed to create provisioning profile at #{profile_path}\") unless File.exist?(profile_path)\n ENV['PROVISIONING_PROFILE_PATH'] = profile_path\n install_provisioning_profile(path: profile_path)\n File.delete(profile_path)\n end\n\n private_lane :update_project_settings do\n update_code_signing_settings(\n use_automatic_signing: false,\n path: \"./ios/App/App.xcodeproj\",\n code_sign_identity: \"iPhone Distribution\",\n profile_name: ENV['APPLE_PROFILE_NAME'],\n bundle_identifier: ENV['BUNDLE_IDENTIFIER'],\n team_id: ENV['APP_STORE_CONNECT_TEAM_ID']\n )\n update_project_team(\n path: \"./ios/App/App.xcodeproj\",\n teamid: ENV['APP_STORE_CONNECT_TEAM_ID']\n )\n end\n\n private_lane :build_app_with_signing do |options|\n unlock_keychain(\n path: options[:keychain_name],\n password: options[:keychain_password],\n set_default: false\n )\n build_app(\n workspace: \"./ios/App/App.xcworkspace\",\n scheme: \"App\",\n configuration: \"Release\",\n export_method: \"app-store\",\n output_name: \"App.ipa\",\n export_options: {\n provisioningProfiles: {\n ENV['BUNDLE_IDENTIFIER'] => ENV['APPLE_PROFILE_NAME']\n }\n },\n xcargs: \"-verbose\",\n buildlog_path: \"./build_logs\",\n export_xcargs: \"-allowProvisioningUpdates\",\n )\n end \n\n private_lane :submit_to_testflight do\n api_key = app_store_connect_api_key(\n key_id: ENV['APPLE_KEY_ID'],\n issuer_id: ENV['APPLE_ISSUER_ID'],\n key_content: Base64.decode64(ENV['APPLE_KEY_CONTENT']),\n duration: 1200,\n in_house: false\n )\n pilot(\n api_key: api_key,\n skip_waiting_for_build_processing: true,\n skip_submission: true,\n distribute_external: false,\n notify_external_testers: false,\n ipa: \"./App.ipa\"\n )\n end\nend\n```\n\n## 5. 시크릿 설정\n로컬에서 fastlane은 시크릿에 `env` 파일을 사용합니다.\n다음은 `env` 파일의 예시입니다:\n\n```shell\nAPP_STORE_CONNECT_TEAM_ID=UVTJ336J2D\nBUNDLE_IDENTIFIER=ee.forgr.testfastlane\n# See previous section for these secrets\nBUILD_CERTIFICATE_BASE64=\nBUILD_PROVISION_PROFILE_BASE64=\nAPPLE_KEY_ID=\nAPPLE_ISSUER_ID=\nAPPLE_KEY_CONTENT=\nP12_PASSWORD=\nAPPLE_PROFILE_NAME=\n```\n\n### APP_STORE_CONNECT_TEAM_ID 얻기\n[Developer Center](https://developer.apple.com/account)로 이동하여 `Membership details` 섹션으로 스크롤하세요.\n`Team ID`가 `APP_STORE_CONNECT_TEAM_ID` 시크릿에 설정해야 하는 값입니다.\n\n<1>\n <2>\n<3>\n\n### BUNDLE_IDENTIFIER 얻기\n\n1. Xcode 열기\n2. 프로젝트 네비게이터에서 `App`을 더블 클릭\nCapacitor 앱의 CI/CD 설정은 복잡하고 시간이 많이 소요될 수 있습니다. 알아야 할 내용은 다음과 같습니다:
\n시작하기 전에 다음이 필요합니다:
\n복잡성을 건너뛰고 Capgo가 선호하는 플랫폼에서 직접 CI/CD 파이프라인을 구성합니다:
\n직접 모든 것을 설정하고 싶다면, 다음과 같이 해야 합니다:
\n튜토리얼을 계속하기 전에:
\nhttps://githubcom/features/actions
\n이 서비스는 선택한 머신에 따라 제한까지 ‘무료’입니다
\n우리는 macOS 머신을 사용할 것이며, 스크린샷에서 가격과 제한을 볼 수 있습니다 (튜토리얼 작성 시점의 가격이며, 향후 변경될 수 있습니다)
요구사항과 가격에 대해 안내했으니, 계속 진행하겠습니다
\n\n\n참고: 이 포스트에서는 App Store Connect에 앱이 생성되어 있다고 가정합니다. 중요한 정보는 Fastlane이 복사할 것입니다!
\n
포스트에서 따라야 할 단계
\n\n\n2021년 2월부터 App Store Connect에 로그인하려면 2단계 인증 또는 2단계 확인이 필요합니다. Apple ID에 대한 이 추가 보안 계층은 계정에 접근할 수 있는 유일한 사람이 귀하임을 보장합니다.
\n
\nApple Support 참조
Fastlane이 App Store Connect API를 사용하여 앱을 업로드하려면 다음 세 가지가 필요합니다:
\n키를 생성하려면 App Store Connect에서 관리자 권한이 있어야 합니다. 해당 권한이 없다면 관련 담당자에게 이 문서를 안내할 수 있습니다.
\nApp Store Connect에 로그인
\n사용자 및 액세스 선택
\n액세스에서 키의 역할 선택귀하의 팀의 사용자에게 적용되는 역할과 동일한 역할이 키에 적용됩니다. 역할 권한을 참조하세요. App manager를 선택하는 것을 권장합니다.
\nGenerate를 클릭하세요.
\n\n\nAPI 키의 접근은 특정 앱으로 제한할 수 없습니다
\n
새 키의 이름, 키 ID, 다운로드 링크 및 기타 정보가 페이지에 나타납니다.
\n여기서 필요한 세 가지 정보를 모두 얻을 수 있습니다:
\nAPPLE_ISSUER_ID
시크릿)APPLE_KEY_ID
시크릿)\n\n🔴 프라이빗 키를 안전한 곳에 보관하세요. 키를 공유하거나, 코드 저장소에 저장하거나, 클라이언트 측 코드에 포함해서는 안 됩니다.
\n
JWT 토큰 인증을 생성하기 위해서는 API 키 파일(다운로드한 p8 파일), 키 ID, 발급자 ID가 필요합니다. 이 정보를 Fastlane에 전달하는 방법은 여러 가지가 있습니다. 저는 Fastlane의 새로운 액션인 app_store_connect_api_key
를 사용하기로 했습니다. 다른 방법은 Fastlane 문서에서 확인할 수 있습니다. 이 방법을 보여드리는 이유는 대부분의 CI에서 환경 변수를 설정할 수 있어 가장 쉬운 방법이라고 생각하기 때문입니다.
다운로드한 p8 파일을 Base64로 변환하여 시크릿(APPLE_KEY_CONTENT
)으로 저장해 주세요.
base64 -i APPLE_KEY_CONTENT.p8 | pbcopy
이제 API 키를 사용하여 Fastlane으로 App Store Connect를 관리할 수 있습니다. 좋습니다!
\nXCode를 열고 설정 > 계정 > Apple ID > 팀으로 이동하여 귀하의 팀을 선택하세요.
\n인증서 관리를 클릭하세요.
\n아직 인증서를 생성하지 않았다면, 새 인증서를 생성할 수 있습니다.
\n**+**를 클릭하고 Apple Distribution을 선택하세요.
\n그런 다음 키체인에서 인증서를 p12
파일로 다운로드해야 합니다.
이를 위해 키체인으로 이동하여 로그인 키체인으로 전환한 다음 내 인증서 탭으로 이동해야 합니다.
\n그런 다음 다운로드하려는 인증서를 선택할 수 있습니다(인증서의 날짜를 확인하세요).
\n그리고 인증서의 개인 키를 마우스 오른쪽 버튼으로 클릭하고 내보내기를 선택하세요.
\n파일 형식으로 **개인 정보 교환(.p12)**을 선택하세요.
\n그러면 인증서가 p12
파일로 다운로드됩니다.
터미널에서 파일을 열고 다음 명령을 사용하여 Base64로 변환하세요:
\nbase64 -i BUILD_CERTIFICATE.p12 | pbcopy
이것이 BUILD_CERTIFICATE_BASE64
시크릿이 됩니다. 또한 요청 시 인증서의 비밀번호를 제공해 주세요. 이 비밀번호가 P12_PASSWORD
시크릿이 됩니다.
Apple Developer를 열고 올바른 팀을 선택하세요.
\n그런 다음 **+**를 클릭하여 새 프로필을 생성하세요.
\n그리고 App Store Connect를 선택하세요.
\n그런 다음 올바른 앱을 선택해야 합니다. 서명이 실패할 수 있으므로 와일드카드를 사용할 수 없으니 주의하세요.
\n이전에 생성한 올바른 인증서를 선택하고(만료 날짜를 확인하세요. 오늘과 같은 날짜여야 합니다) 계속을 클릭하세요.
\n마지막으로 프로필의 이름을 입력하고 생성을 클릭하세요.
\n\n\n이 이름은 Fastlane에서
\nAPPLE_PROFILE_NAME
값으로 프로필을 식별하는 데 사용됩니다.
프로필을 mobileprovision
파일로 다운로드할 수 있습니다.
Base64로 프로파일을 변환하여 시크릿(BUILD_PROVISION_PROFILE_BASE64
)으로 저장하세요
base64 -i BUILD_PROVISION_PROFILE.mobileprovision | pbcopy
Fastlane은 일반적인 모바일 개발 작업을 자동화하기 위해 만들어진 Ruby 라이브러리입니다. Fastlane을 사용하면 일반적으로 Android Studio에서 수행하는 작업을 수행하는 “actions”를 번들로 묶는 사용자 정의 “lanes”를 구성할 수 있습니다. Fastlane으로 많은 것을 할 수 있지만, 이 튜토리얼에서는 핵심 작업 중 일부만 사용할 것입니다.
\n프로젝트 루트에 Fastlane 폴더를 만들고 다음 파일을 복사하세요:\nFastfile
platform :ios do desc 'Export ipa and submit to TestFlight' lane :beta do keychain_info = { keychain_name: \"ios-build-#{Time.now.to_i}.keychain\", keychain_password: SecureRandom.uuid }\n begin setup_signing(keychain_info) bump_build_number build_app_with_signing(keychain_info) submit_to_testflight ensure cleanup_keychain(keychain_info) end end\n private_lane :setup_signing do |options| create_keychain( name: options[:keychain_name], password: options[:keychain_password], unlock: true, timeout: 0, lock_when_sleeps: false, add_to_search_list: true ) import_cert(options) install_profile update_project_settings end\n lane :bump_build_number do file = File.read('../package.json') data_hash = JSON.parse(file) api_key = app_store_connect_api_key( key_id: ENV['APPLE_KEY_ID'], issuer_id: ENV['APPLE_ISSUER_ID'], key_content: Base64.decode64(ENV['APPLE_KEY_CONTENT']), duration: 1200, in_house: false ) build_num = app_store_build_number( api_key: api_key, app_identifier: ENV['BUNDLE_IDENTIFIER'], live: false ) build_num = build_num + 1 UI.message(\"Bumped build number to #{build_num}\") increment_build_number( build_number: build_num, xcodeproj: \"./ios/App/App.xcodeproj\", skip_info_plist: true ) end\n private_lane :import_cert do |options| cert_path = \"#{Dir.tmpdir}/build_certificate.p12\" File.write(cert_path, Base64.decode64(ENV['BUILD_CERTIFICATE_BASE64'])) import_certificate( certificate_path: cert_path, certificate_password: ENV['P12_PASSWORD'] || \"\", keychain_name: options[:keychain_name], keychain_password: options[:keychain_password], log_output: true ) File.delete(cert_path) end\n private_lane :cleanup_keychain do |options| delete_keychain( name: options[:keychain_name] ) end\n private_lane :install_profile do profile_path = \"#{Dir.tmpdir}/build_pp.mobileprovision\" File.write(profile_path, Base64.decode64(ENV['BUILD_PROVISION_PROFILE_BASE64'])) UI.user_error!(\"Failed to create provisioning profile at #{profile_path}\") unless File.exist?(profile_path) ENV['PROVISIONING_PROFILE_PATH'] = profile_path install_provisioning_profile(path: profile_path) File.delete(profile_path) end\n private_lane :update_project_settings do update_code_signing_settings( use_automatic_signing: false, path: \"./ios/App/App.xcodeproj\", code_sign_identity: \"iPhone Distribution\", profile_name: ENV['APPLE_PROFILE_NAME'], bundle_identifier: ENV['BUNDLE_IDENTIFIER'], team_id: ENV['APP_STORE_CONNECT_TEAM_ID'] ) update_project_team( path: \"./ios/App/App.xcodeproj\", teamid: ENV['APP_STORE_CONNECT_TEAM_ID'] ) end\n private_lane :build_app_with_signing do |options| unlock_keychain( path: options[:keychain_name], password: options[:keychain_password], set_default: false ) build_app( workspace: \"./ios/App/App.xcworkspace\", scheme: \"App\", configuration: \"Release\", export_method: \"app-store\", output_name: \"App.ipa\", export_options: { provisioningProfiles: { ENV['BUNDLE_IDENTIFIER'] => ENV['APPLE_PROFILE_NAME'] } }, xcargs: \"-verbose\", buildlog_path: \"./build_logs\", export_xcargs: \"-allowProvisioningUpdates\", ) end\n private_lane :submit_to_testflight do api_key = app_store_connect_api_key( key_id: ENV['APPLE_KEY_ID'], issuer_id: ENV['APPLE_ISSUER_ID'], key_content: Base64.decode64(ENV['APPLE_KEY_CONTENT']), duration: 1200, in_house: false ) pilot( api_key: api_key, skip_waiting_for_build_processing: true, skip_submission: true, distribute_external: false, notify_external_testers: false, ipa: \"./App.ipa\" ) endend
로컬에서 fastlane은 시크릿에 env
파일을 사용합니다.\n다음은 env
파일의 예시입니다:
APP_STORE_CONNECT_TEAM_ID=UVTJ336J2DBUNDLE_IDENTIFIER=ee.forgr.testfastlane# See previous section for these secretsBUILD_CERTIFICATE_BASE64=BUILD_PROVISION_PROFILE_BASE64=APPLE_KEY_ID=APPLE_ISSUER_ID=APPLE_KEY_CONTENT=P12_PASSWORD=APPLE_PROFILE_NAME=
Developer Center로 이동하여 Membership details
섹션으로 스크롤하세요.\nTeam ID
가 APP_STORE_CONNECT_TEAM_ID
시크릿에 설정해야 하는 값입니다.
<1>\n<2>\n<3>
\nApp
을 더블 클릭GitHub Actions에서는 CI/CD 워크플로우 실행에 사용한 시간을 기준으로 요금이 청구됩니다. 제 경험상 App Store Connect에서 빌드가 처리되기까지 약 10-15분이 소요됩니다.
\n비공개 프로젝트의 경우, 빌드당 예상 비용은 프로젝트의 구성과 종속성에 따라 $0.08/분 x 15분 = $1.2 또는 그 이상이 될 수 있습니다.
\n비공개 프로젝트에서 비용이 우려된다면 skip_waiting_for_build_processing
를 true
로 설정할 수 있습니다. 이는 App Store Connect가 빌드 처리를 완료할 때까지 기다리지 않음으로써 빌드 시간을 절약합니다.
하지만 이는 트레이드오프가 있습니다 - 사용자에게 빌드를 배포하기 전에 App Store Connect에서 앱의 컴플라이언스 정보를 수동으로 업데이트해야 합니다.
\n이 최적화는 주로 빌드 시간에 비용이 발생하는 비공개 프로젝트에 유용합니다. 공개/무료 프로젝트의 경우 빌드 시간이 무료이므로 이 설정을 활성화할 필요가 없습니다. 자세한 내용은 GitHub의 가격 책정 페이지를 참조하세요.
\nGitHub 시크릿 구성
\nenv
파일에서 시크릿을 복사하여 GitHub 저장소 시크릿에 붙여넣으세요.
Settings > Secrets and variables > Actions > New repository secret로 이동하세요.
\nBUILD_CERTIFICATE_BASE64
- Base64로 인코딩된 인증서
BUILD_PROVISION_PROFILE_BASE64
- Base64로 인코딩된 프로비저닝 프로파일
BUNDLE_IDENTIFIER
- 앱의 번들 식별자
APPLE_KEY_ID
— App Store Connect API Key 🔺Key ID
APPLE_ISSUER_ID
— App Store Connect API Key 🔺Issuer ID
APPLE_KEY_CONTENT
— App Store Connect API Key 🔺 _p8_의 Key 내용, 확인하기
GitHub 워크플로우 디렉토리 생성
\ncd .github/workflows
workflow
폴더 내에 build-upload-ios.yml
이라는 파일을 생성하고 다음을 추가하세요.
name: Build source code on ios\non: push: tags: - '*'\njobs: build_ios: runs-on: macOS-latest steps: - uses: actions/checkout@v4 - name: Use Node.js 20 uses: actions/setup-node@v3 with: node-version: 20 cache: npm - name: Install dependencies id: install_code run: npm ci - name: Build id: build_code run: npm run build - name: Build id: build_code run: npm run mobile - uses: actions/cache@v3 with: path: ios/App/Pods key: ${{ runner.os }}-pods-${{ hashFiles('**/Podfile.lock') }} restore-keys: | ${{ runner.os }}-pods- - name: Sync id: sync_code run: npx cap sync - uses: ruby/setup-ruby@v1 with: ruby-version: '3.0' bundler-cache: true - uses: maierj/fastlane-action@v3.1.0 env: APP_STORE_CONNECT_TEAM_ID: ${{ secrets.APP_STORE_CONNECT_TEAM_ID }} BUNDLE_IDENTIFIER: ${{ secrets.BUNDLE_IDENTIFIER }} BUILD_CERTIFICATE_BASE64: ${{ secrets.BUILD_CERTIFICATE_BASE64 }} BUILD_PROVISION_PROFILE_BASE64: ${{ secrets.BUILD_PROVISION_PROFILE_BASE64 }} APPLE_KEY_ID: ${{ secrets.APPLE_KEY_ID }} APPLE_ISSUER_ID: ${{ secrets.APPLE_ISSUER_ID }} APPLE_KEY_CONTENT: ${{ secrets.APPLE_KEY_CONTENT }} P12_PASSWORD: ${{ secrets.P12_PASSWORD }} APPLE_PROFILE_NAME: ${{ secrets.APPLE_PROFILE_NAME }} with: lane: ios beta - name: Upload release bundle uses: actions/upload-artifact@v4 with: name: ios-release path: ./App.ipa retention-days: 10
이 워크플로우는 각 GitHub tag 후에 트리거되어야 합니다. 태그를 자동화해야 하는 경우 먼저 GitHub actions를 사용한 자동 빌드 및 릴리스를 참조하세요.
\n그런 다음 이 워크플로우는 NodeJS 종속성을 가져와서 설치하고 JavaScript 앱을 빌드합니다.
\n\n\n새로운 커밋을 보낼 때마다 TestFlight에 릴리스가 빌드됩니다.
\n
앱이 Ionic을 사용할 필요는 없으며 Capacitor 기반만 필수입니다. 오래된 Cordova 모듈을 가질 수 있지만 Capacitor JS 플러그인을 선호해야 합니다.
\n커밋 생성
\n_커밋_을 만드세요. 저장소에서 활성 워크플로우를 확인할 수 있습니다.워크플로우 실행하기
\nmain
또는 developement
브랜치에 새로운 커밋을 푸시하여 워크플로우를 실행하세요
몇 분 후에 App Store Connect 대시보드에서 빌드를 확인할 수 있습니다
\n네, 가능하며 매우 간단합니다
\n항상 그랬듯이 Xcode를 사용하여 앱을 빌드하고 서명할 수 있습니다
\n이 블로그는 다음 글들을 기반으로 작성되었습니다:
\nCapgo의 씨앗은 제가 솔로 메이커로서의 여정을 시작하기 훨씬 전인 2020년 7월 8일, alexcroox라는 커뮤니티 멤버가 제출한 플러그인 요청으로부터 시작되었습니다.
\n이 요청은 다음과 같은 주요 내용을 포함한 “Capacitor Hot Code Push” 플러그인의 필요성을 강조했습니다:
\n이 포괄적인 요청은 65개의 좋아요와 25개의 하트 반응을 받으며 커뮤니티의 큰 지지를 얻었습니다. Capacitor 생태계에서 이러한 솔루션에 대한 강한 수요가 있음을 분명히 보여주었습니다.
\n1년 후 이 요청을 발견했을 때, 제 프로젝트에서 직면한 도전과 깊이 공감했습니다. 이는 이러한 도구의 필요성을 입증하고 Capgo가 될 것에 대한 로드맵 역할을 했습니다.
\n이 제안된 플러그인에 대한 커뮤니티의 열정은 제 개인적인 경험과 결합되어 Capgo 개발의 원동력이 되었습니다. 아이디어에서 구현까지의 타임라인이 1년 이상 걸렸지만, 오픈소스 커뮤니티가 어떻게 필요성을 파악하고 해결책을 영감을 줄 수 있는지를 보여주는 완벽한 예시입니다.
\nCapgo 이야기를 시작하기 전에, 배경을 이해하는 것이 중요합니다. 2021년, 저는 Cashstory의 CTO 역할을 그만두고 주식을 매각하는 인생을 바꾸는 결정을 내렸습니다. 이는 불확실성으로 가득하지만 무한한 가능성이 있는 솔로 메이커로서의 여정의 시작을 알렸습니다.
\n저축금을 안전망으로 삼아 새로운 모험을 시작했습니다. 저는 리스본의 활기찬 테크 씬과 문화를 즐기며 포르투갈 리스본에서 디지털 노마드로 살면서 제 열정 프로젝트에 집중했습니다. 주요 관심사는 모바일 앱 크로스핏 타이머인 Captime이었습니다. 이 프로젝트가 더 큰 무언가를 만들게 될 줄은 몰랐습니다.
\n리스본의 스타트업 생태계의 에너지와 디지털 노마드 라이프스타일의 자유는 혁신을 위한 완벽한 배경을 제공했습니다. 전 세계의 기업가와 개발자들로 둘러싸인 이 환경에서 Capgo의 씨앗이 뿌려졌습니다.
\nCaptime 작업을 하면서 저는 중요한 장애물에 부딪혔습니다 - Capacitor 앱을 위한 저렴하고 유연한 업데이트 솔루션의 부재였습니다. 2021년 10월, 저는 GitHub 스레드에서 이러한 우려를 표명했습니다.
\n제가 확인한 주요 문제점은 다음과 같습니다:
\n제 우려는 다른 개발자들의 공감을 얻었습니다. 많은 사람들이 기존 솔루션이 인디 개발자와 소규모 팀에게 너무 비싸다는 의견에 동의했습니다.
\n한 개발자가 커뮤니티의 감정을 요약했습니다:
\n“커뮤니티 플랜에 500개의 실시간 업데이트가 포함된다면 정말 좋을 것 같아요아니면 차라리 월 50달러에 5,000번의 Live Update를 포함하는 Live Update 전용 패키지가 있다면 더 좋았을 것 같습니다.
\n커뮤니티의 반응에 동기부여를 받아, 저는 직접 나서기로 했습니다. 2021년 10월 24일, 개발자들이 주어진 URL에서 업데이트를 다운로드할 수 있게 해주는 모듈을 만들겠다는 계획을 발표했습니다.
\n초기 목표는 간단했습니다:
\n하지만 이 단순한 아이디어를 현실로 만드는 것은 처음 예상했던 것보다 훨씬 더 어려웠습니다.
\nGitHub 스레드에서는 드러나지 않았던 것은 제가 맡은 작업의 엄청난 복잡성이었습니다. 이 기능을 구현하는데 필요한 코드는 모호하고 이해하기 어려웠습니다. Capacitor 앱이 업데이트와 파일 시스템을 처리하는 방식의 복잡한 세부사항들과 씨름해야 했습니다.
\n밤마다 제 밴에서 문서를 검토하고 다양한 접근 방식을 실험하며 시간을 보냈습니다. 진행은 더뎠고, 제가 감당할 수 있는 것보다 더 큰 일을 시작한 것은 아닌지 의문이 들 때도 있었습니다.
\n다행히도 이 여정에서 혼자가 아니었습니다. 특히 Discord의 개발자 커뮤니티는 매우 귀중한 자원이 되었습니다. 동료 개발자들은 그들의 통찰력을 공유하고, 문제 해결을 도와주었으며, 힘들 때마다 격려를 보내주었습니다.
\n이러한 협력은 기술적 장애물을 극복하는데 매우 중요했습니다. 오픈소스와 커뮤니티 주도 개발의 힘에 대한 제 믿음을 더욱 강화시켰습니다.
\n커뮤니티의 도움으로 개발 속도가 빨라지기 시작했습니다. 2021년 11월 22일까지 iOS용 작동 버전을 만들었고 개발자 경험을 개선하고 있었습니다.
\n개발이 진행되면서 더 많은 기능을 추가했습니다:
\n각각의 새로운 기능은 자체적인 과제를 가져왔지만, 프로젝트가 초기 범위를 넘어서 성장하면서 성취감도 함께 가져왔습니다.
\n2022년 3월까지 프로젝트는 완전한 제품인 Capgo로 발전했습니다. 개발자들이 자신의 백엔드에 연결하거나 Capgo의 백엔드 서비스를 사용할 수 있는 자동 업데이트 모드의 출시를 발표했습니다.
\n개발자들이 이 절실히 필요했던 솔루션을 칭찬하며 커뮤니티의 반응은 매우 긍정적이었습니다.
\n처음에는 Capgo를 수익화할 계획이 전혀 없었습니다. 제 목표는 단순히 저와 다른 개발자들이 직면한 문제를 해결하는 도구를 만드는 것이었습니다. 하지만 GitHub의 피드백은 이러한 입장을 재고하게 만들었습니다.
\n개발자들은 합리적인 가격으로 그들의 요구를 충족시키는 솔루션에 기꺼이 비용을 지불할 의사를 표현했습니다. 이러한 피드백과 함께 Capgo를 유지하고 개선하는데 필요한 지속적인 비용과 노력에 대한 인식은 중요한 결정으로 이어졌습니다.
\n2022년 6월 11일, 15일 후부터 Capgo가 사용량에 대해 과금을 시작할 것이라고 발표했고, 이는 커뮤니티 프로젝트에서 지속 가능한 비즈니스로의 전환을 의미했습니다.
\n하지만 프로젝트의 뿌리를 지키기 위해, 수동 모드나 커스텀 서버와 함께 플러그인을 무료로 사용할 수 있도록 Capgo의 오픈소스 코어를 유지했습니다.
\nCapgo와 함께한 제 여정은 커뮤니티 주도 혁신의 힘과 솔로 메이커들이 종종 마주치게 되는 예상치 못한 경로를 보여주는 증거입니다. 크로스핏 타이머 앱을 작업하면서 느낀 개인적인 불만에서 시작된 것이 Capacitor 앱을 위한 강력하고, 저렴하며, 유연한 실시간 업데이트 시스템으로 성장했습니다.
\nCapgo의 제작은 결코 쉽지 않았습니다.
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"탄생-커뮤니티의-요청"],"text":[0,"탄생: 커뮤니티의 요청"]}],[0,{"depth":[0,2],"slug":[0,"새로운-장의-시작"],"text":[0,"새로운 장의 시작"]}],[0,{"depth":[0,2],"slug":[0,"아이디어의-불꽃"],"text":[0,"아이디어의 불꽃"]}],[0,{"depth":[0,2],"slug":[0,"커뮤니티의-공감"],"text":[0,"커뮤니티의 공감"]}],[0,{"depth":[0,2],"slug":[0,"해결책의-탄생"],"text":[0,"해결책의 탄생"]}],[0,{"depth":[0,2],"slug":[0,"숨겨진-고충"],"text":[0,"숨겨진 고충"]}],[0,{"depth":[0,2],"slug":[0,"커뮤니티의-도움"],"text":[0,"커뮤니티의 도움"]}],[0,{"depth":[0,2],"slug":[0,"빠른-개발과-기능-확장"],"text":[0,"빠른 개발과 기능 확장"]}],[0,{"depth":[0,2],"slug":[0,"capgo의-출시"],"text":[0,"Capgo의 출시"]}],[0,{"depth":[0,2],"slug":[0,"유료-제품으로의-전환"],"text":[0,"유료 제품으로의 전환"]}],[0,{"depth":[0,2],"slug":[0,"결론"],"text":[0,"결론"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"birth-of-capgo-my-challenging-journey-as-a-solo-maker"],"title":[0,"Wie aus einem GitHub Issue ein Unternehmen wurde"],"description":[0,"Découvrez les défis et les succès de la création de Capgo, un système innovant de mise à jour en direct pour les applications Capacitor, né de la nécessité et façonné par les retours de la communauté."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://twitter.com/martindonadieu"],"created_at":[3,"2024-07-13T00:00:00.000Z"],"updated_at":[3,"2024-07-13T00:00:00.000Z"],"head_image":[0,"/capgo-birth-story.webp"],"head_image_alt":[0,"Capgo의 아이디어부터 제품까지의 진화 과정을 시각적으로 표현"],"keywords":[0,"mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"development"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/cross-platform-mobile-app-development-guide-2024.md"],"data":[0,{"slug":[0,"cross-platform-mobile-app-development-guide-2024"],"title":[0,"2024년 크로스 플랫폼 모바일 앱 개발 완벽 가이드"],"description":[0,"2024년 크로스 플랫폼 모바일 앱 개발을 위한 모범 사례와 프레임워크를 알아보세요. 하나의 코드베이스로 iOS, Android 및 웹 앱을 구축하세요."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://twitter.com/martindonadieu"],"created_at":[0,"2024-06-15T00:00:00.000Z"],"updated_at":[0,"2024-06-15T00:00:00.000Z"],"head_image":[0,"/cross-platform-app-dev-2024.webp"],"head_image_alt":[0,"크로스 플랫폼 모바일 앱 개발"],"keywords":[0,"cross-platform, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"cross-platform"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,"top-cross-platform-frameworks-compared-2024"]}],"body":[0,"## 2024년 크로스 플랫폼 모바일 앱 개발이 중요한 이유\n\n크로스 플랫폼 모바일 앱 개발은 기업들이 iOS, Android 및 웹 플랫폼에서 더 넓은 사용자층에 도달하고자 하면서 2024년에 더욱 중요해졌습니다. 각 플랫폼별로 별도의 네이티브 앱을 개발하는 것은 비용이 많이 들고 시간이 소요됩니다.\n\nIonic과 같은 크로스 플랫폼 프레임워크를 사용하면 기업들은 단일 코드베이스로 여러 플랫폼에서 실행되는 앱을 구축할 수 있습니다. 이는 개발 시간과 비용을 크게 줄이면서 모든 기기에서 일관된 기능과 사용자 경험을 제공할 수 있습니다.\n\n2024년 크로스 플랫폼 모바일 앱 개발의 주요 이점:\n\n- **더 넓은 도달** - 하나의 프로젝트로 수십억 명의 iOS, Android 및 웹 사용자에게 앱 배포\n- **비용 절감** - 여러 네이티브 코드베이스와 팀 유지 비용 절감\n- **빠른 개발** - 플랫폼 간 코드 재사용으로 기능을 더 빠르게 출시\n- **일관된 UX** - 모든 기기에서 원활한 경험 제공\n\n2024년과 그 이후로 모바일 사용이 계속 증가함에 따라, 기업의 경쟁력 유지를 위해서는 크로스 플랫폼 앱 전략이 필수적입니다. 그렇다면 최선의 접근 방식은 무엇일까요?\n\n## 모바일 앱 아키텍처의 패턴 분석\n\n대부분의 모바일 앱은 다음과 같은 공통 UI 컴포넌트와 패턴으로 구성됩니다:\n\n- 제목과 액션 버튼이 있는 헤더 바\n- 스크롤이나 검색이 가능한 데이터 목록\n- 탭 바와 내비게이션 메뉴\n- 입력 컨트롤이 있는 폼\n\n플랫폼마다 스타일은 다를 수 있지만, 핵심 구성 요소는 동일합니다. Ionic과 같은 현대적인 크로스 플랫폼 프레임워크는 각 플랫폼에 맞게 자동으로 외관과 느낌을 조정하는 사전 제작된 맞춤형 UI 컴포넌트를 제공합니다.\n\niOS, Android 및 웹 앱에서 단일 UI 컴포넌트 세트를 사용하면 대규모 코드 재사용이 가능합니다. 개발자는 기능을 한 번만 구축하고 필요에 따라 각 플랫폼의 스타일을 조정할 수 있습니다.\n\n## 웹 기반 vs 네이티브 크로스 플랫폼 접근 방식\n\n크로스 플랫폼 개발에는 웹 기반과 네이티브, 두 가지 주요 접근 방식이 있습니다.\n\nIonic과 같은 웹 기반 프레임워크는 HTML, CSS, JavaScript와 같은 표준 웹 기술을 사용합니다. UI는 웹뷰에서 실행되며, 플러그인을 통해 네이티브 기기 기능에 접근할 수 있습니다. 과거에는 성능이 우려사항이었지만, 현대의 JavaScript 엔진은 대부분 네이티브와의 격차를 좁혔습니다.\n\nReact Native와 Flutter 같은 네이티브 크로스 플랫폼 프레임워크는 다른 접근 방식을 취합니다. 네이티브 위젯과 코드로 컴파일되는 React 또는 Dart 코드를 제공합니다. 이는 네이티브에 가까운 성능을 제공하지만 독점 언어와 도구 사용이 필요합니다.\n\n결국 선택은 팀의 기술과 목표에 달려 있습니다. 웹 기반 프레임워크는 기존 웹 인재를 활용할 수 있게 하고, 네이티브 프레임워크는 더 전문화된 기술이 필요하지만 까다로운 앱에서는 성능상의 이점이 있을 수 있습니다.\n\n## Ionic으로 개발 속도 향상하기\n\nIonic은 앱스토어에서 15% 이상의 앱을 구동하는 선도적인 크로스 플랫폼 개발 프레임워크입니다. 다음과 같은 완전한 SDK를 제공합니다:\n\n- iOS, Android 및 웹용 100개 이상의 사전 제작된 UI 컴포넌트\n- 프로젝트 스캐폴딩, 미리보기 및 배포를 위한 Ionic CLI 도구\n- React, Vue 및 Angular와 같은 인기 있는 프론트엔드 프레임워크와의 통합\n- 모든 네이티브 기기 기능에 접근할 수 있는 Capacitor 및 Cordova 플러그인\n- Capgo 또는 Appflow를 통한 실시간 앱 업데이트, 인증 및 CI/CD\n\n웹 표준을 활용함으로써 Ionic은 개발자가 기존 기술을 사용하여 모든 플랫폼용 고품질 앱을 구축할 수 있게 합니다. 단일 코드베이스는 개발 시간과 유지보수 비용을 획기적으로 줄여줍니다.\n\n2024년에도 Ionic은 웹 기술로 가능한 것의 한계를 계속 확장하고 있습니다. Ionic 7은 강력한 디자인 도구, 향상된 성능, 네이티브 SDK와의 더욱 긴밀한 통합을 도입했습니다.\n\n## 시작하기\n\n요약하자면, 더 많은 기업들이 2024년에 비즈니스 이점을 깨닫게 되면서 크로스 플랫폼은 점점 더 앱 개발의 기본이 되고 있습니다. Ionic과 같은 프레임워크는 웹 우선 접근 방식을 가능하게 하여, 개발자가 기록적인 시간 내에 수십억 명의 사용자를 위한 놀라운 앱을 구축할 수 있게 합니다.스타트업부터 대기업까지, 팀들은 다양한 산업 분야에서 고객, 파트너 및 직원을 위한 중요한 앱을 구동하기 위해 Ionic을 사용하고 있습니다. 2024년에 새로운 모바일 프로젝트를 고려하고 계시다면, Ionic을 활용한 크로스 플랫폼 접근 방식을 탐색해볼 만한 가치가 있습니다.\n\n시작하시려면 다음 리소스를 확인해보세요:\n\n- [Ionic Documentation](https://ionicframeworkcom/docs)\n- [Ionic Components](https://ionicframeworkcom/docs/components)\n- [Capacitor Native APIs](https://capacitorionicframeworkcom/)\n\nIonic을 사용하면 모바일과 웹을 위한 매력적이고 고성능의 앱을 순식간에 구축할 수 있습니다! 자세한 내용은 [Ionic 앱 전략가](https://ionicio/enterprise/strategy-session)와 상담해보세요.\n\n미래는 크로스 플랫폼입니다 - 오늘 시작하여 2024년 모바일 앱 목표를 달성하세요!\n\n## Capgo로 앱 업데이트 단순화하기\n\n모바일 앱 개발의 주요 과제 중 하나는 시간이 지남에 따라 앱을 최신 상태로 유지하는 것입니다. 크로스 플랫폼 접근 방식을 사용하더라도 각 업데이트마다 새 버전을 배포하는 것은 번거로울 수 있습니다.\n\n이런 상황에서 [Capgo](https://capgoapp/)와 같은 솔루션이 도움이 됩니다. Capgo는 Capacitor 앱을 위한 오픈소스 실시간 업데이트 시스템입니다. 앱 스토어를 거치지 않고도 사용자의 기기에 직접 업데이트를 푸시할 수 있습니다.\n\nCapgo의 주요 이점:\n\n- **즉각적인 업데이트** - 스토어에 재제출하지 않고도 몇 초 만에 최신 버전의 앱을 푸시\n- **쉬운 롤백** - 필요한 경우 이전 버전으로 손쉽게 되돌리기\n- **단계적 출시** - 더 광범위한 출시 전에 일부 사용자를 대상으로 테스트 업데이트 배포\n- **자체 호스팅 옵션** - 완전한 제어와 프라이버시를 위한 자체 업데이트 호스팅\n\nCapgo는 Ionic 앱을 구동하는 네이티브 런타임인 Capacitor와 원활하게 통합됩니다. 기존 Ionic 프로젝트에서도 쉽게 설정할 수 있습니다.\n\nIonic의 크로스 플랫폼 개발과 Capgo의 실시간 업데이트를 결합하면 민첩성을 극대화할 수 있습니다. 새로운 기능을 더 빠르고 위험 부담 없이 배포하세요.\n\nCapgo를 시작하려면 [공식 문서](https://docscapgoapp/)를 확인하세요. Capgo는 무료이며 완전한 오픈소스입니다 - 원하는 대로 배포할 수 있습니다!"],"filePath":[0,"src/content/blog/ko/cross-platform-mobile-app-development-guide-2024.md"],"digest":[0,"4dba2d00cbe9e4ee"],"rendered":[0,{"html":[0,"크로스 플랫폼 모바일 앱 개발은 기업들이 iOS, Android 및 웹 플랫폼에서 더 넓은 사용자층에 도달하고자 하면서 2024년에 더욱 중요해졌습니다. 각 플랫폼별로 별도의 네이티브 앱을 개발하는 것은 비용이 많이 들고 시간이 소요됩니다.
\nIonic과 같은 크로스 플랫폼 프레임워크를 사용하면 기업들은 단일 코드베이스로 여러 플랫폼에서 실행되는 앱을 구축할 수 있습니다. 이는 개발 시간과 비용을 크게 줄이면서 모든 기기에서 일관된 기능과 사용자 경험을 제공할 수 있습니다.
\n2024년 크로스 플랫폼 모바일 앱 개발의 주요 이점:
\n2024년과 그 이후로 모바일 사용이 계속 증가함에 따라, 기업의 경쟁력 유지를 위해서는 크로스 플랫폼 앱 전략이 필수적입니다. 그렇다면 최선의 접근 방식은 무엇일까요?
\n대부분의 모바일 앱은 다음과 같은 공통 UI 컴포넌트와 패턴으로 구성됩니다:
\n플랫폼마다 스타일은 다를 수 있지만, 핵심 구성 요소는 동일합니다. Ionic과 같은 현대적인 크로스 플랫폼 프레임워크는 각 플랫폼에 맞게 자동으로 외관과 느낌을 조정하는 사전 제작된 맞춤형 UI 컴포넌트를 제공합니다.
\niOS, Android 및 웹 앱에서 단일 UI 컴포넌트 세트를 사용하면 대규모 코드 재사용이 가능합니다. 개발자는 기능을 한 번만 구축하고 필요에 따라 각 플랫폼의 스타일을 조정할 수 있습니다.
\n크로스 플랫폼 개발에는 웹 기반과 네이티브, 두 가지 주요 접근 방식이 있습니다.
\nIonic과 같은 웹 기반 프레임워크는 HTML, CSS, JavaScript와 같은 표준 웹 기술을 사용합니다. UI는 웹뷰에서 실행되며, 플러그인을 통해 네이티브 기기 기능에 접근할 수 있습니다. 과거에는 성능이 우려사항이었지만, 현대의 JavaScript 엔진은 대부분 네이티브와의 격차를 좁혔습니다.
\nReact Native와 Flutter 같은 네이티브 크로스 플랫폼 프레임워크는 다른 접근 방식을 취합니다. 네이티브 위젯과 코드로 컴파일되는 React 또는 Dart 코드를 제공합니다. 이는 네이티브에 가까운 성능을 제공하지만 독점 언어와 도구 사용이 필요합니다.
\n결국 선택은 팀의 기술과 목표에 달려 있습니다. 웹 기반 프레임워크는 기존 웹 인재를 활용할 수 있게 하고, 네이티브 프레임워크는 더 전문화된 기술이 필요하지만 까다로운 앱에서는 성능상의 이점이 있을 수 있습니다.
\nIonic은 앱스토어에서 15% 이상의 앱을 구동하는 선도적인 크로스 플랫폼 개발 프레임워크입니다. 다음과 같은 완전한 SDK를 제공합니다:
\n웹 표준을 활용함으로써 Ionic은 개발자가 기존 기술을 사용하여 모든 플랫폼용 고품질 앱을 구축할 수 있게 합니다. 단일 코드베이스는 개발 시간과 유지보수 비용을 획기적으로 줄여줍니다.
\n2024년에도 Ionic은 웹 기술로 가능한 것의 한계를 계속 확장하고 있습니다. Ionic 7은 강력한 디자인 도구, 향상된 성능, 네이티브 SDK와의 더욱 긴밀한 통합을 도입했습니다.
\n요약하자면, 더 많은 기업들이 2024년에 비즈니스 이점을 깨닫게 되면서 크로스 플랫폼은 점점 더 앱 개발의 기본이 되고 있습니다. Ionic과 같은 프레임워크는 웹 우선 접근 방식을 가능하게 하여, 개발자가 기록적인 시간 내에 수십억 명의 사용자를 위한 놀라운 앱을 구축할 수 있게 합니다.스타트업부터 대기업까지, 팀들은 다양한 산업 분야에서 고객, 파트너 및 직원을 위한 중요한 앱을 구동하기 위해 Ionic을 사용하고 있습니다. 2024년에 새로운 모바일 프로젝트를 고려하고 계시다면, Ionic을 활용한 크로스 플랫폼 접근 방식을 탐색해볼 만한 가치가 있습니다.
\n시작하시려면 다음 리소스를 확인해보세요:
\n\nIonic을 사용하면 모바일과 웹을 위한 매력적이고 고성능의 앱을 순식간에 구축할 수 있습니다! 자세한 내용은 Ionic 앱 전략가와 상담해보세요.
\n미래는 크로스 플랫폼입니다 - 오늘 시작하여 2024년 모바일 앱 목표를 달성하세요!
\n모바일 앱 개발의 주요 과제 중 하나는 시간이 지남에 따라 앱을 최신 상태로 유지하는 것입니다. 크로스 플랫폼 접근 방식을 사용하더라도 각 업데이트마다 새 버전을 배포하는 것은 번거로울 수 있습니다.
\n이런 상황에서 Capgo와 같은 솔루션이 도움이 됩니다. Capgo는 Capacitor 앱을 위한 오픈소스 실시간 업데이트 시스템입니다. 앱 스토어를 거치지 않고도 사용자의 기기에 직접 업데이트를 푸시할 수 있습니다.
\nCapgo의 주요 이점:
\nCapgo는 Ionic 앱을 구동하는 네이티브 런타임인 Capacitor와 원활하게 통합됩니다. 기존 Ionic 프로젝트에서도 쉽게 설정할 수 있습니다.
\nIonic의 크로스 플랫폼 개발과 Capgo의 실시간 업데이트를 결합하면 민첩성을 극대화할 수 있습니다. 새로운 기능을 더 빠르고 위험 부담 없이 배포하세요.
\nCapgo를 시작하려면 공식 문서를 확인하세요. Capgo는 무료이며 완전한 오픈소스입니다 - 원하는 대로 배포할 수 있습니다!
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"2024년-크로스-플랫폼-모바일-앱-개발이-중요한-이유"],"text":[0,"2024년 크로스 플랫폼 모바일 앱 개발이 중요한 이유"]}],[0,{"depth":[0,2],"slug":[0,"모바일-앱-아키텍처의-패턴-분석"],"text":[0,"모바일 앱 아키텍처의 패턴 분석"]}],[0,{"depth":[0,2],"slug":[0,"웹-기반-vs-네이티브-크로스-플랫폼-접근-방식"],"text":[0,"웹 기반 vs 네이티브 크로스 플랫폼 접근 방식"]}],[0,{"depth":[0,2],"slug":[0,"ionic으로-개발-속도-향상하기"],"text":[0,"Ionic으로 개발 속도 향상하기"]}],[0,{"depth":[0,2],"slug":[0,"시작하기"],"text":[0,"시작하기"]}],[0,{"depth":[0,2],"slug":[0,"capgo로-앱-업데이트-단순화하기"],"text":[0,"Capgo로 앱 업데이트 단순화하기"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"cross-platform-mobile-app-development-guide-2024"],"title":[0,"2024년 크로스 플랫폼 모바일 앱 개발 완벽 가이드"],"description":[0,"2024년 크로스 플랫폼 모바일 앱 개발을 위한 모범 사례와 프레임워크를 알아보세요. 하나의 코드베이스로 iOS, Android 및 웹 앱을 구축하세요."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://twitter.com/martindonadieu"],"created_at":[3,"2024-06-15T00:00:00.000Z"],"updated_at":[3,"2024-06-15T00:00:00.000Z"],"head_image":[0,"/cross-platform-app-dev-2024.webp"],"head_image_alt":[0,"크로스 플랫폼 모바일 앱 개발"],"keywords":[0,"cross-platform, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"cross-platform"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,"top-cross-platform-frameworks-compared-2024"]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/integrate-universal-links-capacitor-nextjs.md"],"data":[0,{"slug":[0,"integrate-universal-links-capacitor-nextjs"],"title":[0,"Capacitor로 Next.js에서 유니버설 링크를 통합하는 방법"],"description":[0,"Next.js와 Capacitor를 사용하여, iOS 및 Android 플랫폼에서 앱의 유니버셜 링크를 구성하는 단계별 방법을 알아보세요."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://twitter.com/martindonadieu"],"created_at":[0,"2023-12-14T00:00:00.000Z"],"updated_at":[0,"2023-12-14T00:00:00.000Z"],"head_image":[0,"/deeplink_next_capacitor.webp"],"head_image_alt":[0,"Capacitor 유니버셜 링크"],"keywords":[0,"Capacitor, Universal Links, Next.js, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"DeepLinking"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"body":[0,"iOS의 유니버설 링크와 Android의 앱 링크를 사용하면 사용자가 브라우저를 거치지 않고 링크를 통해 직접 앱으로 이동할 수 있습니다. 이는 특히 사용자 경험을 개선하고 웹 페이지에서 앱으로의 컨텍스트를 유지하는 데 유용합니다. 이 가이드에서는 Capacitor를 사용하여 Nextjs 앱에서 이러한 딥 링크를 설정하는 과정을 설명하겠습니다.\n\n딥 링크 설정은 많은 코드가 필요하지 않지만 일부 구성이 필요합니다. 이 가이드를 마치면 `https://www.capgo.app/details/22`와 같은 링크를 클릭하여 앱이 설치되어 있다면 올바른 페이지로 앱이 열리게 됩니다.\n\n## Nextjs 딥 링크 설정\n\n먼저, 새로운 Nextjs 앱과 테스트를 위한 상세 페이지를 만들어보겠습니다:\n\n```sh\nnpx create-next-app@latest capgoLinks\ncd capgoLinks\nmkdir pages/details\ntouch pages/details/[id].js\nnpm run build\nnpx cap add ios\nnpx cap add android\n```\n\n**capacitor.config.json** 파일에서 **번들 ID**가 올바르게 설정되어 있는지 확인하세요. 이는 설정에 매우 중요합니다:\n\n```json\n{\n \"appId\": \"com.capgo.deeplinks\",\n \"appName\": \"capgoLinks\",\n \"webDir\": \"out\",\n \"bundledWebRuntime\": false\n}\n```\n\n라우팅의 경우, Nextjs는 파일 기반 라우팅을 사용하므로 `pages/details/[id].js`에 파일을 생성함으로써 이미 와일드카드 라우트를 설정했습니다.\n\n`pages/details/[id].js`에서는 Nextjs의 내장 라우터를 사용하여 URL에서 ID를 가져올 수 있습니다:\n\n```jsx\nimport { useRouter } from 'next/router'\n\nfunction DetailsPage() {\n const router = useRouter()\n const { id } = router.query\n\n return (\nMy ID: {id}
\niOS의 유니버설 링크와 Android의 앱 링크를 사용하면 사용자가 브라우저를 거치지 않고 링크를 통해 직접 앱으로 이동할 수 있습니다. 이는 특히 사용자 경험을 개선하고 웹 페이지에서 앱으로의 컨텍스트를 유지하는 데 유용합니다. 이 가이드에서는 Capacitor를 사용하여 Nextjs 앱에서 이러한 딥 링크를 설정하는 과정을 설명하겠습니다.
\n딥 링크 설정은 많은 코드가 필요하지 않지만 일부 구성이 필요합니다. 이 가이드를 마치면 https://www.capgo.app/details/22
와 같은 링크를 클릭하여 앱이 설치되어 있다면 올바른 페이지로 앱이 열리게 됩니다.
먼저, 새로운 Nextjs 앱과 테스트를 위한 상세 페이지를 만들어보겠습니다:
\nnpx create-next-app@latest capgoLinkscd capgoLinksmkdir pages/detailstouch pages/details/[id].jsnpm run buildnpx cap add iosnpx cap add android
capacitor.config.json 파일에서 번들 ID가 올바르게 설정되어 있는지 확인하세요. 이는 설정에 매우 중요합니다:
\n{ \"appId\": \"com.capgo.deeplinks\", \"appName\": \"capgoLinks\", \"webDir\": \"out\", \"bundledWebRuntime\": false}
라우팅의 경우, Nextjs는 파일 기반 라우팅을 사용하므로 pages/details/[id].js
에 파일을 생성함으로써 이미 와일드카드 라우트를 설정했습니다.
pages/details/[id].js
에서는 Nextjs의 내장 라우터를 사용하여 URL에서 ID를 가져올 수 있습니다:
import { useRouter } from 'next/router'\nfunction DetailsPage() { const router = useRouter() const { id } = router.query\n return ( <div> <p>My ID: {id}</p> </div> )}\nexport default DetailsPage
)}export default DetailsPage\">이제 Capacitor로 appUrlOpen
이벤트를 처리해보겠습니다. 이 이벤트는 앱이 사용자 정의 URL 스키마를 통해 열릴 때 트리거됩니다. pages/_app.js
파일에 리스너를 추가하세요:
import { useEffect } from 'react'import { App } from '@capacitor/app'\nfunction MyApp({ Component, pageProps }) { useEffect(() => { App.addListener('appUrlOpen', (event) => { const slug = event.url.split('.app').pop() if (slug) window.location.href = slug\n }) }, [])\n return <Component {...pageProps} />}\nexport default MyApp
이 코드는 appUrlOpen
이벤트를 수신하고 Nextjs 앱 내에서 적절한 라우트로 이동합니다.
iOS의 경우, Associated Domains가 활성화된 앱 ID가 필요합니다. YOURTEAMID
와 com.your.bundleid
를 실제 팀 ID와 번들 ID로 대체하여 다음 내용으로 apple-app-site-association 파일을 만드세요:
{ \"applinks\": { \"apps\": [], \"details\": [ { \"appID\": \"YOURTEAMID.com.your.bundleid\", \"paths\": [\"*\"] } ] }}
이 파일을 도메인의 .well-known
디렉토리에 업로드하여 https://www.capgo.app/.well-known/apple-app-site-association
에서 접근할 수 있도록 하세요.
Xcode에서 applinks:capgo.app
형식을 사용하여 앱의 권한에 도메인을 추가하세요.
Android 앱 링크를 위해 다음 단계를 따르세요:
\n.well-known
디렉토리에 업로드하세요.AndroidManifest.xml
의 딥 링크를 처리하는 activity
요소에 intent-filter
를 추가하세요:
<activity ...> <intent-filter android:autoVerify=\"true\"> <action android:name=\"android.intent.action.VIEW\" /> <category android:name=\"android.intent.category.DEFAULT\" /> <category android:name=\"android.intent.category.BROWSABLE\" /> <data android:scheme=\"https\" android:host=\"capgo.app\" /> </intent-filter></activity>
assetlinks.json
파일을 업로드한 후, Google의 Digital Asset Links 도구를 사용하여 확인할 수 있습니다. 모든 것이 올바르게 설정되면 녹색 체크마크가 표시됩니다.
앱을 빌드하고 서명하려면 다음 명령어를 사용하세요:
\ncd android./gradlew assembleReleasecd ..jarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore my-release-key.keystore android/app/build/outputs/apk/release/app-release-unsigned.apk alias_namezipalign -v 4 android/app/build/outputs/apk/release/app-release-unsigned.apk capgo.apkadb install capgo.apk
이렇게 하면 연결된 Android 기기에 서명된 앱이 설치됩니다.
\n네이티브 프로젝트 설정을 자동화하려면 Capacitor configure 패키지의 사용을 고려해보세요. 프로젝트에 설치하세요:
\nnpm install @capacitor/configure
프로젝트 루트에 capacitor.config.yaml
파일을 생성하세요:
vars: BUNDLE_ID: com.capgo.deeplinks PACKAGE_NAME: com.capgo.deeplinksplatforms: ios: targets: App: bundleId: $BUNDLE_ID entitlements: - com.apple.developer.associated-domains: ['applinks:capgo.app'] android: packageName: $PACKAGE_NAME
이 구성으로 configure 도구를 실행하세요:
\nnpx cap-config run capacitor.config.yaml
이렇게 하면 YAML 파일에 지정된 설정이 네이티브 프로젝트에 적용됩니다.
\nNextjs 앱에서 Capacitor를 사용하여 딥 링크를 설정하는 것은 iOS와 Android 모두에 대해 도메인과 프로젝트 설정을 구성하는 것을 포함합니다. 이 과정은 세심한 주의가 필요하지만, 이전 방식에 비해 간소화되었으며 추가 플러그인이 필요하지 않습니다. 도메인 확인 파일이 올바르게 제공되는지 확인하고 각 플랫폼의 도구로 확인하세요. 설정이 완료되면 앱이 웹 링크에서 원활하게 열리며, 사용자가 웹에서 앱으로 자연스럽게 전환할 수 있습니다.
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"nextjs-딥-링크-설정"],"text":[0,"Nextjs 딥 링크 설정"]}],[0,{"depth":[0,2],"slug":[0,"ios-구성"],"text":[0,"iOS 구성"]}],[0,{"depth":[0,2],"slug":[0,"android-구성"],"text":[0,"Android 구성"]}],[0,{"depth":[0,2],"slug":[0,"네이티브-프로젝트-설정을-위한-capacitor-구성"],"text":[0,"네이티브 프로젝트 설정을 위한 Capacitor 구성"]}],[0,{"depth":[0,2],"slug":[0,"결론"],"text":[0,"결론"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"integrate-universal-links-capacitor-nextjs"],"title":[0,"Capacitor로 Next.js에서 유니버설 링크를 통합하는 방법"],"description":[0,"Next.js와 Capacitor를 사용하여, iOS 및 Android 플랫폼에서 앱의 유니버셜 링크를 구성하는 단계별 방법을 알아보세요."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://twitter.com/martindonadieu"],"created_at":[3,"2023-12-14T00:00:00.000Z"],"updated_at":[3,"2023-12-14T00:00:00.000Z"],"head_image":[0,"/deeplink_next_capacitor.webp"],"head_image_alt":[0,"Capacitor 유니버셜 링크"],"keywords":[0,"Capacitor, Universal Links, Next.js, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"DeepLinking"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/self-hosted-capgo.md"],"data":[0,{"slug":[0,"self-hosted-capgo"],"title":[0,"セルフホスト型 Capgo"],"description":[0,"Capgoを自己ホスティングすることで、Capgoクラウドサービスを使用せずにCapacitorのライブアップデートをユーザーに配布することができます。"],"author":[0,"Anik Dhabal Babu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/81948346?v=4"],"author_url":[0,"https://x.com/anikdhabal"],"created_at":[0,"2023-09-20T00:00:00.000Z"],"updated_at":[0,"2023-09-20T00:00:00.000Z"],"head_image":[0,"/self-hosted-capgo.webp"],"head_image_alt":[0,"자체 호스팅된 capgo"],"keywords":[0,"mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Solution"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"body":[0,"이 문서는 Capgo를 자체 호스팅하는 방법에 대한 단계별 가이드와 자체 호스팅의 장단점에 대해 설명합니다.\n\n# 소개\n\n자체 호스팅은 Platform as a Service나 퍼블릭 클라우드 제공업체를 사용하는 대신 직접 서버와 네트워크를 설정하여 자신의 웹사이트나 애플리케이션을 운영하는 방식입니다. 자체 호스팅을 선택하는 사람들은 웹사이트나 애플리케이션을 구축하는 것 외에도 자체 네트워크를 운영하고 유지보수 및 가동 시간에 대한 책임을 지게 됩니다.\n\nCapgo를 시작하는 가장 쉬운 방법은 [공식 클라우드 관리 서비스](https://capgoapp/)를 이용하는 것이지만, 직접 관리하고 싶다면 자체 서버에 Capgo를 호스팅할 수도 있습니다.\n\n## 자체 호스팅이란?\n\n디지털 영역에서 자체 호스팅은 온라인 존재감과 서비스를 관리하고 제어하기 위해 자체 서버나 호스팅 인프라를 운영하는 것을 의미합니다. 타사 호스팅 제공업체에 의존하는 대신, 개인과 조직이 자신들의 조건에 맞춰 서버, 웹사이트, 애플리케이션, 데이터 스토리지를 설정하고 관리하는 것을 선택합니다.\n\n## 왜 자체 호스팅을 선택하나요?\n\n자체 호스팅을 선택하는 데는 여러 이유가 있습니다. 가장 일반적인 이점은 다음과 같습니다:\n\n* **프라이버시와 제어:** 자체 호스팅은 데이터와 프라이버시를 완전히 제어할 수 있게 해줍니다. 타사 제공업체가 활동을 추적하거나 데이터를 판매하는 것을 걱정할 필요가 없습니다.\n\n* **비용 절감:** 자체 호스팅은 장기적으로 더 비용 효율적일 수 있습니다. 특히 많은 리소스를 사용하거나 여러 서비스를 운영하는 경우에 그렇습니다.\n\n* **커스터마이징:** 자체 호스팅은 특정 요구사항에 맞춰 애플리케이션과 서비스를 커스터마이징할 수 있는 유연성을 제공합니다.\n\n* **학습과 실험:** 자체 호스팅은 Linux, 시스템 관리 및 기타 기술적 주제를 배우는 좋은 방법이 될 수 있습니다. 새로운 소프트웨어와 서비스를 실험하는 재미있는 방법이 될 수도 있습니다.\n\n* **독립성:** 자체 호스팅은 외부 제공업체에 대한 의존도를 줄여줍니다. 그들의 서비스 약관, 가격 변동, 또는 잠재적인 서비스 중단에 좌우되지 않습니다. 이러한 독립성은 온라인 존재감을 중요한 기능으로 사용하는 기업과 개인에게 매우 중요할 수 있습니다.\n\n## Capgo Cloud와 Capgo 자체 호스팅의 차이점은 무엇인가요?\n\nCapgo는 하나의 버전만 있습니다. 클라우드와 자체 호스팅 제품 모두 완전히 동일합니다. 더 나은 또는 더 완전한 기능 세트를 가진 프리미엄 및 독점 상업 버전은 없습니다.\n\n동일한 대시보드, 동일한 실행 가능한 메트릭, [방문자 프라이버시 존중](https://capgoapp/privacy/)에 대한 동일한 약속을 두 버전 모두에서 얻을 수 있습니다.\n\n2018년 12월에 Capgo 개발을 시작했고, 2019년 5월에 SaaS 구독 사업을 시작했습니다. 이 프로젝트는 매우 활발하게 개발되고 빠르게 성장하고 있습니다. 또한 견고하고 실전에서 검증되었습니다.\n\nCapgo Cloud와 Capgo 자체 호스팅의 차이점은 다음과 같습니다:\n\n| | Cloud | 자체 호스팅 |\n| --- | --- | --- |\n| **호스팅** | 쉽고 편리합니다. 첫 업데이트를 보내는 데 2분이 걸리며, 고가용성, 백업, 보안, 유지보수 모두 제가 대신 해드립니다. 걱정하실 필요 없도록 모든 것을 관리해드립니다. | 모든 것을 직접 하셔야 합니다. 서버를 구해야 하고 인프라를 관리해야 합니다. 설치, 유지보수, 업그레이드, 서버 용량, 가동 시간, 백업, 보안, 안정성, 일관성, 로딩 시간 등에 대한 책임이 있습니다. |\n| **스토리지** | 모든 방문자 데이터는 EU 소유의 클라우드 인프라에서만 처리됩니다. 사이트 데이터는 독일의 안전하고 암호화된 서버에 보관됩니다. 이를 통해 사이트 데이터가 엄격한 유럽연합 데이터 프라이버시 법률로 보호되고 GDPR 준수를 보장합니다. 웹사이트 데이터는 절대 EU를 벗어나지 않습니다. | 완전한 제어권을 가지고 원하는 어느 국가의 서버에서든 Capgo를 호스팅할 수 있습니다. 지하실의 서버에서 호스팅하거나 GDPR을 준수하지 않는 곳을 포함한 어떤 클라우드 제공업체에서도 호스팅할 수 있습니다. |"],"filePath":[0,"src/content/blog/ko/self-hosted-capgo.md"],"digest":[0,"ea0e4a4c0516dda5"],"rendered":[0,{"html":[0,"이 문서는 Capgo를 자체 호스팅하는 방법에 대한 단계별 가이드와 자체 호스팅의 장단점에 대해 설명합니다.
\n자체 호스팅은 Platform as a Service나 퍼블릭 클라우드 제공업체를 사용하는 대신 직접 서버와 네트워크를 설정하여 자신의 웹사이트나 애플리케이션을 운영하는 방식입니다. 자체 호스팅을 선택하는 사람들은 웹사이트나 애플리케이션을 구축하는 것 외에도 자체 네트워크를 운영하고 유지보수 및 가동 시간에 대한 책임을 지게 됩니다.
\nCapgo를 시작하는 가장 쉬운 방법은 공식 클라우드 관리 서비스를 이용하는 것이지만, 직접 관리하고 싶다면 자체 서버에 Capgo를 호스팅할 수도 있습니다.
\n디지털 영역에서 자체 호스팅은 온라인 존재감과 서비스를 관리하고 제어하기 위해 자체 서버나 호스팅 인프라를 운영하는 것을 의미합니다. 타사 호스팅 제공업체에 의존하는 대신, 개인과 조직이 자신들의 조건에 맞춰 서버, 웹사이트, 애플리케이션, 데이터 스토리지를 설정하고 관리하는 것을 선택합니다.
\n자체 호스팅을 선택하는 데는 여러 이유가 있습니다. 가장 일반적인 이점은 다음과 같습니다:
\n프라이버시와 제어: 자체 호스팅은 데이터와 프라이버시를 완전히 제어할 수 있게 해줍니다. 타사 제공업체가 활동을 추적하거나 데이터를 판매하는 것을 걱정할 필요가 없습니다.
\n비용 절감: 자체 호스팅은 장기적으로 더 비용 효율적일 수 있습니다. 특히 많은 리소스를 사용하거나 여러 서비스를 운영하는 경우에 그렇습니다.
\n커스터마이징: 자체 호스팅은 특정 요구사항에 맞춰 애플리케이션과 서비스를 커스터마이징할 수 있는 유연성을 제공합니다.
\n학습과 실험: 자체 호스팅은 Linux, 시스템 관리 및 기타 기술적 주제를 배우는 좋은 방법이 될 수 있습니다. 새로운 소프트웨어와 서비스를 실험하는 재미있는 방법이 될 수도 있습니다.
\n독립성: 자체 호스팅은 외부 제공업체에 대한 의존도를 줄여줍니다. 그들의 서비스 약관, 가격 변동, 또는 잠재적인 서비스 중단에 좌우되지 않습니다. 이러한 독립성은 온라인 존재감을 중요한 기능으로 사용하는 기업과 개인에게 매우 중요할 수 있습니다.
\nCapgo는 하나의 버전만 있습니다. 클라우드와 자체 호스팅 제품 모두 완전히 동일합니다. 더 나은 또는 더 완전한 기능 세트를 가진 프리미엄 및 독점 상업 버전은 없습니다.
\n동일한 대시보드, 동일한 실행 가능한 메트릭, 방문자 프라이버시 존중에 대한 동일한 약속을 두 버전 모두에서 얻을 수 있습니다.
\n2018년 12월에 Capgo 개발을 시작했고, 2019년 5월에 SaaS 구독 사업을 시작했습니다. 이 프로젝트는 매우 활발하게 개발되고 빠르게 성장하고 있습니다. 또한 견고하고 실전에서 검증되었습니다.
\nCapgo Cloud와 Capgo 자체 호스팅의 차이점은 다음과 같습니다:
\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\nCloud | 자체 호스팅 | |
---|---|---|
호스팅 | 쉽고 편리합니다. 첫 업데이트를 보내는 데 2분이 걸리며, 고가용성, 백업, 보안, 유지보수 모두 제가 대신 해드립니다. 걱정하실 필요 없도록 모든 것을 관리해드립니다. | 모든 것을 직접 하셔야 합니다. 서버를 구해야 하고 인프라를 관리해야 합니다. 설치, 유지보수, 업그레이드, 서버 용량, 가동 시간, 백업, 보안, 안정성, 일관성, 로딩 시간 등에 대한 책임이 있습니다. |
스토리지 | 모든 방문자 데이터는 EU 소유의 클라우드 인프라에서만 처리됩니다. 사이트 데이터는 독일의 안전하고 암호화된 서버에 보관됩니다. 이를 통해 사이트 데이터가 엄격한 유럽연합 데이터 프라이버시 법률로 보호되고 GDPR 준수를 보장합니다. 웹사이트 데이터는 절대 EU를 벗어나지 않습니다. | 완전한 제어권을 가지고 원하는 어느 국가의 서버에서든 Capgo를 호스팅할 수 있습니다. 지하실의 서버에서 호스팅하거나 GDPR을 준수하지 않는 곳을 포함한 어떤 클라우드 제공업체에서도 호스팅할 수 있습니다. |
이 튜토리얼에서는 Quasar를 사용하여 새로운 웹 앱을 만드는 것으로 시작하겠습니다. 이후에 Capacitor를 사용하여 모바일 앱으로 전환하는 방법을 배우게 됩니다.
\nCapacitor를 사용하면 React Native와 같은 완전히 새로운 앱 개발 방식을 배우거나 복잡한 작업을 할 필요 없이 Quasar 웹 앱을 모바일 앱으로 변환할 수 있습니다.
\n이 튜토리얼은 새로운 Quasar 앱으로 시작하여 Capacitor를 통합하여 네이티브 모바일 앱 영역으로 진입하는 과정을 안내합니다. 또한 Capgo를 사용하여 몇 초 만에 앱에 실시간 업데이트를 전송할 수 있습니다.
\nCapacitorJS는 정말 게임 체인저입니다! 어떤 웹 프로젝트에도 쉽게 통합할 수 있으며, 애플리케이션을 네이티브 웹뷰로 래핑하여 Xcode와 Android Studio 프로젝트를 자동으로 생성합니다. 또한 플러그인을 통해 JS 브리지를 통해 카메라와 같은 네이티브 기기 기능에 접근할 수 있습니다.
\nCapacitor를 사용하면 복잡한 설정이나 가파른 학습 곡선 없이 훌륭한 네이티브 모바일 앱을 얻을 수 있습니다. 간단한 API와 간소화된 기능을 통해 프로젝트에 쉽게 통합할 수 있습니다. Capacitor로 완전히 기능하는 네이티브 앱을 얼마나 쉽게 만들 수 있는지 놀라실 겁니다!
\n새로운 Quasar 앱을 만들기 위해 다음 명령어를 실행하세요:
\n[[CODE_BLOCK]]
\n“App with Quasar CLI” 옵션을 선택한 다음 “Quasar v2”를 선택하세요.
\n네이티브 모바일 앱을 만들기 위해서는 프로젝트의 export가 필요합니다. 따라서 Quasar 프로젝트를 빌드하고 복사하는데 사용할 수 있는 간단한 스크립트를 packagejson에 포함시켜 보겠습니다:
\n[[CODE_BLOCK]]
\ngenerate
명령어를 실행한 후에는 프로젝트 루트에서 새로운 dist
폴더를 확인할 수 있어야 합니다.
이 폴더는 나중에 Capacitor에서 사용되지만, 지금은 올바르게 설정해야 합니다.
\n웹 앱을 네이티브 모바일 컨테이너로 패키징하기 위해서는 몇 가지 초기 단계를 따라야 하지만, 이후에는 단순히 sync
명령어를 실행하는 것만큼 간단합니다.
먼저 Capacitor CLI를 개발 의존성으로 설치하고 프로젝트 내에서 설정할 수 있습니다. 설정 중에 이름과 번들 ID에 대해 기본값을 수락하려면 “enter”를 누르면 됩니다.
\n다음으로 코어 패키지와 iOS 및 Android 플랫폼용 관련 패키지를 설치해야 합니다.
\n마지막으로 플랫폼을 추가할 수 있으며, Capacitor는 프로젝트 루트에 각 플랫폼용 폴더를 생성합니다:
\n[[CODE_BLOCK]]
\n이제 Quasar 프로젝트에서 새로운 ios와 android 폴더를 확인할 수 있어야 합니다.
\n이것들은 실제 네이티브 프로젝트입니다!
\n나중에 Android 프로젝트에 접근하려면 Android Studio를 설치해야 합니다. iOS의 경우 Mac이 필요하며 Xcode를 설치해야 합니다.
\n또한 프로젝트에서 capacitorconfigts 파일을 찾을 수 있어야 하는데, 이 파일에는 동기화 중에 사용되는 기본적인 Capacitor 설정이 포함되어 있습니다. 주의해야 할 유일한 것은 webDir인데, 이는 빌드 명령어의 결과를 가리켜야 합니다. 현재는 부정확합니다.
\n이를 수정하기 위해 capacitorconfigjson 파일을 열고 webDir을 업데이트하세요:
\n[[CODE_BLOCK]]
\n다음 명령어를 실행하여 시도해볼 수 있습니다:
\n[[CODE_BLOCK]]
\n첫 번째 명령어 npm run generate
는 단순히 Quasar 프로젝트를 빌드하고 정적 빌드를 복사하며, 두 번째 명령어 npx cap sync
는 모든 웹 코드를 네이티브 플랫폼의 올바른 위치에 동기화하여 앱에서 표시될 수 있도록 합니다.
또한 sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로, 새로운 Capacitor 플러그인을 설치할 때 npx cap sync
를 다시 실행해야 합니다.이제 알게 모르게 앱을 개발해냈으니, 실제 디바이스에서 확인해봅시다!
iOS 앱을 개발하려면 Xcode가 설치되어 있어야 하고, Android 앱의 경우 Android Studio가 설치되어 있어야 합니다. 또한 앱스토어에 배포하려면 iOS의 경우 Apple Developer Program에, Android의 경우 Google Play Console에 등록해야 합니다.
\n네이티브 모바일 개발이 처음이시라면, Capacitor CLI를 사용하여 두 네이티브 프로젝트를 쉽게 열 수 있습니다:
\n[[CODE_BLOCK]]
\n네이티브 프로젝트 설정이 완료되면 연결된 디바이스에 앱을 배포하는 것은 쉽습니다. Android Studio에서는 모든 것이 준비될 때까지 기다리기만 하면 설정 변경 없이 연결된 디바이스에 앱을 배포할 수 있습니다. 예시입니다:
\nXcode에서는 시뮬레이터가 아닌 실제 디바이스에 앱을 배포하기 위해 서명 계정을 설정해야 합니다. 처음 하시는 경우 Xcode가 과정을 안내해 줄 것입니다(단, Developer Program에 등록되어 있어야 합니다). 그 후에는 상단에서 연결된 디바이스를 선택하고 실행 버튼만 누르면 됩니다. 예시입니다:
\n축하합니다! Quasar 웹 앱을 모바일 디바이스에 성공적으로 배포했습니다. 예시입니다:
\n[[HTML_TAG]]\n[[HTML_TAG]]\n[[HTML_TAG]]
\n하지만 개발 중에는 더 빠른 방법이 있습니다.
\nCapgo 실시간 업데이트는 개발자가 전통적인 앱스토어 제출 과정 없이 모바일 앱을 업데이트할 수 있게 해주는 서비스입니다. 앱스토어 검토 과정을 기다리지 않고도 버그를 빠르게 수정하거나 작은 업데이트를 할 수 있는 편리한 방법입니다.
\nQuasar 앱에 Capgo를 통합하는 것은 실시간 업데이트의 힘을 활용할 수 있게 해주는 간단한 과정입니다. 이 단계별 가이드를 통해 Capgo 실시간 업데이트의 통합과 구현 과정을 안내해드리겠습니다.
\nCapgo 대시보드 가입 및 접근:
\n가입하고 첫 버전을 업로드하기 위한 API 키를 받을 시간입니다! Capgo 계정에 가입하는 것부터 시작하세요.
\nCapgo SDK 설치:
\nCapacitor 앱의 루트 디렉토리에서 다음 명령어를 실행하세요:
\nnpm i @capgo/capacitor-updater && npx cap sync
Capacitor 앱에 플러그인을 설치합니다.
그리고 CodePush 대신 다음 코드를 앱에 추가하세요:
\n[[CODE_BLOCK]]
\n이는 네이티브 플러그인에 설치가 성공했음을 알립니다.
\nCapgo CLOUD 로그인:
\n먼저, 계정에 있는 all
apikey를 사용하여 CLI로 로그인하세요:
`npx @capgo/cli@latest login YOU_KEY`
첫 앱 추가하기:
\nCLI로 Capgo Cloud에 앱을 생성하는 것부터 시작하겠습니다.
\n[[CODE_BLOCK]]\n이 명령어는 Capacitor 설정 파일에 정의된 모든 변수를 사용하여 앱을 생성합니다.
\n첫 버전 업로드하기:
\n다음 명령어로 코드를 빌드하고 Capgo에 전송하세요:
\n[[CODE_BLOCK]]
\n기본적으로 버전 이름은 package.json 파일의 버전이 됩니다.
\nCapgo에서 빌드가 있는지 확인하세요.
\n제 모바일 샌드박스 앱으로 테스트해볼 수도 있습니다.
\n채널을 기본값으로 설정하기:
\n앱을 Capgo에 전송한 후, 앱이 Capgo에서 업데이트를 받을 수 있도록 채널을 기본값으로 설정해야 합니다.
\nnpx @capgo/cli@latest channel set production -s default
업데이트 검증을 위한 앱 설정:
\n메인 JavaScript 파일에 이 설정을 추가하세요.
\n[[CODE_BLOCK]]
\n그리고 npm run build && npx cap copy
를 실행하여 앱을 업데이트하세요.
실시간 업데이트 받기:
\nDeploy에서 실시간 업데이트를 받으려면 디바이스나 에뮬레이터에서 앱을 실행해야 합니다. 컴퓨터에 연결된 에뮬레이터나 디바이스에서 로컬 앱을 실행하는 가장 쉬운 방법은 다음 명령어를 사용하는 것입니다.
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"capacitor-소개"],"text":[0,"Capacitor 소개"]}],[0,{"depth":[0,2],"slug":[0,"quasar-앱-준비하기"],"text":[0,"Quasar 앱 준비하기"]}],[0,{"depth":[0,2],"slug":[0,"quasar-앱에-capacitor-추가하기"],"text":[0,"Quasar 앱에 Capacitor 추가하기"]}],[0,{"depth":[0,2],"slug":[0,"네이티브-앱-빌드-및-배포"],"text":[0,"네이티브 앱 빌드 및 배포"]}],[0,{"depth":[0,2],"slug":[0,"capgo-실시간-업데이트"],"text":[0,"Capgo 실시간 업데이트"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"live-update-with-quasar-and-capacitor"],"title":[0,"Créer des applications mobiles avec des mises à jour en direct, Quasar et Capacitor."],"description":[0,"Quasar, Capacitor를 이용하여 라이브 업데이트가 가능한 모바일 앱을 만드는 방법"],"author":[0,"Anik Dhabal Babu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/81948346?v=4"],"author_url":[0,"https://x.com/anikDhabal"],"created_at":[3,"2023-09-14T00:00:00.000Z"],"updated_at":[3,"2023-09-14T00:00:00.000Z"],"head_image":[0,"/quasar_capgo.webp"],"head_image_alt":[0,"Quasar 및 Capgo 일러스트레이션"],"keywords":[0,"Quasar, Capacitor, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Tutorial"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,"update-your-capacitor-apps-seamlessly-using-capacitor-updater"]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/setup-ci-and-cd-in-gitlab.md"],"data":[0,{"slug":[0,"setup-ci-and-cd-gitlab"],"title":[0,"GitLab으로 앱 자동 빌드 및 릴리스하기"],"description":[0,"Crea la tua pipeline CI/CD con GitLab gratuitamente e distribuisci la tua applicazione Ionic Capacitor JS ad ogni push su main."],"author":[0,"Anik Dhabal Babu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/81948346?v=4"],"author_url":[0,"https://x.com/anikdhabal"],"created_at":[0,"2023-09-14T00:00:00.000Z"],"updated_at":[0,"2023-09-14T00:00:00.000Z"],"head_image":[0,"/CI_CD_in_Gitlab.webp"],"head_image_alt":[0,"GitLab의 CI/CD"],"keywords":[0,"GitLab, CI/CD, automatic build, automatic release, mobile app updates"],"tag":[0,"CI/CD"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"body":[0,"이 문서는 GitLab을 사용한 CI/CD 파이프라인 설정 방법을 안내합니다.\n\n## 서문\n\n먼저 Capacitor 앱을 Capgo에 추가했는지 확인하세요. 이 튜토리얼은 업로드 단계에만 초점을 맞추고 있습니다. Capgo에 앱을 추가하는 방법은 이 [Tutorial](https://capgoapp/blog/update-your-capacitor-apps-seamlessly-using-capacitor-updater/)을 참고하세요.\n\n## 커밋 규칙\n\n먼저 [conventional commits](https://wwwconventionalcommitsorg/en/v100/) 커밋 규칙을 따르기 시작해야 합니다. 이는 도구가 버전 번호를 어떻게 업그레이드할지 이해하는데 도움이 되며, 5분이면 배울 수 있습니다.\n\n\n\n## 태그를 위한 GitLab CI/CD\n\nGitLab 저장소의 루트에 다음 내용으로 gitlab-ci.yml 파일을 생성하세요.\n\n \n stages:\n - tag\n\n bump_version:\n stage: tag\n only:\n - main\n except:\n variables:\n - $CI_COMMIT_MESSAGE =~ /^chore\\(release\\):/\n script:\n - git config --global user.email \"gitlab@yourdomain.com\"\n - git config --global user.name \"GitLab CI/CD\"\n - git checkout $CI_COMMIT_REF_NAME\n - git pull origin $CI_COMMIT_REF_NAME\n - npx capacitor-standard-version\n - git push origin $CI_COMMIT_REF_NAME --tags\n\n스크립트 섹션에서 \"gitlab@yourdomain.com\"과 \"GitLab CI/CD\"를 귀하의 GitLab 이메일과 사용자 이름으로 바꾸세요. 이 설정은 main 브랜치에 푸시할 때만 작업을 트리거하고 \"chore(release):\"로 시작하는 커밋 메시지는 제외합니다.\n\n## 빌드를 위한 GitLab CI/CD\n\ngitlab-ci.yml 파일에 빌드를 위한 다른 단계를 추가하세요:\n\n stages:\n - deploy\n\n deploy:\n stage: deploy\n only:\n - tags # 이 작업은 태그 푸시에서만 실행됩니다\n script:\n - apt-get update -qy && apt-get install -y nodejs npm\n - npm install -g @capgo/cli\n - npm ci\n - npm run build\n - npx @capgo/cli bundle upload -a $CAPGO_TOKEN -c production\n variables:\n FIREBASE_CONFIG: $FIREBASE_CONFIG # GitLab 프로젝트 설정에서 이것을 정의하세요\n environment:\n name: production\n\nGitLab 프로젝트의 CI/CD 변수에 Capgo API 키(CAPGO_TOKEN)가 추가되어 있는지 확인하세요. GitLab의 프로젝트로 이동하여 설정 > CI/CD > 변수로 이동한 다음, CAPGO_TOKEN이라는 이름의 변수를 API 키 값과 함께 추가하세요.\n\nnpm run build 명령을 변경하는 등 특정 프로젝트의 빌드 프로세스에 맞게 빌드 스크립트를 사용자 정의하세요.\n\n## 결론\n\n여기까지 입니다! 우리는 기술 여정에서 한 걸음 더 나아갔습니다. 현대 소프트웨어 개발에서 CI/CD는 필수적으로 고려해야 할 요소입니다. 이 가이드라인이 모든 분들께 도움이 되길 바랍니다."],"filePath":[0,"src/content/blog/ko/setup-ci-and-cd-in-gitlab.md"],"digest":[0,"9a351bf892d2a68e"],"rendered":[0,{"html":[0,"이 문서는 GitLab을 사용한 CI/CD 파이프라인 설정 방법을 안내합니다.
\n먼저 Capacitor 앱을 Capgo에 추가했는지 확인하세요. 이 튜토리얼은 업로드 단계에만 초점을 맞추고 있습니다. Capgo에 앱을 추가하는 방법은 이 Tutorial을 참고하세요.
\n먼저 conventional commits 커밋 규칙을 따르기 시작해야 합니다. 이는 도구가 버전 번호를 어떻게 업그레이드할지 이해하는데 도움이 되며, 5분이면 배울 수 있습니다.
\nGitLab 저장소의 루트에 다음 내용으로 gitlab-ci.yml 파일을 생성하세요.
\n stages: - tag\n bump_version: stage: tag only: - main except: variables: - $CI_COMMIT_MESSAGE =~ /^chore\\(release\\):/ script: - git config --global user.email \"gitlab@yourdomain.com\" - git config --global user.name \"GitLab CI/CD\" - git checkout $CI_COMMIT_REF_NAME - git pull origin $CI_COMMIT_REF_NAME - npx capacitor-standard-version - git push origin $CI_COMMIT_REF_NAME --tags
스크립트 섹션에서 “gitlab@yourdomain.com”과 “GitLab CI/CD”를 귀하의 GitLab 이메일과 사용자 이름으로 바꾸세요. 이 설정은 main 브랜치에 푸시할 때만 작업을 트리거하고 “chore(release):“로 시작하는 커밋 메시지는 제외합니다.
\ngitlab-ci.yml 파일에 빌드를 위한 다른 단계를 추가하세요:
\n stages: - deploy\n deploy: stage: deploy only: - tags # 이 작업은 태그 푸시에서만 실행됩니다 script: - apt-get update -qy && apt-get install -y nodejs npm - npm install -g @capgo/cli - npm ci - npm run build - npx @capgo/cli bundle upload -a $CAPGO_TOKEN -c production variables: FIREBASE_CONFIG: $FIREBASE_CONFIG # GitLab 프로젝트 설정에서 이것을 정의하세요 environment: name: production
GitLab 프로젝트의 CI/CD 변수에 Capgo API 키(CAPGO_TOKEN)가 추가되어 있는지 확인하세요. GitLab의 프로젝트로 이동하여 설정 > CI/CD > 변수로 이동한 다음, CAPGO_TOKEN이라는 이름의 변수를 API 키 값과 함께 추가하세요.
\nnpm run build 명령을 변경하는 등 특정 프로젝트의 빌드 프로세스에 맞게 빌드 스크립트를 사용자 정의하세요.
\n여기까지 입니다! 우리는 기술 여정에서 한 걸음 더 나아갔습니다. 현대 소프트웨어 개발에서 CI/CD는 필수적으로 고려해야 할 요소입니다. 이 가이드라인이 모든 분들께 도움이 되길 바랍니다.
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"서문"],"text":[0,"서문"]}],[0,{"depth":[0,2],"slug":[0,"커밋-규칙"],"text":[0,"커밋 규칙"]}],[0,{"depth":[0,2],"slug":[0,"태그를-위한-gitlab-cicd"],"text":[0,"태그를 위한 GitLab CI/CD"]}],[0,{"depth":[0,2],"slug":[0,"빌드를-위한-gitlab-cicd"],"text":[0,"빌드를 위한 GitLab CI/CD"]}],[0,{"depth":[0,2],"slug":[0,"결론"],"text":[0,"결론"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"setup-ci-and-cd-gitlab"],"title":[0,"GitLab으로 앱 자동 빌드 및 릴리스하기"],"description":[0,"Crea la tua pipeline CI/CD con GitLab gratuitamente e distribuisci la tua applicazione Ionic Capacitor JS ad ogni push su main."],"author":[0,"Anik Dhabal Babu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/81948346?v=4"],"author_url":[0,"https://x.com/anikdhabal"],"created_at":[3,"2023-09-14T00:00:00.000Z"],"updated_at":[3,"2023-09-14T00:00:00.000Z"],"head_image":[0,"/CI_CD_in_Gitlab.webp"],"head_image_alt":[0,"GitLab의 CI/CD"],"keywords":[0,"GitLab, CI/CD, automatic build, automatic release, mobile app updates"],"tag":[0,"CI/CD"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/capacitor-comprehensive-guide.md"],"data":[0,{"slug":[0,"capacitor-comprehensive-guide"],"title":[0,"Capacitor: 総合ガイド"],"description":[0,"Capacitor は、開発者が単一の標準的なWebコードベースを使用して、iOS、Android、デスクトップ、Progressive Web Appsのネイティブアプリを構築できる強力なツールです。この包括的なガイドで、Capacitorについて知っておくべきすべてを学びましょう。"],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[0,"2023-06-10T00:00:00.000Z"],"updated_at":[0,"2023-06-10T00:00:00.000Z"],"head_image":[0,"/capacitor-guide.webp"],"head_image_alt":[0,"Capacitor 가이드 삽화"],"keywords":[0,"mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Guides"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"body":[0,"[Capacitor](https://capacitorjscom/)는 웹 개발자가 단일 표준 웹 코드베이스를 사용하여 네이티브 iOS, Android, 데스크톱 및 프로그레시브 웹 앱을 만들 수 있게 해주는 다목적 도구입니다. Ionic 팀이 개발한 Capacitor는 개발자들이 모바일 플랫폼에서 웹 기술의 잠재력을 인식하면서 최근 몇 년간 큰 주목을 받았습니다. 이 종합 가이드에서는 Capacitor에 대한 가장 일반적인 질문들에 답하고 그 기능, 사용 사례 및 이점을 살펴보겠습니다.\n\n## Capacitor란 무엇인가요?\n\nCapacitor는 웹 개발자가 현대 브라우저에서 실행되는 표준 웹 기술을 사용하여 크로스 플랫폼 앱을 구축할 수 있게 해주는 무료 오픈소스(MIT 라이선스) 플랫폼입니다. 네이티브 플랫폼 SDK(iOS 및 Android), 명령줄 도구, 플러그인 API 및 사전 제작된 플러그인으로 구성됩니다. Capacitor를 사용하면 기존 웹 애플리케이션이 각 플랫폼에서 네이티브 앱으로 실행될 수 있으며, JavaScript를 통해 네이티브 플랫폼에 대한 훅을 제공합니다. 이러한 훅은 앱에 직접 내장되거나 재사용 및 배포를 위한 독립형 플러그인으로 구축될 수 있습니다.\n\n## Capacitor로 무엇을 만들 수 있나요?\n\nCapacitor를 사용하면 네이티브로 또는 다른 크로스 플랫폼 도구킷으로 만들 수 있는 거의 모든 것을 구축할 수 있습니다. Capacitor 앱은 네이티브 플랫폼에 완전히 액세스할 수 있으므로 대부분의 네이티브 기능을 구현할 수 있습니다. 그러나 네이티브 UI 컨트롤을 웹 앱 뷰 계층에 직접 임베딩하는 것은 어려울 수 있으며, 아직 다른 사람들이 사용할 수 있는 추상화된 기술로는 제공되지 않습니다.\n\n## Capacitor는 누구를 위한 것인가요?\n\nCapacitor는 HTML, CSS 및 JavaScript 배경을 가진 웹 개발자를 대상으로 합니다. 웹이나 데스크톱 앱(Electron 또는 유사한 도구 사용)을 구축하는 경우, Capacitor는 모바일에 중점을 둔 크로스 플랫폼 앱을 만들기 위한 솔루션입니다.\n\n## 팀이 언제 Capacitor를 선택해야 하나요?\n\n팀은 웹 개발 기술과 기존 웹 투자를 활용하여 네이티브 플랫폼 앱을 배포하고자 할 때 Capacitor를 고려해야 합니다. Capacitor는 데이터 기반 앱, 소비자 앱, B2B/E 앱 및 엔터프라이즈 앱에 이상적입니다. Capacitor를 만든 회사인 Ionic이 전용 엔터프라이즈 지원과 기능을 제공하므로 특히 엔터프라이즈 앱에 적합합니다.\n\n## 기존 웹 코드를 재사용하고 웹 앱과 새로운 코드를 공유할 수 있나요?\n\n네! Capacitor는 표준 웹 앱을 네이티브로 실행하므로 팀이 웹과 모바일을 위한 단일 코드베이스를 가질 수 있거나 컴포넌트, 로직 또는 특정 경험과 같은 웹 앱의 일부를 재사용할 수 있습니다.\n\n## Capacitor는 어떤 점이 좋으며, 어떤 한계가 있나요?\n\nCapacitor는 표준 웹 앱을 네이티브 모바일 앱으로 실행하고 네이티브 기능으로 웹 앱을 확장하는 데 탁월합니다. 웹 개발에 능숙하거나 상당한 웹 투자를 한 팀에게 이상적입니다. Capacitor는 WebGL을 지원하지만 3D/2D 또는 그래픽 집약적인 앱에는 최선의 선택이 아닐 수 있습니다. 웹 앱과 네이티브 레이어 간의 광범위한 통신이 필요한 앱은 직렬화로 인해 Capacitor 통신 브리지가 오버헤드를 추가할 수 있습니다. 그러나 필요한 경우 Capacitor 앱은 항상 사용자 정의 네이티브 코드를 실행할 수 있습니다.\n\n## Capacitor와 네이티브 UI 컨트롤을 혼합할 수 있나요?\n\n네, 모달이나 상위 레벨 네비게이션 컨테이너와 같은 네이티브 UI 컨트롤을 Capacitor 웹 뷰 외부에 표시할 수 있습니다. 웹 뷰 경험에 네이티브 컨트롤을 임베딩하는 것은 가능하지만 아직 다른 사람들이 사용할 수 있는 기술로는 제공되지 않습니다.\n\n## Capacitor와 Electron은 어떻게 다른가요?\n\nCapacitor는 종종 \"모바일용 Electron\"으로 설명됩니다. Capacitor는 더 높은 수준의 추상화이므로 Electron을 배포 플랫폼으로 대상으로 할 수 있습니다. 데스크톱 플랫폼만 대상으로 하면 Electron으로 충분합니다. 하지만 모바일, 웹 및 데스크톱용 크로스 플랫폼 앱을 구축하려면 Capacitor가 Electron 및 기타 플랫폼을 지원합니다.\n\n## Capacitor와 Ionic은 어떻게 다른가요?\n\nIonic은 Capacitor, Ionic Framework, Stencil, Appflow 및 기타 앱 개발 중심 제품을 만드는 회사입니다."],"filePath":[0,"src/content/blog/ko/capacitor-comprehensive-guide.md"],"digest":[0,"9ba34ff97e36304c"],"rendered":[0,{"html":[0,"Capacitor는 웹 개발자가 단일 표준 웹 코드베이스를 사용하여 네이티브 iOS, Android, 데스크톱 및 프로그레시브 웹 앱을 만들 수 있게 해주는 다목적 도구입니다. Ionic 팀이 개발한 Capacitor는 개발자들이 모바일 플랫폼에서 웹 기술의 잠재력을 인식하면서 최근 몇 년간 큰 주목을 받았습니다. 이 종합 가이드에서는 Capacitor에 대한 가장 일반적인 질문들에 답하고 그 기능, 사용 사례 및 이점을 살펴보겠습니다.
\nCapacitor는 웹 개발자가 현대 브라우저에서 실행되는 표준 웹 기술을 사용하여 크로스 플랫폼 앱을 구축할 수 있게 해주는 무료 오픈소스(MIT 라이선스) 플랫폼입니다. 네이티브 플랫폼 SDK(iOS 및 Android), 명령줄 도구, 플러그인 API 및 사전 제작된 플러그인으로 구성됩니다. Capacitor를 사용하면 기존 웹 애플리케이션이 각 플랫폼에서 네이티브 앱으로 실행될 수 있으며, JavaScript를 통해 네이티브 플랫폼에 대한 훅을 제공합니다. 이러한 훅은 앱에 직접 내장되거나 재사용 및 배포를 위한 독립형 플러그인으로 구축될 수 있습니다.
\nCapacitor를 사용하면 네이티브로 또는 다른 크로스 플랫폼 도구킷으로 만들 수 있는 거의 모든 것을 구축할 수 있습니다. Capacitor 앱은 네이티브 플랫폼에 완전히 액세스할 수 있으므로 대부분의 네이티브 기능을 구현할 수 있습니다. 그러나 네이티브 UI 컨트롤을 웹 앱 뷰 계층에 직접 임베딩하는 것은 어려울 수 있으며, 아직 다른 사람들이 사용할 수 있는 추상화된 기술로는 제공되지 않습니다.
\nCapacitor는 HTML, CSS 및 JavaScript 배경을 가진 웹 개발자를 대상으로 합니다. 웹이나 데스크톱 앱(Electron 또는 유사한 도구 사용)을 구축하는 경우, Capacitor는 모바일에 중점을 둔 크로스 플랫폼 앱을 만들기 위한 솔루션입니다.
\n팀은 웹 개발 기술과 기존 웹 투자를 활용하여 네이티브 플랫폼 앱을 배포하고자 할 때 Capacitor를 고려해야 합니다. Capacitor는 데이터 기반 앱, 소비자 앱, B2B/E 앱 및 엔터프라이즈 앱에 이상적입니다. Capacitor를 만든 회사인 Ionic이 전용 엔터프라이즈 지원과 기능을 제공하므로 특히 엔터프라이즈 앱에 적합합니다.
\n네! Capacitor는 표준 웹 앱을 네이티브로 실행하므로 팀이 웹과 모바일을 위한 단일 코드베이스를 가질 수 있거나 컴포넌트, 로직 또는 특정 경험과 같은 웹 앱의 일부를 재사용할 수 있습니다.
\nCapacitor는 표준 웹 앱을 네이티브 모바일 앱으로 실행하고 네이티브 기능으로 웹 앱을 확장하는 데 탁월합니다. 웹 개발에 능숙하거나 상당한 웹 투자를 한 팀에게 이상적입니다. Capacitor는 WebGL을 지원하지만 3D/2D 또는 그래픽 집약적인 앱에는 최선의 선택이 아닐 수 있습니다. 웹 앱과 네이티브 레이어 간의 광범위한 통신이 필요한 앱은 직렬화로 인해 Capacitor 통신 브리지가 오버헤드를 추가할 수 있습니다. 그러나 필요한 경우 Capacitor 앱은 항상 사용자 정의 네이티브 코드를 실행할 수 있습니다.
\n네, 모달이나 상위 레벨 네비게이션 컨테이너와 같은 네이티브 UI 컨트롤을 Capacitor 웹 뷰 외부에 표시할 수 있습니다. 웹 뷰 경험에 네이티브 컨트롤을 임베딩하는 것은 가능하지만 아직 다른 사람들이 사용할 수 있는 기술로는 제공되지 않습니다.
\nCapacitor는 종종 “모바일용 Electron”으로 설명됩니다. Capacitor는 더 높은 수준의 추상화이므로 Electron을 배포 플랫폼으로 대상으로 할 수 있습니다. 데스크톱 플랫폼만 대상으로 하면 Electron으로 충분합니다. 하지만 모바일, 웹 및 데스크톱용 크로스 플랫폼 앱을 구축하려면 Capacitor가 Electron 및 기타 플랫폼을 지원합니다.
\nIonic은 Capacitor, Ionic Framework, Stencil, Appflow 및 기타 앱 개발 중심 제품을 만드는 회사입니다.
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"capacitor란-무엇인가요"],"text":[0,"Capacitor란 무엇인가요?"]}],[0,{"depth":[0,2],"slug":[0,"capacitor로-무엇을-만들-수-있나요"],"text":[0,"Capacitor로 무엇을 만들 수 있나요?"]}],[0,{"depth":[0,2],"slug":[0,"capacitor는-누구를-위한-것인가요"],"text":[0,"Capacitor는 누구를 위한 것인가요?"]}],[0,{"depth":[0,2],"slug":[0,"팀이-언제-capacitor를-선택해야-하나요"],"text":[0,"팀이 언제 Capacitor를 선택해야 하나요?"]}],[0,{"depth":[0,2],"slug":[0,"기존-웹-코드를-재사용하고-웹-앱과-새로운-코드를-공유할-수-있나요"],"text":[0,"기존 웹 코드를 재사용하고 웹 앱과 새로운 코드를 공유할 수 있나요?"]}],[0,{"depth":[0,2],"slug":[0,"capacitor는-어떤-점이-좋으며-어떤-한계가-있나요"],"text":[0,"Capacitor는 어떤 점이 좋으며, 어떤 한계가 있나요?"]}],[0,{"depth":[0,2],"slug":[0,"capacitor와-네이티브-ui-컨트롤을-혼합할-수-있나요"],"text":[0,"Capacitor와 네이티브 UI 컨트롤을 혼합할 수 있나요?"]}],[0,{"depth":[0,2],"slug":[0,"capacitor와-electron은-어떻게-다른가요"],"text":[0,"Capacitor와 Electron은 어떻게 다른가요?"]}],[0,{"depth":[0,2],"slug":[0,"capacitor와-ionic은-어떻게-다른가요"],"text":[0,"Capacitor와 Ionic은 어떻게 다른가요?"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"capacitor-comprehensive-guide"],"title":[0,"Capacitor: 総合ガイド"],"description":[0,"Capacitor は、開発者が単一の標準的なWebコードベースを使用して、iOS、Android、デスクトップ、Progressive Web Appsのネイティブアプリを構築できる強力なツールです。この包括的なガイドで、Capacitorについて知っておくべきすべてを学びましょう。"],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[3,"2023-06-10T00:00:00.000Z"],"updated_at":[3,"2023-06-10T00:00:00.000Z"],"head_image":[0,"/capacitor-guide.webp"],"head_image_alt":[0,"Capacitor 가이드 삽화"],"keywords":[0,"mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Guides"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/basic-js-css-config-for-native-app-look.md"],"data":[0,{"slug":[0,"basic-js-css-config-for-native-app-look"],"title":[0,"ネイティブアプリのような見た目を実現するための基本的なJSとCSS設定"],"description":[0,"Pelajari cara mengkonfigurasi aplikasi web Anda dengan pengaturan JavaScript dan CSS dasar untuk membuatnya terlihat dan terasa seperti aplikasi native, termasuk menonaktifkan efek hover."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[0,"2023-06-05T00:00:00.000Z"],"updated_at":[0,"2023-06-05T00:00:00.000Z"],"head_image":[0,"/native_app_look.webp"],"head_image_alt":[0,"네이티브 앱 모양 일러스트레이션"],"keywords":[0,"tailwind css, css, mobile design, mobile app development"],"tag":[0,"Web Development"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"body":[0,"# 네이티브 앱 모양을 위한 기본 JS 및 CSS 구성\n\n웹 앱을 구축할 때 원활한 사용자 경험을 제공하기 위해 네이티브 앱처럼 보이고 느끼게 만드는 것이 중요합니다. 이 글에서는 호버 효과 비활성화를 포함하여 네이티브 앱 모양을 구현하는 데 필요한 기본 JavaScript 및 CSS 구성을 다룰 것입니다.\n\n## 호버 효과 비활성화\n\n터치 기기에서는 데스크톱 기기와 같은 실제 호버 상태가 없기 때문에 호버 효과가 문제가 될 수 있습니다. 터치 기기에서 호버 효과를 비활성화하려면 다음 CSS 코드를 사용할 수 있습니다:\n\n```css\n@media (hover: none) {\n .element:hover {\n /* Reset the hover styles */\n background-color: initial;\n color: initial;\n /* Add any other style resets needed */\n }\n}\n```\n\n`element`를 호버 효과를 비활성화하려는 요소에 대한 적절한 선택자로 바꾸세요.\n\n## 링크 미리보기 비활성화\n\n터치 기기에서 링크 미리보기를 비활성화하려면 다음 JavaScript 코드를 사용할 수 있습니다:\n\n```javascript\ndocument.addEventListener('touchstart', function(event) {\n if (event.target.tagName === 'A') {\n event.preventDefault();\n }\n});\n```\n\n## 선택 비활성화\n\n텍스트 선택을 비활성화하려면 스타일시트에 다음 CSS 코드를 추가하세요:\n\n```css\nbody {\n -webkit-touch-callout: none;\n -webkit-user-select: none;\n -khtml-user-select: none;\n -moz-user-select: none;\n -ms-user-select: none;\n user-select: none;\n}\n```\n\n## 확대/축소 비활성화\n\n확대/축소를 비활성화하려면 HTML 파일의 head 섹션에 다음 메타 태그를 추가하세요:\n\n```html\n\n```\n\n## 안전 CSS 영역 추가\n\n기기의 안전 영역 내에 콘텐츠가 표시되도록 하려면 스타일시트에 다음 CSS 코드를 추가하세요:\n\n```css\nbody {\n padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);\n}\n```\n\n## 추가 팁\n\n1. 모든 기기에서 앱이 잘 보이도록 반응형 디자인 기술을 사용하세요\n2. 무거운 JavaScript 라이브러리와 프레임워크 사용을 최소화하여 앱 성능을 최적화하세요\n3. 다양한 기기와 브라우저에서 앱을 테스트하여 호환성과 일관된 사용자 경험을 보장하세요\n\n이러한 기본 JavaScript 및 CSS 구성을 따르면 원활하고 즐거운 사용자 경험을 제공하는 네이티브 앱처럼 보이고 느껴지는 웹 앱을 만들 수 있습니다."],"filePath":[0,"src/content/blog/ko/basic-js-css-config-for-native-app-look.md"],"digest":[0,"593469ca259c62e6"],"rendered":[0,{"html":[0,"웹 앱을 구축할 때 원활한 사용자 경험을 제공하기 위해 네이티브 앱처럼 보이고 느끼게 만드는 것이 중요합니다. 이 글에서는 호버 효과 비활성화를 포함하여 네이티브 앱 모양을 구현하는 데 필요한 기본 JavaScript 및 CSS 구성을 다룰 것입니다.
\n터치 기기에서는 데스크톱 기기와 같은 실제 호버 상태가 없기 때문에 호버 효과가 문제가 될 수 있습니다. 터치 기기에서 호버 효과를 비활성화하려면 다음 CSS 코드를 사용할 수 있습니다:
\n@media (hover: none) { .element:hover { /* Reset the hover styles */ background-color: initial; color: initial; /* Add any other style resets needed */ }}
element
를 호버 효과를 비활성화하려는 요소에 대한 적절한 선택자로 바꾸세요.
터치 기기에서 링크 미리보기를 비활성화하려면 다음 JavaScript 코드를 사용할 수 있습니다:
\ndocument.addEventListener('touchstart', function(event) { if (event.target.tagName === 'A') { event.preventDefault(); }});
텍스트 선택을 비활성화하려면 스타일시트에 다음 CSS 코드를 추가하세요:
\nbody { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
확대/축소를 비활성화하려면 HTML 파일의 head 섹션에 다음 메타 태그를 추가하세요:
\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no\">
기기의 안전 영역 내에 콘텐츠가 표시되도록 하려면 스타일시트에 다음 CSS 코드를 추가하세요:
\nbody { padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
이러한 기본 JavaScript 및 CSS 구성을 따르면 원활하고 즐거운 사용자 경험을 제공하는 네이티브 앱처럼 보이고 느껴지는 웹 앱을 만들 수 있습니다.
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,1],"slug":[0,"네이티브-앱-모양을-위한-기본-js-및-css-구성"],"text":[0,"네이티브 앱 모양을 위한 기본 JS 및 CSS 구성"]}],[0,{"depth":[0,2],"slug":[0,"호버-효과-비활성화"],"text":[0,"호버 효과 비활성화"]}],[0,{"depth":[0,2],"slug":[0,"링크-미리보기-비활성화"],"text":[0,"링크 미리보기 비활성화"]}],[0,{"depth":[0,2],"slug":[0,"선택-비활성화"],"text":[0,"선택 비활성화"]}],[0,{"depth":[0,2],"slug":[0,"확대축소-비활성화"],"text":[0,"확대/축소 비활성화"]}],[0,{"depth":[0,2],"slug":[0,"안전-css-영역-추가"],"text":[0,"안전 CSS 영역 추가"]}],[0,{"depth":[0,2],"slug":[0,"추가-팁"],"text":[0,"추가 팁"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"basic-js-css-config-for-native-app-look"],"title":[0,"ネイティブアプリのような見た目を実現するための基本的なJSとCSS設定"],"description":[0,"Pelajari cara mengkonfigurasi aplikasi web Anda dengan pengaturan JavaScript dan CSS dasar untuk membuatnya terlihat dan terasa seperti aplikasi native, termasuk menonaktifkan efek hover."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[3,"2023-06-05T00:00:00.000Z"],"updated_at":[3,"2023-06-05T00:00:00.000Z"],"head_image":[0,"/native_app_look.webp"],"head_image_alt":[0,"네이티브 앱 모양 일러스트레이션"],"keywords":[0,"tailwind css, css, mobile design, mobile app development"],"tag":[0,"Web Development"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/building-a-native-mobile-app-with-nextjs-and-capacitor.md"],"data":[0,{"slug":[0,"building-a-native-mobile-app-with-nextjs-and-capacitor"],"title":[0,"Membangun Aplikasi Mobile Native dengan Next.js 14 dan Capacitor: Panduan Langkah demi Langkah 2024"],"description":[0,"Temukan dalam panduan lengkap ini cara membuat aplikasi mobile native dengan Next.js 14 dan Capacitor. Pelajari praktik terbaik dan teknik terbaru untuk mengembangkan aplikasi mobile yang kuat dan kaya fitur."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[0,"2023-02-21T00:00:00.000Z"],"updated_at":[0,"2024-09-19T00:00:00.000Z"],"head_image":[0,"/next_capgo.webp"],"head_image_alt":[0,"Next.js 14와 Capacitor 일러스트레이션"],"keywords":[0,"Next.js 14, Capacitor, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Tutorial"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,"update-your-capacitor-apps-seamlessly-using-capacitor-updater"]}],"body":[0,"## 소개\n\n이 튜토리얼에서는 2024년 [Nextjs](https://nextjsorg/) 14와 [Capacitor](https://capacitorjscom/)의 강력한 조합을 사용하여 네이티브 모바일 앱을 만드는 방법을 살펴보겠습니다. 이러한 최신 기술을 활용하여 고성능의 기능이 풍부한 모바일 애플리케이션을 쉽게 구축할 수 있습니다. 또한 [Konsta UI](https://konstauicom/)와 Tailwind CSS를 사용하여 모바일 UI를 향상시키는 방법도 보여드리겠습니다(선택 사항).\n\n인기 있는 React 프레임워크인 Nextjs는 웹 애플리케이션 구축을 위한 견고한 기반을 제공하며, Capacitor를 사용하면 React Native와 같은 새로운 기술을 배우지 않고도 Nextjs 앱을 네이티브 모바일 앱으로 변환할 수 있습니다. 이 튜토리얼에서는 새로운 Nextjs 앱 설정부터 시작하여 Capacitor를 통합하여 네이티브 모바일 경험을 만드는 과정을 안내해 드리겠습니다.\n\n### Nextjs와 Capacitor 사용의 이점\n\n- **코드 재사용성**: Nextjs를 사용하면 재사용 가능한 컴포넌트를 작성하고 웹과 모바일 앱 간에 코드를 공유할 수 있어 개발 시간과 노력을 절약할 수 있습니다.\n- **성능**: Nextjs는 서버 사이드 렌더링과 코드 분할과 같은 내장된 성능 최적화를 제공하여 빠른 로딩 시간과 부드러운 사용자 경험을 보장합니다.\n- **네이티브 기능**: Capacitor는 카메라, 위치 정보 등 네이티브 디바이스 기능에 대한 접근을 제공하여 기능이 풍부한 모바일 앱을 구축할 수 있게 합니다.\n- **단순화된 개발**: Capacitor를 사용하면 친숙한 웹 기술을 사용하여 모바일 앱을 개발하고 테스트할 수 있어 학습 곡선을 낮추고 개발 프로세스를 간소화할 수 있습니다.\n\n## Nextjs 앱 준비하기\n\n시작하려면 `create-next-app` 명령을 사용하여 새로운 Nextjs 애플리케이션을 만들어보겠습니다:\n\n[[CODE_BLOCK]]\n\n이 명령은 최신 버전에 대한 권장 구성으로 빈 Nextjs 프로젝트를 설정합니다.\n\n다음으로, 프로젝트 디렉토리로 이동합니다:\n\n[[CODE_BLOCK]]\n\n네이티브 모바일 앱을 만들기 위해서는 Nextjs 프로젝트의 정적 내보내기를 생성해야 합니다. `package.json` 파일을 업데이트하여 프로젝트를 빌드하고 내보내기 위한 스크립트를 포함시킵니다:\n\n[[CODE_BLOCK]]\n\n`npm run static` 명령을 실행하면 이미지 최적화 비호환성으로 인해 오류가 발생할 수 있습니다. 이를 해결하기 위해 `next.config.js` 파일을 열고 다음과 같이 수정합니다:\n\n[[CODE_BLOCK]]\n\n이제 `npm run static`을 실행하면 오류 없이 작동하며, 프로젝트 루트에 새로운 `out` 폴더가 생성됩니다. 이 폴더는 다음 단계에서 Capacitor가 사용하게 됩니다.\n\n## Nextjs 14 앱에 Capacitor 추가하기\n\nNextjs 앱을 네이티브 모바일 컨테이너로 패키징하려면 다음 단계를 따르세요:\n\n1. [Capacitor CLI](https://capacitorjscom/docs/cli/)를 개발 의존성으로 설치합니다:\n\n[[CODE_BLOCK]]\n\n2. Nextjs 프로젝트에서 Capacitor를 초기화합니다:\n\n[[CODE_BLOCK]]\n\n초기화 과정에서 앱 이름과 번들 ID에 대한 기본값을 수락하려면 \"Enter\"를 누르면 됩니다.\n\n3. 필요한 Capacitor 패키지를 설치합니다:\n\n[[CODE_BLOCK]]\n\n4. 네이티브 플랫폼을 추가합니다:\n\n[[CODE_BLOCK]]\n\nCapacitor는 프로젝트 루트에 각 플랫폼(`ios`와 `android`)에 대한 폴더를 생성합니다. 이 폴더들은 각각 iOS와 Android용 네이티브 프로젝트를 포함합니다.\n\nAndroid 프로젝트에 접근하고 빌드하려면 [Android Studio](https://developerandroidcom/studio)가 설치되어 있어야 합니다. iOS 개발의 경우 [Xcode](https://developerapplecom/xcode/)가 설치된 Mac이 필요합니다.\n\n5. Capacitor 구성:\n\n`capacitor.config.ts` 파일을 열고 `webDir` 속성을 Nextjs 빌드의 출력 디렉토리를 가리키도록 업데이트합니다:\n\n[[CODE_BLOCK]]\n\n6. 프로젝트 빌드 및 동기화:\n\n[[CODE_BLOCK]]\n\n`npm run static` 명령은 Nextjs 프로젝트를 빌드하고 정적 파일을 내보내며, `npx cap sync`는 웹 코드를 네이티브 플랫폼과 동기화합니다.## 네이티브 앱 빌드 및 배포하기\n\n네이티브 모바일 앱을 빌드하고 배포하려면 다음 단계를 따르세요:\niOS 앱을 개발하려면 **Xcode**가 설치되어 있어야 하고, Android 앱을 개발하려면 **Android Studio**가 설치되어 있어야 합니다. 또한 앱스토어에 앱을 배포하려면 iOS의 경우 Apple Developer Program에, Android의 경우 Google Play Console에 등록해야 합니다.\n\n1. 네이티브 프로젝트 열기:\n\niOS의 경우:\n[[CODE_BLOCK]]\n\nAndroid의 경우:\n[[CODE_BLOCK]]\n\n2. 앱 빌드 및 실행:\n\n\n\n- Android Studio에서 프로젝트가 준비될 때까지 기다린 다음 \"실행\" 버튼을 클릭하여 연결된 기기나 에뮬레이터에 앱을 배포합니다\n\n\n- Xcode에서 실제 기기에 앱을 배포하기 위해 서명 계정을 설정합니다. 이전에 하지 않았다면 Xcode가 과정을 안내할 것입니다 (Apple Developer Program 등록이 필요합니다). 설정이 완료되면 \"실행\" 버튼을 클릭하여 연결된 기기에서 앱을 실행하세요\n\n축하합니다! Nextjs 웹 앱을 모바일 기기에 성공적으로 배포했습니다.\n\n[[HTML_TAG]]\n [[HTML_TAG]]\n[[HTML_TAG]]\n하지만 개발 중에는 더 빠른 방법이 있습니다.\n\n## Capacitor 실시간 리로드\n\n개발 중에는 실시간 리로딩을 활용하여 모바일 기기에서 즉시 변경사항을 확인할 수 있습니다. 이 기능을 활성화하려면 다음 단계를 따르세요:\n\n1. 로컬 IP 주소 찾기:\n\n- macOS에서는 터미널에서 다음 명령어를 실행하세요:\n [[CODE_BLOCK]]\n\n- Windows에서는 다음을 실행하세요:\n [[CODE_BLOCK]]\n 출력된 결과에서 IPv4 주소를 찾으세요\n\n2. `capacitor.config.ts` 파일을 업데이트하여 서버 설정을 포함시키세요:\n\n[[CODE_BLOCK]]\n\n`YOUR_IP_ADDRESS`를 로컬 IP 주소로 교체하세요\n\n3. 네이티브 프로젝트에 변경사항 적용하기:\n\n[[CODE_BLOCK]]\n\n`copy` 명령어는 전체 프로젝트를 업데이트하지 않고 웹 폴더와 설정 변경사항만 네이티브 프로젝트에 복사합니다\n\n4. Android Studio나 Xcode를 사용하여 기기에서 앱을 다시 빌드하고 실행하세요\n\n이제 Nextjs 앱을 변경할 때마다 모바일 앱이 자동으로 리로드되어 변경사항이 반영됩니다\n\n참고: 새로운 플러그인을 설치하거나 네이티브 파일을 변경할 경우, 실시간 리로딩은 웹 코드 변경에만 적용되므로 네이티브 프로젝트를 다시 빌드해야 합니다\n\n## Capacitor 플러그인 사용하기\n\nCapacitor 플러그인을 사용하면 Nextjs 앱에서 네이티브 기기 기능에 접근할 수 있습니다. [Share 플러그인](https://capacitorjs.com/docs/apis/share/)을 예시로 살펴보겠습니다:\n\n1. Share 플러그인 설치:\n\n[[CODE_BLOCK]]\n\n2. Share 플러그인을 사용하도록 `pages/index.js` 파일 업데이트:\n\n[[CODE_BLOCK]]\n\n3. 네이티브 프로젝트와 변경사항 동기화:\n\n앞서 언급했듯이 새로운 플러그인을 설치할 때는 동기화 작업을 수행하고 앱을 기기에 다시 배포해야 합니다. 다음 명령어를 실행하세요:\n\n[[CODE_BLOCK]]\n\n4. 기기에서 앱을 다시 빌드하고 실행하세요\n\n이제 \"Share now!\" 버튼을 클릭하면 네이티브 공유 대화상자가 나타나 다른 앱과 콘텐츠를 공유할 수 있습니다\n\n[[HTML_TAG]]\n [[HTML_TAG]]\n[[HTML_TAG]]\n\n웹 앱용 제가 가장 좋아하는 UI 컴포넌트 라이브러리인 Nextjs를 사용하여 버튼을 더 모바일 친화적으로 만들 수 있습니다.\n\n## Konsta UI 추가하기\n\n저는 수년간 [Ionic](https://ionicframework.com/)으로 멋진 크로스 플랫폼 애플리케이션을 만들어왔고 그것은 수년간 최고의 선택 중 하나였습니다.\n하지만 이제는 더 이상 추천하지 않습니다. Nextjs와 통합하기가 매우 까다롭고 이미 [tailwindcss](https://tailwindcss.com/)가 있을 때는 그다지 가치가 없습니다.\n\niOS와 Android 특유의 스타일링에 맞춰 정말 멋진 모바일 UI를 원한다면 Konsta UI를 추천합니다.\n\n[tailwind가 이미 설치되어 있어야 합니다](https://tailwindcss.com/docs/guides/nextjs/)\nNextjs 앱의 모바일 UI를 개선하기 위해 [Konsta UI](https://konsta.ui.com/)를 사용할 수 있습니다. iOS와 Android 스타일링에 맞춰지는 모바일 친화적 UI 컴포넌트 라이브러리입니다. Konsta UI를 통합하려면 다음 단계를 따르세요:\n\n1."],"filePath":[0,"src/content/blog/ko/building-a-native-mobile-app-with-nextjs-and-capacitor.md"],"digest":[0,"0dc45a806b7b72d3"],"rendered":[0,{"html":[0,"이 튜토리얼에서는 2024년 Nextjs 14와 Capacitor의 강력한 조합을 사용하여 네이티브 모바일 앱을 만드는 방법을 살펴보겠습니다. 이러한 최신 기술을 활용하여 고성능의 기능이 풍부한 모바일 애플리케이션을 쉽게 구축할 수 있습니다. 또한 Konsta UI와 Tailwind CSS를 사용하여 모바일 UI를 향상시키는 방법도 보여드리겠습니다(선택 사항).
\n인기 있는 React 프레임워크인 Nextjs는 웹 애플리케이션 구축을 위한 견고한 기반을 제공하며, Capacitor를 사용하면 React Native와 같은 새로운 기술을 배우지 않고도 Nextjs 앱을 네이티브 모바일 앱으로 변환할 수 있습니다. 이 튜토리얼에서는 새로운 Nextjs 앱 설정부터 시작하여 Capacitor를 통합하여 네이티브 모바일 경험을 만드는 과정을 안내해 드리겠습니다.
\n시작하려면 create-next-app
명령을 사용하여 새로운 Nextjs 애플리케이션을 만들어보겠습니다:
[[CODE_BLOCK]]
\n이 명령은 최신 버전에 대한 권장 구성으로 빈 Nextjs 프로젝트를 설정합니다.
\n다음으로, 프로젝트 디렉토리로 이동합니다:
\n[[CODE_BLOCK]]
\n네이티브 모바일 앱을 만들기 위해서는 Nextjs 프로젝트의 정적 내보내기를 생성해야 합니다. package.json
파일을 업데이트하여 프로젝트를 빌드하고 내보내기 위한 스크립트를 포함시킵니다:
[[CODE_BLOCK]]
\nnpm run static
명령을 실행하면 이미지 최적화 비호환성으로 인해 오류가 발생할 수 있습니다. 이를 해결하기 위해 next.config.js
파일을 열고 다음과 같이 수정합니다:
[[CODE_BLOCK]]
\n이제 npm run static
을 실행하면 오류 없이 작동하며, 프로젝트 루트에 새로운 out
폴더가 생성됩니다. 이 폴더는 다음 단계에서 Capacitor가 사용하게 됩니다.
Nextjs 앱을 네이티브 모바일 컨테이너로 패키징하려면 다음 단계를 따르세요:
\n[[CODE_BLOCK]]
\n[[CODE_BLOCK]]
\n초기화 과정에서 앱 이름과 번들 ID에 대한 기본값을 수락하려면 “Enter”를 누르면 됩니다.
\n[[CODE_BLOCK]]
\n[[CODE_BLOCK]]
\nCapacitor는 프로젝트 루트에 각 플랫폼(ios
와 android
)에 대한 폴더를 생성합니다. 이 폴더들은 각각 iOS와 Android용 네이티브 프로젝트를 포함합니다.
Android 프로젝트에 접근하고 빌드하려면 Android Studio가 설치되어 있어야 합니다. iOS 개발의 경우 Xcode가 설치된 Mac이 필요합니다.
\ncapacitor.config.ts
파일을 열고 webDir
속성을 Nextjs 빌드의 출력 디렉토리를 가리키도록 업데이트합니다:
[[CODE_BLOCK]]
\n[[CODE_BLOCK]]
\nnpm run static
명령은 Nextjs 프로젝트를 빌드하고 정적 파일을 내보내며, npx cap sync
는 웹 코드를 네이티브 플랫폼과 동기화합니다.## 네이티브 앱 빌드 및 배포하기
네이티브 모바일 앱을 빌드하고 배포하려면 다음 단계를 따르세요:\niOS 앱을 개발하려면 Xcode가 설치되어 있어야 하고, Android 앱을 개발하려면 Android Studio가 설치되어 있어야 합니다. 또한 앱스토어에 앱을 배포하려면 iOS의 경우 Apple Developer Program에, Android의 경우 Google Play Console에 등록해야 합니다.
\niOS의 경우:\n[[CODE_BLOCK]]
\nAndroid의 경우:\n[[CODE_BLOCK]]
\nAndroid Studio에서 프로젝트가 준비될 때까지 기다린 다음 “실행” 버튼을 클릭하여 연결된 기기나 에뮬레이터에 앱을 배포합니다\n
Xcode에서 실제 기기에 앱을 배포하기 위해 서명 계정을 설정합니다. 이전에 하지 않았다면 Xcode가 과정을 안내할 것입니다 (Apple Developer Program 등록이 필요합니다). 설정이 완료되면 “실행” 버튼을 클릭하여 연결된 기기에서 앱을 실행하세요
\n축하합니다! Nextjs 웹 앱을 모바일 기기에 성공적으로 배포했습니다.
\n[[HTML_TAG]]\n[[HTML_TAG]]\n[[HTML_TAG]]\n하지만 개발 중에는 더 빠른 방법이 있습니다.
\n개발 중에는 실시간 리로딩을 활용하여 모바일 기기에서 즉시 변경사항을 확인할 수 있습니다. 이 기능을 활성화하려면 다음 단계를 따르세요:
\nmacOS에서는 터미널에서 다음 명령어를 실행하세요:\n[[CODE_BLOCK]]
\nWindows에서는 다음을 실행하세요:\n[[CODE_BLOCK]]\n출력된 결과에서 IPv4 주소를 찾으세요
\ncapacitor.config.ts
파일을 업데이트하여 서버 설정을 포함시키세요:[[CODE_BLOCK]]
\nYOUR_IP_ADDRESS
를 로컬 IP 주소로 교체하세요
[[CODE_BLOCK]]
\ncopy
명령어는 전체 프로젝트를 업데이트하지 않고 웹 폴더와 설정 변경사항만 네이티브 프로젝트에 복사합니다
이제 Nextjs 앱을 변경할 때마다 모바일 앱이 자동으로 리로드되어 변경사항이 반영됩니다
\n참고: 새로운 플러그인을 설치하거나 네이티브 파일을 변경할 경우, 실시간 리로딩은 웹 코드 변경에만 적용되므로 네이티브 프로젝트를 다시 빌드해야 합니다
\nCapacitor 플러그인을 사용하면 Nextjs 앱에서 네이티브 기기 기능에 접근할 수 있습니다. Share 플러그인을 예시로 살펴보겠습니다:
\n[[CODE_BLOCK]]
\npages/index.js
파일 업데이트:[[CODE_BLOCK]]
\n앞서 언급했듯이 새로운 플러그인을 설치할 때는 동기화 작업을 수행하고 앱을 기기에 다시 배포해야 합니다. 다음 명령어를 실행하세요:
\n[[CODE_BLOCK]]
\n이제 “Share now!” 버튼을 클릭하면 네이티브 공유 대화상자가 나타나 다른 앱과 콘텐츠를 공유할 수 있습니다
\n[[HTML_TAG]]\n[[HTML_TAG]]\n[[HTML_TAG]]
\n웹 앱용 제가 가장 좋아하는 UI 컴포넌트 라이브러리인 Nextjs를 사용하여 버튼을 더 모바일 친화적으로 만들 수 있습니다.
\n저는 수년간 Ionic으로 멋진 크로스 플랫폼 애플리케이션을 만들어왔고 그것은 수년간 최고의 선택 중 하나였습니다.\n하지만 이제는 더 이상 추천하지 않습니다. Nextjs와 통합하기가 매우 까다롭고 이미 tailwindcss가 있을 때는 그다지 가치가 없습니다.
\niOS와 Android 특유의 스타일링에 맞춰 정말 멋진 모바일 UI를 원한다면 Konsta UI를 추천합니다.
\ntailwind가 이미 설치되어 있어야 합니다\nNextjs 앱의 모바일 UI를 개선하기 위해 Konsta UI를 사용할 수 있습니다. iOS와 Android 스타일링에 맞춰지는 모바일 친화적 UI 컴포넌트 라이브러리입니다. Konsta UI를 통합하려면 다음 단계를 따르세요:
\nReact와 Capacitor를 사용하여 네이티브 모바일 개발로 전환하는 방법을 이 튜토리얼에서 알아보겠습니다. 선택적으로 Tailwind CSS와 함께 Konsta UI를 추가하여 모바일 UI를 개선할 수도 있습니다.
\nCapacitor를 사용하면 큰 수정이나 React Native와 같은 새로운 기술을 배우지 않고도 React 웹 애플리케이션을 네이티브 모바일 앱으로 쉽게 변환할 수 있습니다.
\n간단한 몇 단계만으로 대부분의 React 애플리케이션을 모바일 앱으로 변환할 수 있습니다.
\n이 튜토리얼에서는 새로운 React 앱으로 시작하여 Capacitor를 통해 네이티브 모바일 앱으로 전환하는 과정을 안내합니다. 추가로 Konsta UI를 사용하여 Tailwind CSS로 모바일 UI를 개선할 수도 있습니다.
\nCapacitorJS는 혁신적입니다! 어떤 웹 프로젝트에도 쉽게 통합할 수 있으며, 애플리케이션을 네이티브 웹뷰로 래핑하여 Xcode와 Android Studio 프로젝트를 자동으로 생성합니다. 또한 플러그인을 통해 JS 브리지를 통해 카메라와 같은 네이티브 기기 기능에 접근할 수 있습니다.
\nCapacitor를 사용하면 복잡한 설정이나 가파른 학습 곡선 없이 훌륭한 네이티브 모바일 앱을 얻을 수 있습니다. 간단한 API와 간소화된 기능으로 프로젝트에 쉽게 통합할 수 있습니다. Capacitor로 완전히 기능하는 네이티브 앱을 만드는 것이 얼마나 쉬운지 놀라실 것입니다!
\nReact 애플리케이션을 시작하는 다양한 방법이 있지만, 이 튜토리얼에서는 빈 React 애플리케이션을 제공하는 가장 간단한 방법을 사용하겠습니다:
\n[[CODE_BLOCK]]
\n네이티브 모바일 앱을 만들기 위해서는 프로젝트의 export가 필요합니다. 따라서 React 프로젝트를 빌드하고 내보내는 데 사용할 수 있는 간단한 스크립트를 package.json에 추가해 보겠습니다:
\n[[CODE_BLOCK]]
\n이제 npm run build
를 실행하면 프로젝트 루트에 새로운 out 폴더가 생성될 것입니다.
이 폴더는 나중에 Capacitor에서 사용되지만, 지금은 올바르게 설정해야 합니다.
\n웹 앱을 네이티브 모바일 컨테이너로 패키징하기 위해서는 몇 가지 초기 단계를 따라야 하지만, 이후에는 단순히 sync
명령어 실행만으로 충분합니다.
먼저 개발 의존성으로 Capacitor CLI를 설치하고 프로젝트에 설정할 수 있습니다. 설정 중에 이름과 번들 ID에 대해 기본값을 수락하려면 “enter”를 누르면 됩니다.
\n다음으로 코어 패키지와 iOS 및 Android 플랫폼용 관련 패키지를 설치해야 합니다.
\n마지막으로 플랫폼을 추가하면 Capacitor가 프로젝트 루트에 각 플랫폼용 폴더를 생성합니다:
\n[[CODE_BLOCK]]
\n이제 React 프로젝트에 새로운 ios와 android 폴더가 보일 것입니다.
\n이것들은 실제 네이티브 프로젝트입니다!
\n나중에 Android 프로젝트에 접근하려면 Android Studio를 설치해야 합니다. iOS의 경우 Mac이 필요하며 Xcode를 설치해야 합니다.
\n또한 프로젝트에서 capacitor.config.ts 파일을 찾을 수 있는데, 이는 동기화 중에 사용되는 기본적인 Capacitor 설정을 포함합니다. 주의해야 할 유일한 것은 webDir로, 빌드 명령어의 결과물을 가리켜야 합니다. 현재는 부정확합니다.
\n이를 수정하기 위해 capacitor.config.json 파일을 열고 webDir을 업데이트하세요:
\n[[CODE_BLOCK]]
\n다음 명령어를 실행하여 시도해볼 수 있습니다:
\n[[CODE_BLOCK]]
\n첫 번째 명령어 npm run build
는 React 프로젝트를 빌드하고 정적 빌드를 내보냅니다.
두 번째 명령어 npx cap sync
는 모든 웹 코드를 네이티브 플랫폼의 올바른 위치에 동기화하여 앱에서 표시될 수 있도록 합니다.
또한 sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로, 새로운 Capacitor plugins를 설치할 때 npx cap sync
를 다시 실행해야 합니다.
강력하고 현대적인 앱 개발 플랫폼을 찾고 계시다면, Capacitor가 완벽한 솔루션입니다. 노후화되고 구식이 된 Cordova와 달리, Capacitor는 최신 네이티브 플랫폼과 언어 발전을 활용하여 최상의 사용자 경험을 제공합니다.
\nCapgo가 Cordova를 지원하지 않는 이유는 다음과 같습니다:
\nCordova는 오래되었고 더 이상 발전하지 않습니다: Cordova는 오랫동안 존재해왔으며, 한때는 훌륭한 플랫폼이었지만 이제는 발전이 멈췄습니다. 이는 Cordova가 더 이상 최신 네이티브 플랫폼과 언어 발전을 따라갈 수 없다는 것을 의미합니다.
\nCordova는 최신 네이티브 플랫폼과 언어 발전을 지원하지 않습니다: Cordova는 Kotlin과 Swift와 같은 최신 네이티브 플랫폼과 언어 발전을 기본적으로 지원하지 않습니다. 이는 Cordova가 사용자에게 최신의 뛰어난 앱 개발 경험을 제공할 수 없다는 것을 의미합니다.
\nCapacitor: 더 현대적인 대안: Capgo는 Cordova의 더 현대적인 대안으로 Capacitor를 채택했습니다. Capacitor는 외부 라이브러리의 포함을 허용하므로, Capgo는 최고의 라이브러리를 사용하고 최신 상태로 유지할 수 있습니다. 이는 더 강력하고 안정적인 앱 개발 플랫폼으로 이어집니다.
\nCapgo가 Cordova를 지원하지 않는 또 다른 이유는 부트스트래핑 회사로서 Cordova와 동일한 수준의 품질과 기능을 유지하는 것이 현실적으로 불가능하기 때문입니다. 제품의 최고 품질을 유지하기 위해 Capgo는 가장 현대적이고 효율적인 도구 활용에 집중합니다.
\n합리적인 가격으로 실시간 업데이트를 받고 싶다면, Capacitor로 업그레이드하는 것이 최선의 선택입니다. 이는 앱의 성능과 사용자 경험을 향상시킬 뿐만 아니라, 미래에도 대비할 수 있게 만들 것입니다.
\n현대적인 앱 개발의 혜택을 놓치지 마세요. 오늘 Capacitor로 업그레이드하여 실시간 업데이트와 앱의 밝은 미래를 확보하세요.
\n하지만 Capgo로의 전환이 어려워 보일 수 있습니다. 공식 Capacitor 마이그레이션 튜토리얼은 일주일이 걸릴 수 있으며, 네이티브 코딩 경험이 없다면 이해하기 어려울 수 있습니다. Capacitor는 네이티브 플랫폼의 기본에 대한 확실한 이해가 필요하며, 이는 일부에게는 부담스러울 수 있습니다.
\n하지만 걱정하지 마세요! 더 효율적이고 스트레스 없는 선택지가 있습니다. Capgo의 제작자인 저를 고용하시면, 단 일주일 만에 앱을 업그레이드할 수 있습니다. 마이그레이션을 처리할 뿐만 아니라, 귀하의 팀에게 네이티브 플랫폼의 기초를 가르쳐 앱을 계속해서 쉽게 개발하고 유지할 수 있도록 도와드릴 것입니다.
\n결론적으로, Capgo로 앱을 업그레이드하는 것은 최고의 현대적인 앱 개발 플랫폼을 사용하는 쉽고 효율적인 방법입니다. 저를 고용하시면, 시간을 절약하고 좌절을 피하며, 네이티브 플랫폼에 대한 더 깊은 이해를 얻을 수 있습니다.
"],"metadata":[0,{"headings":[1,[]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"do-capgo-work-for-cordova"],"title":[0,"Capgoがコルドバをサポートしない理由:ライブアップデートにアクセスするためのアプリのアップグレード"],"description":[0,"In diesem Leitfaden teile ich meine Erfahrungen mit Capgo und Cordova."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[3,"2023-01-29T00:00:00.000Z"],"updated_at":[3,"2023-01-29T00:00:00.000Z"],"head_image":[0,"/cordova.webp"],"head_image_alt":[0,"Cordova Dev가 앱을 업데이트하려고 하고 있습니다."],"keywords":[0,"Cordova, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Migration"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/optimise-your-images-for-updates.md"],"data":[0,{"slug":[0,"optimise-your-images-for-updates"],"title":[0,"이미지 업데이트를 위해 최적화하기"],"description":[0,"사용자가 더 빠르게 업데이트를 받을 수 있도록 실시간 업데이트를 위한 이미지를 최적화하는 방법."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[0,"2023-01-23T00:00:00.000Z"],"updated_at":[0,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/convert_webp.webp"],"head_image_alt":[0,"웹p 그림으로 변환"],"keywords":[0,"mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Optimisation"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"body":[0,"WebP는 JPEG와 비슷하거나 더 나은 시각적 품질을 유지하면서 파일 크기를 크게 절약할 수 있는 현대적인 이미지 형식입니다. 모바일 앱에서 JPEG 이미지를 WebP로 변환하면 앱의 크기를 줄일 수 있어 사용자에게 더 빠른 다운로드 시간과 향상된 성능을 제공할 수 있습니다.\n\nWebP는 Android와 iOS를 포함한 대부분의 주요 모바일 플랫폼과 기기에서 잘 지원됩니다. JPEG와 달리 WebP는 더 작은 파일 크기로 더 우수한 이미지 품질을 제공하여 더 빠른 다운로드 시간, 적은 데이터 사용량, 더 나은 사용자 경험을 제공합니다. 이는 데이터 사용량과 다운로드 시간이 주요 관심사인 셀룰러 네트워크에서 사용되는 모바일 앱에서 특히 중요합니다.\n\n이미지를 WebP로 변환할 때 사용할 수 있는 몇 가지 옵션이 있습니다. 한 가지 인기 있는 옵션은 앱의 빌드 프로세스에 쉽게 통합할 수 있는 `cwebp`와 같은 명령줄 도구를 사용하는 것입니다. 다른 옵션으로는 이미지를 수동으로 변환하는 데 사용할 수 있는 [Android Studio](https://sites.google.com/a/android.com/tools/tech-docs/webp/)에서 WebP로 변환하는 것입니다. 콘텐츠 관리 시스템(CMS)용 플러그인이나 Kraken.io와 같은 자동화된 서비스를 사용할 수도 있습니다.\n\n이미지를 WebP로 변환한 후에는 앱의 성능이 개선되었는지 확인하기 위해 테스트하는 것이 중요합니다. [Firebase Performance Monitoring 플러그인](https://github.com/capawesome-team/capacitor-firebase/tree/main/packages/performance/) 또는 다른 성능 테스트 도구를 사용하여 앱의 성능을 측정할 수 있습니다. 또한 WebP 변환이 앱의 성능에 어떤 영향을 미치는지 더 정확한 그림을 얻기 위해 다양한 기기와 네트워크에서 앱을 테스트해야 합니다.\n\n앱의 성능을 개선하는 것 외에도 이미지를 WebP로 변환하면 앱의 전반적인 사용자 경험에도 긍정적인 영향을 미칠 수 있습니다. 더 빠른 다운로드 시간과 적은 데이터 사용량으로 사용자는 앱에 대해 더 긍정적인 경험을 할 가능성이 높아지며, 이는 참여도와 유지율 증가로 이어질 수 있습니다.\n\n전반적으로 이미지를 WebP로 변환하는 것은 모바일 앱의 자산을 최적화하고 앱의 성능을 개선하는 효과적인 방법이 될 수 있습니다. 이는 앱의 전반적인 사용자 경험에 큰 영향을 미칠 수 있는 간단하고 명확한 프로세스입니다. 이미지를 WebP로 변환하는 시간을 투자함으로써 사용자에게 더 나은 경험을 제공하고 잠재적으로 참여도와 유지율을 높일 수 있을 것입니다."],"filePath":[0,"src/content/blog/ko/optimise-your-images-for-updates.md"],"digest":[0,"50b81071a532cec4"],"rendered":[0,{"html":[0,"WebP는 JPEG와 비슷하거나 더 나은 시각적 품질을 유지하면서 파일 크기를 크게 절약할 수 있는 현대적인 이미지 형식입니다. 모바일 앱에서 JPEG 이미지를 WebP로 변환하면 앱의 크기를 줄일 수 있어 사용자에게 더 빠른 다운로드 시간과 향상된 성능을 제공할 수 있습니다.
\nWebP는 Android와 iOS를 포함한 대부분의 주요 모바일 플랫폼과 기기에서 잘 지원됩니다. JPEG와 달리 WebP는 더 작은 파일 크기로 더 우수한 이미지 품질을 제공하여 더 빠른 다운로드 시간, 적은 데이터 사용량, 더 나은 사용자 경험을 제공합니다. 이는 데이터 사용량과 다운로드 시간이 주요 관심사인 셀룰러 네트워크에서 사용되는 모바일 앱에서 특히 중요합니다.
\n이미지를 WebP로 변환할 때 사용할 수 있는 몇 가지 옵션이 있습니다. 한 가지 인기 있는 옵션은 앱의 빌드 프로세스에 쉽게 통합할 수 있는 cwebp
와 같은 명령줄 도구를 사용하는 것입니다. 다른 옵션으로는 이미지를 수동으로 변환하는 데 사용할 수 있는 Android Studio에서 WebP로 변환하는 것입니다. 콘텐츠 관리 시스템(CMS)용 플러그인이나 Kraken.io와 같은 자동화된 서비스를 사용할 수도 있습니다.
이미지를 WebP로 변환한 후에는 앱의 성능이 개선되었는지 확인하기 위해 테스트하는 것이 중요합니다. Firebase Performance Monitoring 플러그인 또는 다른 성능 테스트 도구를 사용하여 앱의 성능을 측정할 수 있습니다. 또한 WebP 변환이 앱의 성능에 어떤 영향을 미치는지 더 정확한 그림을 얻기 위해 다양한 기기와 네트워크에서 앱을 테스트해야 합니다.
\n앱의 성능을 개선하는 것 외에도 이미지를 WebP로 변환하면 앱의 전반적인 사용자 경험에도 긍정적인 영향을 미칠 수 있습니다. 더 빠른 다운로드 시간과 적은 데이터 사용량으로 사용자는 앱에 대해 더 긍정적인 경험을 할 가능성이 높아지며, 이는 참여도와 유지율 증가로 이어질 수 있습니다.
\n전반적으로 이미지를 WebP로 변환하는 것은 모바일 앱의 자산을 최적화하고 앱의 성능을 개선하는 효과적인 방법이 될 수 있습니다. 이는 앱의 전반적인 사용자 경험에 큰 영향을 미칠 수 있는 간단하고 명확한 프로세스입니다. 이미지를 WebP로 변환하는 시간을 투자함으로써 사용자에게 더 나은 경험을 제공하고 잠재적으로 참여도와 유지율을 높일 수 있을 것입니다.
"],"metadata":[0,{"headings":[1,[]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"optimise-your-images-for-updates"],"title":[0,"이미지 업데이트를 위해 최적화하기"],"description":[0,"사용자가 더 빠르게 업데이트를 받을 수 있도록 실시간 업데이트를 위한 이미지를 최적화하는 방법."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[3,"2023-01-23T00:00:00.000Z"],"updated_at":[3,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/convert_webp.webp"],"head_image_alt":[0,"웹p 그림으로 변환"],"keywords":[0,"mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Optimisation"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/alternative-to-expo.md"],"data":[0,{"slug":[0,"alternative-to-expo"],"title":[0,"Alternatif untuk Expo Live Update"],"description":[0,"Expo의 실시간 업데이트의 편리함을 제공하면서도 React Native에 국한되지 않는 모바일 앱 개발 플랫폼을 찾고 계신가요? Capgo를 확인해보세요."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[0,"2022-12-14T00:00:00.000Z"],"updated_at":[0,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/expo_alternative.webp"],"head_image_alt":[0,"Expo 대체 설명"],"keywords":[0,"Expo, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Alternatives"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"body":[0,"Expo Live Update는 개발자가 사용자가 앱의 새 버전을 다운로드할 필요 없이 실시간으로 앱 업데이트를 배포할 수 있게 해주는 Expo 플랫폼의 기능입니다. 이는 개발자가 사용자에게 업데이트를 다운로드하고 설치하는 과정을 강요하지 않고도 앱의 콘텐츠와 기능을 빠르고 쉽게 업데이트할 수 있게 해주는 Capgo의 실시간 업데이트 기능과 유사합니다.\n\nExpo Live Update와 Capgo의 실시간 업데이트 기능은 모두 개발자가 새로운 앱 기능과 개선사항을 즉시 사용자에게 제공할 수 있도록 설계되었습니다. 이는 사용자가 새로운 기능과 개선사항을 즉시 이용할 수 있어 사용자 경험을 향상시키고 앱에 대한 참여도를 유지하는 데 도움이 될 수 있습니다.\n\n전반적으로 Expo Live Update와 Capgo의 실시간 업데이트 기능은 둘 다 개발자가 실시간으로 앱 업데이트를 배포할 수 있는 편리하고 사용자 친화적인 방법을 제공한다는 점에서 유사합니다. 개발자가 Expo Live Update 또는 Capgo의 실시간 업데이트 기능 중 어느 것을 선택할지는 특정 요구사항과 선호도, 그리고 앱 개발에 사용하는 도구와 기술에 따라 달라질 것입니다.\n\nExpo의 대안을 찾고 있는 모바일 앱 개발자라면 [Capgo](/register/)를 고려해볼 만합니다. [Capgo](/register/)는 Expo와 같은 많은 도구와 서비스를 제공하는 클라우드 기반 모바일 앱 개발 플랫폼이지만, 한 가지 중요한 차이점이 있습니다: [Capgo](/register/)는 모든 JavaScript 프레임워크와 함께 사용할 수 있는 반면, Expo는 React Native를 사용하여 구축된 앱으로 제한됩니다.\n\n이는 Capgo를 사용하면 개발자가 자신의 요구사항과 선호도에 가장 잘 맞는 프레임워크를 결정할 수 있는 자유가 있다는 것을 의미합니다. AngularJS, Vuejs 또는 다른 JavaScript 프레임워크를 선호하든, [Capgo](/register/)를 사용하여 쉽게 앱을 구축, 테스트 및 배포할 수 있습니다.\n\n유연성 외에도 [Capgo](/register/)는 모바일 앱 개발을 위한 다양한 유용한 도구와 서비스를 제공합니다. 예를 들어, CI/CD 통합, 네이티브 기능을 위한 플러그인, 네이티브 CI/CD 튜토리얼, 그리고 분석 기능을 제공하여 개발자가 앱의 성능을 추적하고 사용자에게 원활한 실행을 보장할 수 있습니다.\n\n전반적으로 [Capgo](/register/)는 여러 JavaScript 프레임워크를 지원하는 추가적인 장점과 함께 Expo와 동일한 많은 기능과 이점을 제공하는 강력하고 유연한 대안입니다. 앱 개발 프로세스를 간소화하고 훌륭한 사용자 경험을 제공하는데 도움이 되는 플랫폼을 찾고 있다면, [Capgo](/register/)를 꼭 고려해보시기 바랍니다.\n\n## 기능 비교\n\n| 기능 | Capgo | Expo |\n| --- | --- | --- |\n| 실시간 업데이트 | ✅ | ✅ |\n| 업데이트 채널 | ✅ | ✅ |\n| 채널 버전 되돌리기/변경 | ✅ | ✅ |\n| 설치 통계 | ✅ | ❌ |\n| 테스트용 샌드박스 앱 | ✅ | ✅ |\n| React Native | ❌ | ✅ |\n| React | ✅ | ❌ |\n| Capacitor | ✅ | ❌ React-native만 지원 |\n| 합리적인 가격 | ✅ | ✅ |\n| 네이티브 빌드 | ❌ | ✅ |\n| 100% 오픈소스 | ✅ | ❌ |\n| 종단간 암호화 | ✅ | ❌ 암호화된 서명만 지원 |\n| CI/CD | ❌ 인기있는 도구에 대한 튜토리얼 제공 | ✅ |\n\n## 결론\n\nExpo는 React Native 개발자들을 위한 훌륭한 도구이지만, 유일한 선택지는 아닙니다. Expo의 대안을 찾고 계시다면, [Capgo](/register/)를 고려해보시는 것이 좋습니다. [Capgo](/register/)는 [Expo](https://expodev/)와 같은 많은 도구와 서비스를 제공하는 클라우드 기반 모바일 앱 개발 플랫폼이지만, 한 가지 중요한 차이점이 있습니다: [Capgo](/register/)는 모든 JavaScript 프레임워크와 함께 사용할 수 있는 반면, Expo는 React Native를 사용하여 구축된 앱으로 제한됩니다.\n\nCapgo가 더 나은 앱을 더 빠르게 구축하는데 어떤 도움이 되는지 알아보려면, [오늘 무료 계정에 가입](/register/)하세요."],"filePath":[0,"src/content/blog/ko/alternative-to-expo.md"],"digest":[0,"01e5c26f95e1d601"],"rendered":[0,{"html":[0,"Expo Live Update는 개발자가 사용자가 앱의 새 버전을 다운로드할 필요 없이 실시간으로 앱 업데이트를 배포할 수 있게 해주는 Expo 플랫폼의 기능입니다. 이는 개발자가 사용자에게 업데이트를 다운로드하고 설치하는 과정을 강요하지 않고도 앱의 콘텐츠와 기능을 빠르고 쉽게 업데이트할 수 있게 해주는 Capgo의 실시간 업데이트 기능과 유사합니다.
\nExpo Live Update와 Capgo의 실시간 업데이트 기능은 모두 개발자가 새로운 앱 기능과 개선사항을 즉시 사용자에게 제공할 수 있도록 설계되었습니다. 이는 사용자가 새로운 기능과 개선사항을 즉시 이용할 수 있어 사용자 경험을 향상시키고 앱에 대한 참여도를 유지하는 데 도움이 될 수 있습니다.
\n전반적으로 Expo Live Update와 Capgo의 실시간 업데이트 기능은 둘 다 개발자가 실시간으로 앱 업데이트를 배포할 수 있는 편리하고 사용자 친화적인 방법을 제공한다는 점에서 유사합니다. 개발자가 Expo Live Update 또는 Capgo의 실시간 업데이트 기능 중 어느 것을 선택할지는 특정 요구사항과 선호도, 그리고 앱 개발에 사용하는 도구와 기술에 따라 달라질 것입니다.
\nExpo의 대안을 찾고 있는 모바일 앱 개발자라면 Capgo를 고려해볼 만합니다. Capgo는 Expo와 같은 많은 도구와 서비스를 제공하는 클라우드 기반 모바일 앱 개발 플랫폼이지만, 한 가지 중요한 차이점이 있습니다: Capgo는 모든 JavaScript 프레임워크와 함께 사용할 수 있는 반면, Expo는 React Native를 사용하여 구축된 앱으로 제한됩니다.
\n이는 Capgo를 사용하면 개발자가 자신의 요구사항과 선호도에 가장 잘 맞는 프레임워크를 결정할 수 있는 자유가 있다는 것을 의미합니다. AngularJS, Vuejs 또는 다른 JavaScript 프레임워크를 선호하든, Capgo를 사용하여 쉽게 앱을 구축, 테스트 및 배포할 수 있습니다.
\n유연성 외에도 Capgo는 모바일 앱 개발을 위한 다양한 유용한 도구와 서비스를 제공합니다. 예를 들어, CI/CD 통합, 네이티브 기능을 위한 플러그인, 네이티브 CI/CD 튜토리얼, 그리고 분석 기능을 제공하여 개발자가 앱의 성능을 추적하고 사용자에게 원활한 실행을 보장할 수 있습니다.
\n전반적으로 Capgo는 여러 JavaScript 프레임워크를 지원하는 추가적인 장점과 함께 Expo와 동일한 많은 기능과 이점을 제공하는 강력하고 유연한 대안입니다. 앱 개발 프로세스를 간소화하고 훌륭한 사용자 경험을 제공하는데 도움이 되는 플랫폼을 찾고 있다면, Capgo를 꼭 고려해보시기 바랍니다.
\n기능 | Capgo | Expo |
---|---|---|
실시간 업데이트 | ✅ | ✅ |
업데이트 채널 | ✅ | ✅ |
채널 버전 되돌리기/변경 | ✅ | ✅ |
설치 통계 | ✅ | ❌ |
테스트용 샌드박스 앱 | ✅ | ✅ |
React Native | ❌ | ✅ |
React | ✅ | ❌ |
Capacitor | ✅ | ❌ React-native만 지원 |
합리적인 가격 | ✅ | ✅ |
네이티브 빌드 | ❌ | ✅ |
100% 오픈소스 | ✅ | ❌ |
종단간 암호화 | ✅ | ❌ 암호화된 서명만 지원 |
CI/CD | ❌ 인기있는 도구에 대한 튜토리얼 제공 | ✅ |
Expo는 React Native 개발자들을 위한 훌륭한 도구이지만, 유일한 선택지는 아닙니다. Expo의 대안을 찾고 계시다면, Capgo를 고려해보시는 것이 좋습니다. Capgo는 Expo와 같은 많은 도구와 서비스를 제공하는 클라우드 기반 모바일 앱 개발 플랫폼이지만, 한 가지 중요한 차이점이 있습니다: Capgo는 모든 JavaScript 프레임워크와 함께 사용할 수 있는 반면, Expo는 React Native를 사용하여 구축된 앱으로 제한됩니다.
\nCapgo가 더 나은 앱을 더 빠르게 구축하는데 어떤 도움이 되는지 알아보려면, 오늘 무료 계정에 가입하세요.
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"기능-비교"],"text":[0,"기능 비교"]}],[0,{"depth":[0,2],"slug":[0,"결론"],"text":[0,"결론"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"alternative-to-expo"],"title":[0,"Alternatif untuk Expo Live Update"],"description":[0,"Expo의 실시간 업데이트의 편리함을 제공하면서도 React Native에 국한되지 않는 모바일 앱 개발 플랫폼을 찾고 계신가요? Capgo를 확인해보세요."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[3,"2022-12-14T00:00:00.000Z"],"updated_at":[3,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/expo_alternative.webp"],"head_image_alt":[0,"Expo 대체 설명"],"keywords":[0,"Expo, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Alternatives"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/ionic-capacitor-push-notifications-firebase.md"],"data":[0,{"slug":[0,"ionic-capacitor-push-notifications-firebase"],"title":[0,"Notifiche Push di Ionic Capacitor con Firebase: Una Guida Passo-Passo"],"description":[0,"Firebase를 사용하여 Android 및 iOS 플랫폼에 대한 단계별 가이드와 함께 Ionic Capacitor 앱에서 푸시 알림을 통합하는 방법을 알아보세요."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[0,"2022-12-14T00:00:00.000Z"],"updated_at":[0,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/push_notif.webp"],"head_image_alt":[0,"Firebase를 사용한 Ionic Capacitor 푸시 알림"],"keywords":[0,"Ionic, Capacitor, push notifications, Firebase, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"tutorial"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"body":[0,"이 튜토리얼에서는 Firebase를 사용하여 Ionic Capacitor 앱에 푸시 알림을 통합할 것입니다. 이를 위해 특별한 서비스는 필요하지 않지만, 사전에 여러 가지를 구성해야 합니다. Firebase는 Android에 필요하고 데이터베이스를 사용하지 않고도 쉽게 알림을 보낼 수 있어서 탁월한 선택입니다.\n\n이 튜토리얼에서는 Firebase를 사용하여 Ionic Capacitor 앱에 푸시 알림을 통합할 것입니다. 이를 위해 특별한 서비스는 필요하지 않지만, 사전에 여러 가지를 구성해야 합니다. Firebase는 Android에 필요하고 데이터베이스를 사용하지 않고도 쉽게 알림을 보낼 수 있어서 탁월한 선택입니다.
\nnpm install @capacitor/push-notificationsionic start ionic-push-notifications blank --capacitorcd ionic-push-notifications
이미 앱이 있다면 capacitor.config.json에서 appId를 변경할 수 있습니다. 하지만 네이티브 폴더가 이미 존재한다면, Capacitor는 폴더를 한 번만 생성하고 ID를 자동으로 업데이트하지 않기 때문에 ID가 나타나는 모든 파일에서 수동으로 변경해야 합니다. capacitor.config.json에서 배지 카운트 업데이트, 푸시 알림 시 소리 재생, 알림 도착 시 알림 표시와 같은 옵션도 지정할 수 있습니다.
\n이제 앱 외부에서 푸시 알림을 구성해 보겠습니다.
\n먼저 새로운 Firebase 프로젝트를 생성하거나 기존 프로젝트를 사용하세요. 새 프로젝트의 이름과 기본 옵션을 제공하세요.
\n새 앱인 경우 앱 대시보드에서 **“Firebase를 앱에 추가하여 시작하기”**가 표시됩니다. 그렇지 않으면 톱니바퀴 아이콘을 클릭하고 프로젝트 설정으로 이동하여 앱을 추가하세요.
\niOS와 Android 모두 대화상자가 비슷하며, 중요한 점은 앱에 대한 package id를 사용하는 것입니다.
\n초기 단계 후, 다음 파일들을 다운로드하세요:
\n다음으로 플랫폼을 구성하세요.
\nAndroid의 경우, 다운로드한 google-services.json 파일을 android/app/ 폴더로 이동하세요.
\nAndroid는 이것으로 끝입니다. 이제 iOS를 구성해 보겠습니다.
\n이 부분은 더 복잡합니다. 먼저, Apple Developer 계정의 식별자 목록에서 앱의 App ID를 생성하세요. 목록에서 푸시 알림 기능을 반드시 선택하세요.
\nBundle ID는 Capacitor와 Firebase의 App ID와 동일해야 합니다.
\n이제 Key를 생성하고 **Apple Push Notifications service (APNs)**를 활성화하세요. 키 수가 최대에 도달한 경우 기존 키나 인증서를 사용할 수 있지만, 그 과정은 더 복잡합니다.
\np8 파일을 다운로드한 후 Firebase에 업로드하세요. Firebase 프로젝트 설정의 Cloud Messaging 탭에서 파일을 업로드하고 Key ID와 iOS의 Team ID 세부 정보를 입력하세요.
\n이제 다음 명령을 실행하여 Xcode 프로젝트를 수정하세요:
\nnpx cap open ios
Firebase에서 다운로드한 GoogleService-Info.plist 파일을 iOS 프로젝트에 복사하세요. 파일을 Xcode 프로젝트의 app/app 폴더 안으로 드래그하고 필요한 경우 항목 복사를 선택하세요.
\n다음으로 ios/App/Podfile에 Firebase 종속성을 위한 새로운 Pod를 추가하세요:
\npod 'Firebase/Messaging'
다음 명령으로 네이티브 플랫폼을 업데이트하세요:
\nnpx cap update ios
ios/App/App/AppDelegate.swift의 네이티브 Swift 코드를 수정하여 Firebase에 등록하고 앱에 올바른 토큰을 반환하도록 하세요:
\nimport UIKitimport Capacitorimport Firebase\n@UIApplicationMainclass AppDelegate: UIResponder, UIApplicationDelegate {\n var window: UIWindow?\n func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { FirebaseApp.configure()\n return true }
마지막으로 Xcode 프로젝트에서 푸시 알림에 대한 Capability를 추가하세요.
\n이제 앱을 빌드하고 푸시 알림을 통합하세요.
\nIonic 프로젝트에서 서비스와 새로운 페이지를 생성하세요:
\nionic g service services/fcmionic g page pages/notifications
app/app-routing.module의 라우팅을 업데이트하세요:ts**에 동적 id가 있는 새 페이지를 포함하려면:
\nionic start pushApp blank --type=angular --capacitor --package-id=com.appdactic.devpushcd ./pushAppionic buildnpx cap add iosnpx cap add android
services/fcmservice.ts에서 푸시 알림을 처리하는 서비스를 생성하세요:
\n{ \"appId\": \"com.appdactic.devpush\", \"appName\": \"pushApp\", \"bundledWebRuntime\": false, \"npmClient\": \"npm\", \"webDir\": \"www\", \"plugins\": { \"SplashScreen\": { \"launchShowDuration\": 0 }, \"PushNotifications\": { \"presentationOptions\": [\"badge\", \"sound\", \"alert\"] } }, \"cordova\": {}}
app/app.component.ts에서 initPush()
함수를 호출하세요:
npx cap open ios
pages/details/details.page.ts에서 상세 페이지의 정보를 처리하세요:
\ntarget 'App' do capacitor_pods # Add your Pods here pod 'Firebase/Messaging'end
pages/details/details.page.html에서 상세 정보를 표시하세요:
\nnpx cap update ios
앱을 빌드하고, 변경사항을 동기화한 후 기기에 배포하세요
\nimport UIKitimport Capacitorimport Firebase\n@UIApplicationMainclass AppDelegate: UIResponder, UIApplicationDelegate {\n var window: UIWindow?\n func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool { // Override point for customization after application launch. FirebaseApp.configure() return true }\n // All the existing functions // ...\n // Update this one: func application(_ application: UIApplication, didRegisterForRemoteNotificationsWithDeviceToken deviceToken: Data) { Messaging.messaging().apnsToken = deviceToken InstanceID.instanceID().instanceID { (result, error) in if let error = error { NotificationCenter.default.post(name: Notification.Name(CAPNotifications.DidFailToRegisterForRemoteNotificationsWithError.name()), object: error) } else if let result = result { NotificationCenter.default.post(name: Notification.Name(CAPNotifications.DidRegisterForRemoteNotificationsWithDeviceToken.name()), object: result.token) } } }}
이제 Firebase로 푸시 알림을 보낼 수 있습니다
\nFirebase로 푸시 알림을 보내는 방법에는 여러 가지가 있습니다
\n앱을 기기에 배포한 후, 등록 후 콘솔 로그에서 토큰을 확인할 수 있습니다. 이 토큰을 사용하여 통합이 제대로 작동하는지 확인하기 위해 대상 테스트 푸시를 보내세요. Firebase에서 Cloud Messaging으로 이동하여 Send test message를 선택하세요. 로그에서 기기 토큰을 추가하세요.
\n모든 것이 올바르게 설정되었다면, 기기에서 푸시 알림을 볼 수 있습니다
\n추가 정보가 있는 푸시 알림을 테스트하려면, 같은 페이지에서 마법사를 따라 일반 정보를 지정하고 대상으로 하는 플랫폼을 선택하세요. 푸시 알림과 함께 페이로드를 보내려면 additional options를 추가하세요.
\nAdvanced options 섹션에서 Custom data 키-값 쌍을 추가하세요. 예를 들어, detailsId
키와 원하는 값을 사용할 수 있습니다. 이 데이터는 앱에서 지정된 id로 상세 페이지로 이동하는 데 사용됩니다.
푸시 알림을 보낸 후, 앱이 이를 수신하고 알림을 탭했을 때 지정된 id로 상세 페이지를 표시해야 합니다
\nFirebase API를 사용하여 프로그래밍 방식으로 푸시 알림을 보낼 수도 있습니다. 이를 위해서는 Firebase 프로젝트 설정의 Cloud Messaging 탭에서 Server key를 얻어야 합니다.
\n서버 키를 사용하여 필요한 페이로드와 함께 Firebase API에 POST 요청을 보낼 수 있습니다. 다음은 Node.js와 request
라이브러리를 사용한 예시입니다:
ionic g service services/fcmionic g page pages/details
YOUR_SERVER_KEY
와 YOUR_DEVICE_TOKEN
을 실제 서버 키와 기기 토큰으로 교체하세요. 스크립트를 실행하면, 기기에서 사용자 정의 페이로드가 포함된 푸시 알림을 수신해야 합니다.
이제 끝났습니다! Firebase를 사용하여 Ionic Capacitor 앱에 푸시 알림을 성공적으로 통합했습니다. 이제 Android와 iOS 플랫폼 모두에서 사용자에게 푸시 알림을 보낼 수 있습니다.
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"firebase-구성"],"text":[0,"Firebase 구성"]}],[0,{"depth":[0,3],"slug":[0,"android-푸시-준비"],"text":[0,"Android 푸시 준비"]}],[0,{"depth":[0,3],"slug":[0,"ios-푸시-준비"],"text":[0,"iOS 푸시 준비"]}],[0,{"depth":[0,2],"slug":[0,"ionic-푸시-알림-통합"],"text":[0,"Ionic 푸시 알림 통합"]}],[0,{"depth":[0,2],"slug":[0,"firebase로-푸시-알림-보내기"],"text":[0,"Firebase로 푸시 알림 보내기"]}],[0,{"depth":[0,3],"slug":[0,"특정-기기-테스트"],"text":[0,"특정 기기 테스트"]}],[0,{"depth":[0,3],"slug":[0,"페이로드가-있는-푸시-메시지"],"text":[0,"페이로드가 있는 푸시 메시지"]}],[0,{"depth":[0,3],"slug":[0,"firebase-api-사용하기"],"text":[0,"Firebase API 사용하기"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"ionic-capacitor-push-notifications-firebase"],"title":[0,"Notifiche Push di Ionic Capacitor con Firebase: Una Guida Passo-Passo"],"description":[0,"Firebase를 사용하여 Android 및 iOS 플랫폼에 대한 단계별 가이드와 함께 Ionic Capacitor 앱에서 푸시 알림을 통합하는 방법을 알아보세요."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[3,"2022-12-14T00:00:00.000Z"],"updated_at":[3,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/push_notif.webp"],"head_image_alt":[0,"Firebase를 사용한 Ionic Capacitor 푸시 알림"],"keywords":[0,"Ionic, Capacitor, push notifications, Firebase, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"tutorial"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/automatic-capacitor-ios-build-github-action-with-match.md"],"data":[0,{"slug":[0,"automatic-capacitor-ios-build-github-action-with-match"],"title":[0,"GitHub actions에서 match를 사용한 자동 Capacitor iOS 빌드"],"description":[0,"5분 안에 fastlane과 GitHub Actions를 사용하여 IOS Ionic 앱을 위한 CI/CD 파이프라인 설정하기 (2022)"],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[0,"2022-10-30T00:00:00.000Z"],"updated_at":[0,"2024-08-01T00:00:00.000Z"],"head_image":[0,"/fastlane_ios.webp"],"head_image_alt":[0,"Fastlane testflight GitHub action 설명"],"keywords":[0,"Fastlane, CI/CD, iOS, automatic build, automatic release, mobile app updates"],"tag":[0,"CI/CD"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,"automatic-capacitor-android-build-github-action"]}],"body":[0,"# GitHub Actions를 사용한 자동 iOS 빌드 (Match 사용)\n\nCapacitor 앱용 CI/CD 설정은 복잡하고 시간이 많이 걸릴 수 있습니다. 다음은 알아야 할 사항입니다:\n\n## 사전 요구사항\n\n시작하기 전에 다음이 필요합니다:\n\n- 관리자 권한이 있는 GitHub 계정 \n- iOS 개발자 프로그램 멤버십\n- 적절한 권한이 있는 App Store Connect API 액세스\n- GitHub Actions 워크플로우 이해\n- Fastlane과 Match 구성에 대한 지식\n- 파이프라인 유지보수 및 디버깅 시간\n- 많은 개발자가 있는 팀, 그렇지 않으면 더 간단한 워크플로우를 위해 [fastlane cert](/blog/automatic-capacitor-ios-build-github-action)를 사용하는 것을 추천합니다\n\n## Capgo의 전문 CI/CD 설정\n\n복잡성을 건너뛰고 [Capgo](https://capgoapp/ci-cd/)가 선호하는 플랫폼에서 직접 CI/CD 파이프라인을 구성합니다:\n\n- **플랫폼 독립성**: GitHub Actions, GitLab CI 등에서 작동\n- **원활한 통합**: 플랫폼 전환이 필요 없이 현재 프로세스와 함께 작동\n- **맞춤형 구성**: 프로젝트 요구사항에 맞는 맞춤 설정\n- **전문가 가이드**: 이미 50개 이상의 앱에 대해 CI/CD를 설정했습니다\n\n### 가격\n- 일회성 설정 비용: $2,600\n- 운영 비용: ~$300/년\n- 다른 독점 솔루션과 비교: $6,000/년\n- **5년간 $26,100 절약**\n\n[지금 CI/CD 설정하기](https://calcom/martindonadieu/mobile-ci-cd-done-for-you/)\n\n## 수동 설정 가이드\n\n직접 모든 것을 설정하고 싶다면, 다음과 같이 해야 합니다:\n\n## Fastlane과 GitHub Actions를 사용한 iOS용 지속적 배포(match 사용)\n\n## 사전 요구사항\n\n튜토리얼을 계속하기 전에...\n\n- 개발 머신에 Fastlane이 [설치](https://docsfastlanetools/)되어 있는지 확인하세요\n- iOS 개발자 프로그램 멤버십\n- 읽고자 하는 의지 😆...\n- 많은 개발자가 있는 팀, 그렇지 않으면 더 간단한 워크플로우를 위해 [fastlane cert](/blog/automatic-capacitor-ios-build-github-action)를 사용하는 것을 추천합니다\n\n## 가격에 대한 중요 사항\n\n\n\n[https://githubcom/features/actions](https://githubcom/features/actions/)\n\n이 서비스는 선택한 머신에 따라 제한까지 '무료'입니다\n우리는 **_macOS_** 머신을 사용할 것입니다. 스크린샷에서 가격과 제한을 확인할 수 있습니다(튜토리얼 작성 시점의 가격이며, 향후 변경될 수 있습니다)\n\n🔴 **_요구사항과 가격에 대해 경고했으니, 계속 진행하겠습니다..._**\n\n> **_📣_ 이 포스트에서는 iTunes Connect에 앱이 생성되어 있고, Apple 에코시스템의 인증서가 있다고 가정합니다. 모든 것은 Fastlane이 복사할 것입니다!**\n\n## 시작해보겠습니다 🤿\n\n**포스트에서 따라야 할 단계**\n\n1. _Fastlane Match로 App Store Connect API 사용하기_\n2. _요구사항_\n3. _App Store Connect API 키 생성하기_\n4. _App Store Connect API 키 사용하기_\n5. _Fastline 파일 복사하기_\n6. _Fastlane match 구성하기_\n6. _Fastlane match 구성하기_\n\n## 1. Fastlane Match로 App Store Connect API 사용하기\n\n> 2021년 2월부터 모든 사용자는 App Store Connect에 로그인할 때 2단계 인증 또는 2단계 확인이 필요합니다. Apple ID에 대한 이 추가 보안 계층은 계정에 접근할 수 있는 유일한 사람이 귀하임을 보장합니다. \n> [Apple Support](https://developerapplecom/support/authentication/)에서\n\n> match를 시작하려면 기존 인증서를 취소해야 합니다. 하지만 걱정하지 마세요, 새로운 인증서를 바로 받을 수 있습니다.\n\n## 요구사항\n\nApp Store Connect API를 사용하기 위해 Fastlane은 **세 가지**가 필요합니다\n\n1. Issuer ID\n2. Key ID\n3. Key 파일 또는 Key 내용\n\n## App Store Connect API 키 생성하기\n\n키를 생성하려면 App Store Connect에서 관리자 권한이 있어야 합니다. 해당 권한이 없다면 관련 담당자에게 이 문서를 전달하고 다음 지침을 따르도록 할 수 있습니다.\n\n1 — [App Store Connect](https://appstoreconnectapplecom/)에 로그인하세요\n\n2 — [사용자 및 액세스](https://appstoreconnectapplecom/access/users/)를 선택하세요\n\n\n\n3 — 통합 탭을 선택하세요"],"filePath":[0,"src/content/blog/ko/automatic-capacitor-ios-build-github-action-with-match.md"],"digest":[0,"92c30716701ff12f"],"rendered":[0,{"html":[0,"Capacitor 앱용 CI/CD 설정은 복잡하고 시간이 많이 걸릴 수 있습니다. 다음은 알아야 할 사항입니다:
\n시작하기 전에 다음이 필요합니다:
\n복잡성을 건너뛰고 Capgo가 선호하는 플랫폼에서 직접 CI/CD 파이프라인을 구성합니다:
\n직접 모든 것을 설정하고 싶다면, 다음과 같이 해야 합니다:
\n튜토리얼을 계속하기 전에…
\nhttps://githubcom/features/actions
\n이 서비스는 선택한 머신에 따라 제한까지 ‘무료’입니다\n우리는 macOS 머신을 사용할 것입니다. 스크린샷에서 가격과 제한을 확인할 수 있습니다(튜토리얼 작성 시점의 가격이며, 향후 변경될 수 있습니다)
\n🔴 요구사항과 가격에 대해 경고했으니, 계속 진행하겠습니다…
\n\n\n📣 이 포스트에서는 iTunes Connect에 앱이 생성되어 있고, Apple 에코시스템의 인증서가 있다고 가정합니다. 모든 것은 Fastlane이 복사할 것입니다!
\n
포스트에서 따라야 할 단계
\n\n\n2021년 2월부터 모든 사용자는 App Store Connect에 로그인할 때 2단계 인증 또는 2단계 확인이 필요합니다. Apple ID에 대한 이 추가 보안 계층은 계정에 접근할 수 있는 유일한 사람이 귀하임을 보장합니다.
\n
\nApple Support에서
\n\nmatch를 시작하려면 기존 인증서를 취소해야 합니다. 하지만 걱정하지 마세요, 새로운 인증서를 바로 받을 수 있습니다.
\n
App Store Connect API를 사용하기 위해 Fastlane은 세 가지가 필요합니다
\n키를 생성하려면 App Store Connect에서 관리자 권한이 있어야 합니다. 해당 권한이 없다면 관련 담당자에게 이 문서를 전달하고 다음 지침을 따르도록 할 수 있습니다.
\n1 — App Store Connect에 로그인하세요
\n2 — 사용자 및 액세스를 선택하세요
\n3 — 통합 탭을 선택하세요
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,1],"slug":[0,"github-actions를-사용한-자동-ios-빌드-match-사용"],"text":[0,"GitHub Actions를 사용한 자동 iOS 빌드 (Match 사용)"]}],[0,{"depth":[0,2],"slug":[0,"사전-요구사항"],"text":[0,"사전 요구사항"]}],[0,{"depth":[0,2],"slug":[0,"capgo의-전문-cicd-설정"],"text":[0,"Capgo의 전문 CI/CD 설정"]}],[0,{"depth":[0,3],"slug":[0,"가격"],"text":[0,"가격"]}],[0,{"depth":[0,2],"slug":[0,"수동-설정-가이드"],"text":[0,"수동 설정 가이드"]}],[0,{"depth":[0,2],"slug":[0,"fastlane과-github-actions를-사용한-ios용-지속적-배포match-사용"],"text":[0,"Fastlane과 GitHub Actions를 사용한 iOS용 지속적 배포(match 사용)"]}],[0,{"depth":[0,2],"slug":[0,"사전-요구사항-1"],"text":[0,"사전 요구사항"]}],[0,{"depth":[0,2],"slug":[0,"가격에-대한-중요-사항"],"text":[0,"가격에 대한 중요 사항"]}],[0,{"depth":[0,2],"slug":[0,"시작해보겠습니다"],"text":[0,"시작해보겠습니다 🤿"]}],[0,{"depth":[0,2],"slug":[0,"1-fastlane-match로-app-store-connect-api-사용하기"],"text":[0,"1. Fastlane Match로 App Store Connect API 사용하기"]}],[0,{"depth":[0,2],"slug":[0,"요구사항"],"text":[0,"요구사항"]}],[0,{"depth":[0,2],"slug":[0,"app-store-connect-api-키-생성하기"],"text":[0,"App Store Connect API 키 생성하기"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"automatic-capacitor-ios-build-github-action-with-match"],"title":[0,"GitHub actions에서 match를 사용한 자동 Capacitor iOS 빌드"],"description":[0,"5분 안에 fastlane과 GitHub Actions를 사용하여 IOS Ionic 앱을 위한 CI/CD 파이프라인 설정하기 (2022)"],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[3,"2022-10-30T00:00:00.000Z"],"updated_at":[3,"2024-08-01T00:00:00.000Z"],"head_image":[0,"/fastlane_ios.webp"],"head_image_alt":[0,"Fastlane testflight GitHub action 설명"],"keywords":[0,"Fastlane, CI/CD, iOS, automatic build, automatic release, mobile app updates"],"tag":[0,"CI/CD"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,"automatic-capacitor-android-build-github-action"]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/how-to-build-capacitor-app-in-xcode-cloud.md"],"data":[0,{"slug":[0,"how-to-build-capacitor-app-in-xcode-cloud"],"title":[0,"Cómo compilar una aplicación Ionic Capacitor en Xcode Cloud"],"description":[0,"MacOS가 필요없이 Xcode cloud를 사용하여 Capacitor JS 앱을 빌드하세요."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[0,"2022-09-01T00:00:00.000Z"],"updated_at":[0,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/xcode_cloud.webp"],"head_image_alt":[0,"Capacitor Xcode 클라우드 빌드"],"keywords":[0,"Xcode Cloud, Capacitor, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Tutorial"],"published":[0,true],"locale":[0,"ko"]}],"body":[0,"## 사전 조건\n\n튜토리얼을 진행하기 전에...\n\n- GitHub을 사용하고 있는지 확인하세요\n- Capacitor 사용\n- 앱이 이미 Apple Store에 배포되어 있어야 합니다\n- 읽고자 하는 의지 😆...\n\nIonic 사용은 선택사항이며, Cordova도 작동할 수 있지만 시도해보지는 않았습니다\n\n## 가격에 대한 중요 사항\n\n\n\n[https://developerapplecom/xcode-cloud/](https://developerapplecom/xcode-cloud/)\n\n이 서비스는 제한까지는 '무료'입니다 \n스크린샷에서 가격과 제한을 확인할 수 있습니다 (튜토리얼 작성 시점 기준 가격이며, 향후 변경될 수 있습니다)\n\n🔴 **_요구사항과 가격에 대해 안내받았으니, 계속 진행하시겠습니까_**\n\n> **_📣_ 이 게시물에서는 앱이 이미 Apple Store에 생성되어 있다고 가정합니다**\n\n## 소개\n\nXcode가 Capacitor 앱을 빌드하도록 하기 위해서는 몇 가지 설정이 필요합니다\n\n## 패키지 준비\n\n`packagejson` 스크립트에 빌드 명령어가 있는지 확인하세요\n그리고 아래와 같이 `sync:ios` 명령어를 추가하세요\n\n```json\n{\n \"scripts\": {\n \"build\": \"YOUR BUILD COMMAND\",\n \"sync:ios\": \"cap sync ios\"\n }\n}\n```\n이 단계는 포스트 스크립트가 간단히 작동하도록 합니다\n\n## 포스트 클론 스크립트\n이 스크립트는 클론 단계 이후 Xcode cloud에 의해 실행됩니다\n\n```bash\n#!/usr/bin/env bash\n\nset -x\n\nexport HOMEBREW_NO_INSTALL_CLEANUP=TRUE\n# Install CocoaPods\necho \"📦 Install CocoaPods\"\nbrew install cocoapods\nbrew install node@18\nbrew link node@18\n\n# Install dependencies\n# XCode Cloud is literally broken for 2 months now - https://developer.apple.com/forums/thread/738136?answerId=774510022#774510022\nnpm config set maxsockets 3\nnpm ci\n# or `pnpm install --frozen-lockfile` or `yarn install --frozen-lockfile` or bun install\nnpm run build \n# or npm run build\nnpm run sync:ios\n```\n\n이 파일을 프로젝트 루트에 저장하고 `ios/App/ci_scripts/ci_post_clonesh`로 이름을 지정하세요\n\n그런 다음 `chmod +x ios/App/ci_scripts/ci_post_clonesh` 명령어로 이 파일을 실행 가능하게 만드세요\n\n## Xcode 워크플로우 생성\n\nXcode를 엽니다 (네, Xcode를 제거하려면 Xcode가 필요합니다)\n\n그리고 이 탭으로 이동하세요:\n\n\n워크플로우 생성을 클릭하고, 앱을 선택한 후, 아래와 같이 다음을 클릭하세요\n\n\n\n왼쪽의 워크플로우 편집을 클릭하세요\n\n\n환경 탭으로 이동하여 아래와 같이 Mac 124를 선택하고 적절한 옵션을 체크하세요\n\n\n시작 조건을 선택하세요\n우리와 같은 빌드를 사용한다면, 이중 빌드를 피하기 위해 브랜치 대신 태그를 사용하는 것을 추천합니다\n\n환경 변수를 설정하세요\n\n\nGitHub 계정을 연결하세요\n\n\n\n\n그런 다음 워크플로우를 활성화하고 첫 번째 변경사항을 커밋하세요. Xcode에서 빌드가 실행되는 것을 볼 수 있습니다\n\n## **빌드 처리**\n\nXcode Cloud에서는 **CI/CD 워크플로우 실행에 사용한 시간을 기준으로 요금이 청구됩니다**. 경험상 빌드가 Apple Store에서 처리되기까지 약 10-15분이 소요됩니다\n\n비공개 프로젝트의 경우, 빌드당 예상 비용은 프로젝트의 구성이나 종속성에 따라 **$0.008/분 x 5분 = $0.4** 또는 그 이상이 될 수 있습니다\n\n오픈소스 프로젝트의 경우, 이는 전혀 문제가 되지 않습니다. [가격 책정](https://githubcom/pricing/) 참조"],"filePath":[0,"src/content/blog/ko/how-to-build-capacitor-app-in-xcode-cloud.md"],"digest":[0,"b712b75a6c209976"],"rendered":[0,{"html":[0,"튜토리얼을 진행하기 전에…
\nIonic 사용은 선택사항이며, Cordova도 작동할 수 있지만 시도해보지는 않았습니다
\nhttps://developerapplecom/xcode-cloud/
\n이 서비스는 제한까지는 ‘무료’입니다
\n스크린샷에서 가격과 제한을 확인할 수 있습니다 (튜토리얼 작성 시점 기준 가격이며, 향후 변경될 수 있습니다)
🔴 요구사항과 가격에 대해 안내받았으니, 계속 진행하시겠습니까
\n\n\n📣 이 게시물에서는 앱이 이미 Apple Store에 생성되어 있다고 가정합니다
\n
Xcode가 Capacitor 앱을 빌드하도록 하기 위해서는 몇 가지 설정이 필요합니다
\npackagejson
스크립트에 빌드 명령어가 있는지 확인하세요\n그리고 아래와 같이 sync:ios
명령어를 추가하세요
{ \"scripts\": { \"build\": \"YOUR BUILD COMMAND\", \"sync:ios\": \"cap sync ios\" }}
이 단계는 포스트 스크립트가 간단히 작동하도록 합니다
\n이 스크립트는 클론 단계 이후 Xcode cloud에 의해 실행됩니다
\n#!/usr/bin/env bash\nset -x\nexport HOMEBREW_NO_INSTALL_CLEANUP=TRUE# Install CocoaPodsecho \"📦 Install CocoaPods\"brew install cocoapodsbrew install node@18brew link node@18\n# Install dependencies# XCode Cloud is literally broken for 2 months now - https://developer.apple.com/forums/thread/738136?answerId=774510022#774510022npm config set maxsockets 3npm ci# or `pnpm install --frozen-lockfile` or `yarn install --frozen-lockfile` or bun installnpm run build# or npm run buildnpm run sync:ios
이 파일을 프로젝트 루트에 저장하고 ios/App/ci_scripts/ci_post_clonesh
로 이름을 지정하세요
그런 다음 chmod +x ios/App/ci_scripts/ci_post_clonesh
명령어로 이 파일을 실행 가능하게 만드세요
Xcode를 엽니다 (네, Xcode를 제거하려면 Xcode가 필요합니다)
\n그리고 이 탭으로 이동하세요:\n
워크플로우 생성을 클릭하고, 앱을 선택한 후, 아래와 같이 다음을 클릭하세요
\n왼쪽의 워크플로우 편집을 클릭하세요\n
환경 탭으로 이동하여 아래와 같이 Mac 124를 선택하고 적절한 옵션을 체크하세요\n
시작 조건을 선택하세요\n우리와 같은 빌드를 사용한다면, 이중 빌드를 피하기 위해 브랜치 대신 태그를 사용하는 것을 추천합니다
\n환경 변수를 설정하세요\n
GitHub 계정을 연결하세요\n
그런 다음 워크플로우를 활성화하고 첫 번째 변경사항을 커밋하세요. Xcode에서 빌드가 실행되는 것을 볼 수 있습니다
\nXcode Cloud에서는 CI/CD 워크플로우 실행에 사용한 시간을 기준으로 요금이 청구됩니다. 경험상 빌드가 Apple Store에서 처리되기까지 약 10-15분이 소요됩니다
\n비공개 프로젝트의 경우, 빌드당 예상 비용은 프로젝트의 구성이나 종속성에 따라 $0.008/분 x 5분 = $0.4 또는 그 이상이 될 수 있습니다
\n오픈소스 프로젝트의 경우, 이는 전혀 문제가 되지 않습니다. 가격 책정 참조
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"사전-조건"],"text":[0,"사전 조건"]}],[0,{"depth":[0,2],"slug":[0,"가격에-대한-중요-사항"],"text":[0,"가격에 대한 중요 사항"]}],[0,{"depth":[0,2],"slug":[0,"소개"],"text":[0,"소개"]}],[0,{"depth":[0,2],"slug":[0,"패키지-준비"],"text":[0,"패키지 준비"]}],[0,{"depth":[0,2],"slug":[0,"포스트-클론-스크립트"],"text":[0,"포스트 클론 스크립트"]}],[0,{"depth":[0,2],"slug":[0,"xcode-워크플로우-생성"],"text":[0,"Xcode 워크플로우 생성"]}],[0,{"depth":[0,2],"slug":[0,"빌드-처리"],"text":[0,"빌드 처리"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"how-to-build-capacitor-app-in-xcode-cloud"],"title":[0,"Cómo compilar una aplicación Ionic Capacitor en Xcode Cloud"],"description":[0,"MacOS가 필요없이 Xcode cloud를 사용하여 Capacitor JS 앱을 빌드하세요."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[3,"2022-09-01T00:00:00.000Z"],"updated_at":[3,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/xcode_cloud.webp"],"head_image_alt":[0,"Capacitor Xcode 클라우드 빌드"],"keywords":[0,"Xcode Cloud, Capacitor, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Tutorial"],"published":[0,true],"locale":[0,"ko"]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/how-to-release-major-version-in-capgo.md"],"data":[0,{"slug":[0,"how-to-release-major-version-in-capgo"],"title":[0,"Comment publier une version majeure dans Capgo"],"description":[0,"사용자 앱을 손상시키지 않고 앱의 주요 버전을 출시하는 것이 필요한 시기와 방법을 이해하기"],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[0,"2022-08-30T00:00:00.000Z"],"updated_at":[0,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/capgo-feature-image.webp"],"head_image_alt":[0,"Capgo 주요 버전 시스템"],"keywords":[0,"mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Tutorial"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,"how-to-send-specific-version-to-users"]}],"body":[0,"## 메이저 버전 출시 시\n\n버전 관리는 어려울 수 있습니다. 일반적으로 사용자에게 중요한 변경사항이 있을 때 메이저 업데이트를 보내고 싶을 것입니다.\n\n하지만 버전 관리는 그런 용도로 만들어진 것이 아닙니다. 앱스토어 버전은 네이티브 버전과 다릅니다.\n\n네이티브 버전은 *코드*의 주요 변경사항을 관리하기 위한 것입니다.\n\n예를 들어 iOS에서, iOS 16은 Apple의 `store version`이지만 코드 버전은 `20A5283p`입니다 (여기서는 SemVer를 사용하지 않는 것 같습니다)\n\n이제 이들을 혼동하지 않고 각각의 용도에 맞게 사용하는 것이 명확해졌습니다!\n\n## 메이저 릴리스\n\nCapacitor 앱에서 메이저 릴리스는 주요 변경사항이 있을 때 필요합니다.\n예를 들어, 새로운 iOS 타겟(15에서 16으로), 또는 새로운 Capacitor 버전(3에서 4로), 또는 사용 중인 플러그인(12에서 20으로)이 메이저 버전으로 업데이트된 경우입니다.\n\n이러한 변경은 모든 도구가 주요 변경사항을 처리하기 위해 정렬되어야 함을 의미합니다.\n\n그래서 Capgo는 이 시스템을 따릅니다.\n따라서 메이저 버전을 출시하면 Capgo는 스토어에서 설치하지 않은 사용자에게 이를 전송하지 않습니다.\\\n이 동작은 사용자 정의할 수 있습니다. [여기](/docs/cli/commands/#disable-updates-strategy)에서 자세히 알아볼 수 있습니다.\n\n### 버전\n\nCapgo가 비교할 버전을 찾는 위치\n\n#### iOS\n > Capgo가 JavaScript 버전과 비교하고 메이저 업그레이드를 찾는 데 사용됩니다.\n\n iOS에서 변수는 `ios/App/App/Infoplist`의 `CFBundleShortVersionString` 키 또는 `ios/App/Appxcodeproj/projectpbxproj`의 `MARKETING_VERSION` 키 아래에 설정됩니다. `Infoplist` 파일에 `MARKETING_VERSION`이 설정된 경우입니다.\n > `capacitorconfigjson` 파일에서 version 키를 설정하여 이 동작을 재정의할 수 있습니다. [여기에서 문서 확인](/docs/plugin/auto-update#advanced-settings/)\n\n#### Android\n > Capgo가 JavaScript 버전과 비교하고 메이저 업그레이드를 찾는 데 사용됩니다.\n\n Android에서 변수는 `android/app/buildgradle`의 `defaultConfigversionName` 키 아래에 설정됩니다.\n > `capacitorconfigjson` 파일에서 version 키를 설정하여 이 동작을 재정의할 수 있습니다. [여기에서 문서 확인](/docs/plugin/auto-update#advanced-settings/)\n\n#### JavaScript\n > Capgo가 네이티브 버전과 비교하고 메이저 업그레이드를 찾는 데 사용됩니다.\n\n JavaScript에서 변수는 `packagejson`의 `version` 키 아래에 설정됩니다.\n\n## 예시\n\n현재 Capacitor 3으로 버전 `1.2.3`이 출시된 Ionic 앱이 있습니다.\n\nCapacitor 4로 업그레이드를 진행 중입니다.\n\n버전 번호를 `2.2.3`으로 업그레이드해야 하며, Capgo를 포함한 모든 패키지가 이 큰 변경을 알아차릴 것입니다.\n\n이 버전을 Capgo와 App Store에 출시할 때\n\nCapgo의 다음 라이브 업데이트 `2.2.4`는 `1.2.3` 버전 사용자에게는 전송되지 않고 `2.2.3` 버전 사용자에게만 전송됩니다.\n\n이 패턴을 따르면 더 이상 걱정할 필요가 없으며 모든 것이 잘 처리됩니다.\n\n## 이를 따르지 않을 경우\n\n이 경우, Capacitor 4가 포함된 새 앱을 Apple과 Google에 보내야 하지만 Capgo에는 보내지 않습니다.\n\n그런 다음 사용자의 100% 또는 최소 90%가 앱을 업데이트할 때까지 기다려야 하며, 이는 아마도 몇 달이 걸릴 것입니다.\n\n이 기간 동안 이전 사용자가 새 버전을 받을 수 없기 때문에 Capgo로 어떤 업데이트도 보낼 수 없습니다.\n업데이트를 받을 사용자를 선택할 방법이 없습니다."],"filePath":[0,"src/content/blog/ko/how-to-release-major-version-in-capgo.md"],"digest":[0,"3ba2a96d57162b00"],"rendered":[0,{"html":[0,"버전 관리는 어려울 수 있습니다. 일반적으로 사용자에게 중요한 변경사항이 있을 때 메이저 업데이트를 보내고 싶을 것입니다.
\n하지만 버전 관리는 그런 용도로 만들어진 것이 아닙니다. 앱스토어 버전은 네이티브 버전과 다릅니다.
\n네이티브 버전은 코드의 주요 변경사항을 관리하기 위한 것입니다.
\n예를 들어 iOS에서, iOS 16은 Apple의 store version
이지만 코드 버전은 20A5283p
입니다 (여기서는 SemVer를 사용하지 않는 것 같습니다)
이제 이들을 혼동하지 않고 각각의 용도에 맞게 사용하는 것이 명확해졌습니다!
\nCapacitor 앱에서 메이저 릴리스는 주요 변경사항이 있을 때 필요합니다.\n예를 들어, 새로운 iOS 타겟(15에서 16으로), 또는 새로운 Capacitor 버전(3에서 4로), 또는 사용 중인 플러그인(12에서 20으로)이 메이저 버전으로 업데이트된 경우입니다.
\n이러한 변경은 모든 도구가 주요 변경사항을 처리하기 위해 정렬되어야 함을 의미합니다.
\n그래서 Capgo는 이 시스템을 따릅니다.\n따라서 메이저 버전을 출시하면 Capgo는 스토어에서 설치하지 않은 사용자에게 이를 전송하지 않습니다.
\n이 동작은 사용자 정의할 수 있습니다. 여기에서 자세히 알아볼 수 있습니다.
Capgo가 비교할 버전을 찾는 위치
\n\n\nCapgo가 JavaScript 버전과 비교하고 메이저 업그레이드를 찾는 데 사용됩니다.
\n
iOS에서 변수는 ios/App/App/Infoplist
의 CFBundleShortVersionString
키 또는 ios/App/Appxcodeproj/projectpbxproj
의 MARKETING_VERSION
키 아래에 설정됩니다. Infoplist
파일에 MARKETING_VERSION
이 설정된 경우입니다.
\n\n\n
capacitorconfigjson
파일에서 version 키를 설정하여 이 동작을 재정의할 수 있습니다. 여기에서 문서 확인
\n\nCapgo가 JavaScript 버전과 비교하고 메이저 업그레이드를 찾는 데 사용됩니다.
\n
Android에서 변수는 android/app/buildgradle
의 defaultConfigversionName
키 아래에 설정됩니다.
\n\n\n
capacitorconfigjson
파일에서 version 키를 설정하여 이 동작을 재정의할 수 있습니다. 여기에서 문서 확인
\n\nCapgo가 네이티브 버전과 비교하고 메이저 업그레이드를 찾는 데 사용됩니다.
\n
JavaScript에서 변수는 packagejson
의 version
키 아래에 설정됩니다.
현재 Capacitor 3으로 버전 1.2.3
이 출시된 Ionic 앱이 있습니다.
Capacitor 4로 업그레이드를 진행 중입니다.
\n버전 번호를 2.2.3
으로 업그레이드해야 하며, Capgo를 포함한 모든 패키지가 이 큰 변경을 알아차릴 것입니다.
이 버전을 Capgo와 App Store에 출시할 때
\nCapgo의 다음 라이브 업데이트 2.2.4
는 1.2.3
버전 사용자에게는 전송되지 않고 2.2.3
버전 사용자에게만 전송됩니다.
이 패턴을 따르면 더 이상 걱정할 필요가 없으며 모든 것이 잘 처리됩니다.
\n이 경우, Capacitor 4가 포함된 새 앱을 Apple과 Google에 보내야 하지만 Capgo에는 보내지 않습니다.
\n그런 다음 사용자의 100% 또는 최소 90%가 앱을 업데이트할 때까지 기다려야 하며, 이는 아마도 몇 달이 걸릴 것입니다.
\n이 기간 동안 이전 사용자가 새 버전을 받을 수 없기 때문에 Capgo로 어떤 업데이트도 보낼 수 없습니다.\n업데이트를 받을 사용자를 선택할 방법이 없습니다.
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"메이저-버전-출시-시"],"text":[0,"메이저 버전 출시 시"]}],[0,{"depth":[0,2],"slug":[0,"메이저-릴리스"],"text":[0,"메이저 릴리스"]}],[0,{"depth":[0,3],"slug":[0,"버전"],"text":[0,"버전"]}],[0,{"depth":[0,4],"slug":[0,"ios"],"text":[0,"iOS"]}],[0,{"depth":[0,4],"slug":[0,"android"],"text":[0,"Android"]}],[0,{"depth":[0,4],"slug":[0,"javascript"],"text":[0,"JavaScript"]}],[0,{"depth":[0,2],"slug":[0,"예시"],"text":[0,"예시"]}],[0,{"depth":[0,2],"slug":[0,"이를-따르지-않을-경우"],"text":[0,"이를 따르지 않을 경우"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"how-to-release-major-version-in-capgo"],"title":[0,"Comment publier une version majeure dans Capgo"],"description":[0,"사용자 앱을 손상시키지 않고 앱의 주요 버전을 출시하는 것이 필요한 시기와 방법을 이해하기"],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[3,"2022-08-30T00:00:00.000Z"],"updated_at":[3,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/capgo-feature-image.webp"],"head_image_alt":[0,"Capgo 주요 버전 시스템"],"keywords":[0,"mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Tutorial"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,"how-to-send-specific-version-to-users"]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/how-version-work-in-capgo.md"],"data":[0,{"slug":[0,"how-version-work-in-capgo"],"title":[0,"Wie Versionen in Capgo funktionieren"],"description":[0,"Erfahren Sie, wie Capgo die Versionen Ihrer Capacitor-App verwaltet und wie Sie das Beste daraus machen können. Verstehen Sie die Bedeutung von Major, Minor und Patch."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[0,"2022-08-25T00:00:00.000Z"],"updated_at":[0,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/versionning.webp"],"head_image_alt":[0,"Capgo의 번들 버전 시스템"],"keywords":[0,"mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Tutorial"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,"how-to-release-major-version-in-capgo"]}],"body":[0,"Capgo는 Capacitor 앱에서 버전을 관리하기 위해 2가지 주요 변수를 사용합니다:\n - 네이티브 버전\n - JavaScript 버전\n\nCapgo는 Capacitor 앱에서 버전을 관리하기 위해 2가지 주요 변수를 사용합니다:
\n모든 버전 선택은 Capgo 서버 측에서 결정됩니다
\nCapgo는 버전 관리를 위해 SemVer 시스템을 사용합니다. 자세한 내용은 여기에서 확인하세요
\nCapgo가 비교할 버전을 찾는 위치
\n\n\n\n
capacitorconfigjson
파일에서 version 키를 설정하여 이 동작을 재정의할 수 있습니다 설명서\n네이티브 버전은 모든 플랫폼에서 무시됩니다
IOS에서는 ios/App/App/Infoplist
의 CFBundleShortVersionString
키 또는 ios/App/Appxcodeproj/projectpbxproj
의 MARKETING_VERSION
키에서 변수가 설정됩니다 (Infoplist
파일에 MARKETING_VERSION
이 설정된 경우)
Android에서는 android/app/buildgradle
의 defaultConfigversionName
키에서 변수가 설정됩니다
JavaScript에서는 packagejson
의 version
키에서 변수를 설정할 수 있습니다\n그렇지 않으면 업로드 명령에서 제공해야 합니다
설정을 변경하지 않았을 때 Capgo 채널이 작동하는 방식입니다
\n\n\n이 동작은 기본으로 설정한 유일한 채널을 기반으로 합니다
\n
사용자가 Ionic 앱을 처음 다운로드하고 앱을 열면 Capgo 서버에 연결됩니다
\n현재 4가지 결과가 발생할 수 있습니다:
\n이 설정을 false로 변경하면 Capgo는 항상 신뢰할 수 있는 버전 소스로 간주됩니다\n그러면 동작이 다음과 같이 됩니다:
\n\n\nCapgo가 사용자에게 자신의 버전을 전송합니다
\n
선택할 수 있는 몇 가지 전략이 있습니다. 여기에서 자세히 알아보세요
\nJavaScript 번들 버전은 npx @capgo/cli@latest bundle upload --channel production
을 실행할 때 전송하는 버전입니다
--bundle 123
옵션을 사용하지 않은 경우 Capgo는 packagejson
파일의 version 키에서 번들 버전을 가져옵니다
Ionic 앱이 Capgo에서 버전을 설치한 후에는 다음을 비교하게 됩니다:
\n다음과 같은 보호 조건이 있습니다:
\n네이티브 아래로 자동 다운그레이드 비활성화
조건이 적용됩니다MAJOR 이상 자동 업그레이드 비활성화
조건이 적용됩니다Capacitor JS 앱을 앱 스토어에 게시할 때 일어나는 일은 간단합니다
\n사용자는 스토어에서 새 버전을 받고 기본적으로 앱의 모든 로컬 업데이트가 제거됩니다
\n이 동작을 변경하려면 resetWhenUpdate
설정을 변경해야 합니다. 자세한 내용은 여기에서 확인하세요
이는 다른 설정과 달리 클라우드가 아닌 앱 측에서만 변경할 수 있습니다
\n이 모든 동작 이후에 deviceID와 관련된 특정 동작을 가질 수 있습니다
\nCapgo에서는 각 deviceID에 대한 동작을 재정의할 수 있습니다
\ndeviceID를 다음과 연결할 수 있습니다:
\n이는 위에서 설정한 모든 설정을 무시합니다
\n자세한 내용은 아래 문서에서 확인하세요
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"버전-관리-시스템"],"text":[0,"버전 관리 시스템"]}],[0,{"depth":[0,3],"slug":[0,"버전"],"text":[0,"버전"]}],[0,{"depth":[0,4],"slug":[0,"ios"],"text":[0,"IOS"]}],[0,{"depth":[0,4],"slug":[0,"android"],"text":[0,"Android"]}],[0,{"depth":[0,4],"slug":[0,"javascript-capgo-번들-버전"],"text":[0,"JavaScript (Capgo 번들 버전)"]}],[0,{"depth":[0,2],"slug":[0,"기본-동작"],"text":[0,"기본 동작"]}],[0,{"depth":[0,3],"slug":[0,"capacitor-앱을-처음-설치할-때"],"text":[0,"Capacitor 앱을 처음 설치할 때"]}],[0,{"depth":[0,3],"slug":[0,"기타-설정"],"text":[0,"기타 설정"]}],[0,{"depth":[0,4],"slug":[0,"네이티브-아래로-자동-다운그레이드-비활성화"],"text":[0,"네이티브 아래로 자동 다운그레이드 비활성화"]}],[0,{"depth":[0,4],"slug":[0,"자동-업그레이드-전략-비활성화"],"text":[0,"자동 업그레이드 전략 비활성화"]}],[0,{"depth":[0,2],"slug":[0,"javascript-번들-버전"],"text":[0,"JavaScript 번들 버전"]}],[0,{"depth":[0,2],"slug":[0,"앱-스토어-업데이트"],"text":[0,"앱 스토어 업데이트"]}],[0,{"depth":[0,3],"slug":[0,"기타-설정-1"],"text":[0,"기타 설정"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"how-version-work-in-capgo"],"title":[0,"Wie Versionen in Capgo funktionieren"],"description":[0,"Erfahren Sie, wie Capgo die Versionen Ihrer Capacitor-App verwaltet und wie Sie das Beste daraus machen können. Verstehen Sie die Bedeutung von Major, Minor und Patch."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[3,"2022-08-25T00:00:00.000Z"],"updated_at":[3,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/versionning.webp"],"head_image_alt":[0,"Capgo의 번들 버전 시스템"],"keywords":[0,"mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Tutorial"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,"how-to-release-major-version-in-capgo"]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/automatic-build-and-release-with-gitlab.md"],"data":[0,{"slug":[0,"automatic-build-and-release-with-gitlab"],"title":[0,"Gitlab을 통한 자동 빌드 및 배포"],"description":[0,"GitLab을 사용하여 무료로 자체 CI/CD 파이프라인을 만들고 주요 브랜치에 푸시할 때마다 애플리케이션을 배포하세요."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[0,"2022-06-16T00:00:00.000Z"],"updated_at":[0,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/gitlab_ci.webp"],"head_image_alt":[0,"Gitlab CI 일러스트레이션"],"keywords":[0,"Gitlab, CI/CD, automatic build, automatic release, mobile app updates"],"tag":[0,"CI/CD"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"body":[0,"# GitLab CI에 관한 튜토리얼이지만, 약간의 수정으로 다른 CI/CD 플랫폼에도 적용할 수 있습니다.\n\n## 서문\n\nCapgo에 앱을 먼저 추가했는지 확인하세요. 이 튜토리얼은 업로드 단계에만 초점을 맞추고 있습니다.\n\n## 커밋 컨벤션\n\n먼저 [conventional commits](https://www.conventionalcommits.org/en/v1.0.0/)의 커밋 컨벤션을 따라야 합니다. 이는 버전 번호를 업그레이드하는 방법을 도구가 이해하는 데 도움이 됩니다. 배우는 데 5분이면 충분합니다.\n\n\n\n## 태그를 위한 GitLab CI\n\n그 다음 자동으로 빌드하고 태그를 생성하는 첫 번째 GitLab을 생성해야 합니다.\n\n`github/workflows/bump_version.yml` 경로에 파일을 생성하세요.\n\n다음 내용으로:\n\n```toml\nname: Bump version\n\non:\n push:\n branches:\n - main\n\njobs:\n bump-version:\n if: \"!startsWith(github.event.head_commit.message, 'chore(release):')\"\n runs-on: ubuntu-latest\n name: \"Bump version and create changelog with standard version\"\n steps:\n - name: Check out\n uses: actions/checkout@v4\n with:\n fetch-depth: 0\n token: '${{ secrets.PERSONAL_ACCESS_TOKEN }}'\n - name: Git config\n run: |\n git config --local user.name \"github-actions[bot]\"\n git config --local user.email \"github-actions[bot]@users.noreply.github.com\"\n - name: Create bump and changelog\n run: npx capacitor-standard-version\n - name: Push to origin\n run: |\n CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD)\n remote_repo=\"https://${GITHUB_ACTOR}:${{ secrets.PERSONAL_ACCESS_TOKEN }}@github.com/${GITHUB_REPOSITORY}.git\"\n git pull $remote_repo $CURRENT_BRANCH\n git push $remote_repo HEAD:$CURRENT_BRANCH --follow-tags --tags\n```\n\n이는 메인 브랜치의 모든 커밋에 대해 태그를 릴리스하고 메인 브랜치의 각 커밋에 대해 `CHANGELOG.md`에 변경 로그 항목을 추가합니다.\n\n이 파일이 없어도 걱정하지 마세요. 자동으로 생성됩니다.\n\n이를 작동시키기 위해, [PERSONAL_ACCESS](https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/creating-a-personal-access-token/)를 생성하고 GitHub [secret](https://docs.github.com/en/actions/security-guides/encrypted-secrets \"GitHub secrets\")에 `PERSONAL_ACCESS_TOKEN`으로 저장하세요.\n\n이는 CI가 변경 로그를 커밋할 수 있도록 하는데 필요합니다.\n\n토큰을 생성할 때, 만료를 `never`로, 범위를 `repo`로 선택하세요.\n\n마지막으로, 도구가 버전이 저장된 위치를 이해할 수 있도록 저장소의 루트에 `cz.toml` 파일을 생성해야 합니다.\n\n그리고 다음 내용을 추가하세요:\n\n```toml\n[tool.commitizen]\nname = \"cz_conventional_commits\"\ntag_format = \"$major.$minor.$patch$prerelease\"\nversion = \"0.11.5\"\nversion_files = [\n \"package.json:version\",\n \".cz.toml\"\n]\n```\n\n이 파일의 버전을 `package.json` 파일의 버전과 동일하게 설정하세요.\n\n이는 처음에만 필요하며, 이후에는 도구가 자동으로 업데이트합니다.\n\n이제 두 파일을 커밋하고 GitHub에 첫 태그가 나타나는 것을 확인할 수 있습니다!\n\n## 빌드를 위한 GitHub actions\n\n`github/workflows/build.yml` 경로에 파일을 생성하세요.\n\n다음 내용으로:\n\n```toml\nname: Build source code and send to Capgo\n\non:\n push:\n tags:\n - '*'\n \njobs:\n deploy:\n runs-on: ubuntu-latest\n name: \"Build code and release\"\n steps:\n - name: Check out\n uses: actions/checkout@v4\n - name: Install dependencies\n id: install_code\n run: npm i\n - name: Build\n id: build_code\n run: npm run build\n env: # Remove both lines if you don't need it\n FIREBASE_CONFIG: ${{ secrets.FIREBASE_CONFIG }} # Exemple of env var coming from a secret\n - name: Create Release\n id: create_release\n run: npx @capgo/cli@latest bundle upload -a ${{ secrets.CAPGO_TOKEN }} -c production\n```\n\n이는 의존성을 설치하고 빌드한 후 Capgo로 전송합니다.\n\n빌드 명령어가 다르다면 `build_code` 단계에서 변경할 수 있습니다.\n\n이를 작동시키기 위해, Capgo용 API 키를 얻어서 [GitHub 저장소의 secret](https://docs.github.com/en/actions/security-guides/encrypted-secrets/)에 `CAPGO_TOKEN`으로 추가해야 합니다.\n\n이제 두 파일을 커밋하고 GitHub에 첫 태그가 나타나는 것을 확인할 수 있습니다!\n\n커밋을 추가하면 프로덕션 채널용 새로운 빌드가 생성됩니다.\n\n코드가 작동하는지 확인하기 위해 빌드 단계에 테스트를 추가해야 합니다.\n\nCapgo 대시보드로 가서 방금 나타난 빌드를 확인하세요. 이제 CI/CD 시스템이 구축되었습니다.\n\n모든 사용자가 업데이트가 가능할 때마다 받을 수 있도록 하려면, 채널로 가서 `public`으로 설정하세요."],"filePath":[0,"src/content/blog/ko/automatic-build-and-release-with-gitlab.md"],"digest":[0,"f61e6c4e2ef8a7db"],"rendered":[0,{"html":[0,"Capgo에 앱을 먼저 추가했는지 확인하세요. 이 튜토리얼은 업로드 단계에만 초점을 맞추고 있습니다.
\n먼저 conventional commits의 커밋 컨벤션을 따라야 합니다. 이는 버전 번호를 업그레이드하는 방법을 도구가 이해하는 데 도움이 됩니다. 배우는 데 5분이면 충분합니다.
\n그 다음 자동으로 빌드하고 태그를 생성하는 첫 번째 GitLab을 생성해야 합니다.
\ngithub/workflows/bump_version.yml
경로에 파일을 생성하세요.
다음 내용으로:
\nname: Bump version\non: push: branches: - main\njobs: bump-version: if: \"!startsWith(github.event.head_commit.message, 'chore(release):')\" runs-on: ubuntu-latest name: \"Bump version and create changelog with standard version\" steps: - name: Check out uses: actions/checkout@v4 with: fetch-depth: 0 token: '${{ secrets.PERSONAL_ACCESS_TOKEN }}' - name: Git config run: | git config --local user.name \"github-actions[bot]\" git config --local user.email \"github-actions[bot]@users.noreply.github.com\" - name: Create bump and changelog run: npx capacitor-standard-version - name: Push to origin run: | CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD) remote_repo=\"https://${GITHUB_ACTOR}:${{ secrets.PERSONAL_ACCESS_TOKEN }}@github.com/${GITHUB_REPOSITORY}.git\" git pull $remote_repo $CURRENT_BRANCH git push $remote_repo HEAD:$CURRENT_BRANCH --follow-tags --tags
이는 메인 브랜치의 모든 커밋에 대해 태그를 릴리스하고 메인 브랜치의 각 커밋에 대해 CHANGELOG.md
에 변경 로그 항목을 추가합니다.
이 파일이 없어도 걱정하지 마세요. 자동으로 생성됩니다.
\n이를 작동시키기 위해, PERSONAL_ACCESS를 생성하고 GitHub secret에 PERSONAL_ACCESS_TOKEN
으로 저장하세요.
이는 CI가 변경 로그를 커밋할 수 있도록 하는데 필요합니다.
\n토큰을 생성할 때, 만료를 never
로, 범위를 repo
로 선택하세요.
마지막으로, 도구가 버전이 저장된 위치를 이해할 수 있도록 저장소의 루트에 cz.toml
파일을 생성해야 합니다.
그리고 다음 내용을 추가하세요:
\n[tool.commitizen]name = \"cz_conventional_commits\"tag_format = \"$major.$minor.$patch$prerelease\"version = \"0.11.5\"version_files = [ \"package.json:version\", \".cz.toml\"]
이 파일의 버전을 package.json
파일의 버전과 동일하게 설정하세요.
이는 처음에만 필요하며, 이후에는 도구가 자동으로 업데이트합니다.
\n이제 두 파일을 커밋하고 GitHub에 첫 태그가 나타나는 것을 확인할 수 있습니다!
\ngithub/workflows/build.yml
경로에 파일을 생성하세요.
다음 내용으로:
\nname: Build source code and send to Capgo\non: push: tags: - '*'\njobs: deploy: runs-on: ubuntu-latest name: \"Build code and release\" steps: - name: Check out uses: actions/checkout@v4 - name: Install dependencies id: install_code run: npm i - name: Build id: build_code run: npm run build env: # Remove both lines if you don't need it FIREBASE_CONFIG: ${{ secrets.FIREBASE_CONFIG }} # Exemple of env var coming from a secret - name: Create Release id: create_release run: npx @capgo/cli@latest bundle upload -a ${{ secrets.CAPGO_TOKEN }} -c production
이는 의존성을 설치하고 빌드한 후 Capgo로 전송합니다.
\n빌드 명령어가 다르다면 build_code
단계에서 변경할 수 있습니다.
이를 작동시키기 위해, Capgo용 API 키를 얻어서 GitHub 저장소의 secret에 CAPGO_TOKEN
으로 추가해야 합니다.
이제 두 파일을 커밋하고 GitHub에 첫 태그가 나타나는 것을 확인할 수 있습니다!
\n커밋을 추가하면 프로덕션 채널용 새로운 빌드가 생성됩니다.
\n코드가 작동하는지 확인하기 위해 빌드 단계에 테스트를 추가해야 합니다.
\nCapgo 대시보드로 가서 방금 나타난 빌드를 확인하세요. 이제 CI/CD 시스템이 구축되었습니다.
\n모든 사용자가 업데이트가 가능할 때마다 받을 수 있도록 하려면, 채널로 가서 public
으로 설정하세요.
이 튜토리얼은 GitHub 호스팅에 중점을 두고 있지만, 약간의 수정으로 다른 CI/CD 플랫폼에도 적용할 수 있습니다.
\n먼저 Capacitor 앱을 Capgo에 추가했는지 확인하세요. 이 튜토리얼은 업로드 단계에만 중점을 둡니다.\nCapgo에 앱을 추가해야 하는 경우 이 튜토리얼을 따르세요.
\n먼저 conventional commits 커밋 규칙을 따라야 합니다. 이는 도구가 버전 번호를 어떻게 업그레이드할지 이해하는데 도움이 됩니다. 배우는데 5분이면 충분합니다.
\n그다음 자동으로 빌드하고 태그를 생성하는 첫 번째 GitHub 액션을 만들어야 합니다.
\n다음 경로에 파일을 생성하세요: github/workflows/bump_version.yml
다음 내용으로:
\nname: Bump version\non: push: branches: - main\njobs: bump-version: if: \"!startsWith(github.event.head_commit.message, 'chore(release):')\" runs-on: ubuntu-latest name: \"Bump version and create changelog with standard version\" steps: - name: Check out uses: actions/checkout@v4 with: fetch-depth: 0 token: '${{ secrets.PERSONAL_ACCESS_TOKEN }}' - name: Git config run: | git config --local user.name \"github-actions[bot]\" git config --local user.email \"github-actions[bot]@users.noreply.github.com\" - name: Create bump and changelog run: npx capacitor-standard-version - name: Push to origin run: | CURRENT_BRANCH=$(git rev-parse --abbrev-ref HEAD) remote_repo=\"https://${GITHUB_ACTOR}:${{ secrets.PERSONAL_ACCESS_TOKEN }}@github.com/${GITHUB_REPOSITORY}.git\" git pull $remote_repo $CURRENT_BRANCH git push $remote_repo HEAD:$CURRENT_BRANCH --follow-tags --tags
이것은 main 브랜치의 모든 커밋에 대해 태그를 릴리스하고 main 브랜치의 각 커밋에 대한 changelog 항목을 CHANGELOG.md
에 추가합니다.
이 파일이 없어도 걱정하지 마세요. 자동으로 생성됩니다.
\n이를 작동시키려면 PERSONAL_ACCESS를 생성하고 GitHub secret에 PERSONAL_ACCESS_TOKEN
으로 추가하세요.
이는 CI가 changelog를 커밋할 수 있도록 하는데 필요합니다.
\n토큰을 생성할 때 만료를 never
로, 범위를 repo
로 선택하세요.
마지막으로 package.json
파일의 버전을 설정하고 네이티브 버전 번호와 동기화하세요. 이는 다음 단계를 용이하게 합니다.
이는 처음에만 필요하며, 이후에는 도구가 자동으로 업데이트합니다.
\n이제 두 파일을 커밋하고 GitHub에 첫 번째 태그가 나타나는 것을 확인할 수 있습니다!
\n네이티브와 웹 플랫폼 모두 각 커밋 후에 버전 번호가 증가합니다.
\n다음 경로에 파일을 생성하세요: github/workflows/build.yml
다음 내용으로:
\nname: Build source code and send to Capgo\non: push: tags: - '*'\njobs: deploy: runs-on: ubuntu-latest name: \"Build code and release\" steps: - name: Check out uses: actions/checkout@v4 - name: Install dependencies id: install_code run: npm i - name: Build id: build_code run: npm run build env: # Remove both lines if you don't need it FIREBASE_CONFIG: ${{ secrets.FIREBASE_CONFIG }} # Exemple of env var coming from a secret - name: Create Release id: create_release run: npx @capgo/cli@latest bundle upload -a ${{ secrets.CAPGO_TOKEN }} -c production
이것은 Capgo로 보내기 전에 의존성을 설치하고 빌드합니다.
\n빌드 명령어가 다르다면 build_code
단계에서 변경할 수 있습니다.
이를 작동시키려면 Capgo API 키를 받아서 GitHub 저장소의 secret에 CAPGO_TOKEN
으로 추가해야 합니다.
이제 두 파일을 커밋하고 GitHub에 첫 번째 태그가 나타나는 것을 확인할 수 있습니다!
\n커밋을 추가하면 프로덕션 채널용 새로운 빌드가 생성됩니다.
\n코드가 작동하는지 확인하기 위해 빌드 단계에 테스트를 추가해야 합니다.
\nCapgo 대시보드로 가서 방금 나타난 빌드를 확인하세요. 이제 CI/CD 시스템이 구축되었습니다.
\n모든 사용자가 업데이트가 가능할 때마다 받을 수 있도록 하려면, 채널로 가서 public
으로 설정하세요.
다음 튜토리얼을 따라 Ionic Capacitor JavaScript 앱의 네이티브 빌드도 추가할 수 있습니다 👇
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"서문"],"text":[0,"서문"]}],[0,{"depth":[0,2],"slug":[0,"커밋-규칙"],"text":[0,"커밋 규칙"]}],[0,{"depth":[0,2],"slug":[0,"태그를-위한-github-액션"],"text":[0,"태그를 위한 GitHub 액션"]}],[0,{"depth":[0,2],"slug":[0,"빌드를-위한-github-액션"],"text":[0,"빌드를 위한 GitHub 액션"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"automatic-build-and-release-with-github-actions"],"title":[0,"Github actions를 사용한 자동 빌드 및 앱 릴리스"],"description":[0,"Github actions를 사용하여 무료로 나만의 CI/CD 파이프라인을 만들고, main 브랜치에 푸시할 때마다 Ionic Capacitor JS 애플리케이션을 배포하세요."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[3,"2022-03-23T00:00:00.000Z"],"updated_at":[3,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/github_actions.webp"],"head_image_alt":[0,"Github 작업 예시"],"keywords":[0,"Github actions, CI/CD, automatic build, automatic release, mobile app updates"],"tag":[0,"CI/CD"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,"automatic-capacitor-ios-build-github-action"]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/appcenter-migration.md"],"data":[0,{"slug":[0,"appcenter-migration"],"title":[0,"Migration von App Center zu Capgo"],"description":[0,"Microsoft CodePush의 대안인 Capgo Live Updates의 전체 마이그레이션 과정을 안내해드리겠습니다."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[0,"2022-03-22T00:00:00.000Z"],"updated_at":[0,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/migrate_appcenter.webp"],"head_image_alt":[0,"Capacitor JS 데브를 위한 대안 검색"],"keywords":[0,"App Center, migration, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Migration"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,"automatic-build-and-release-with-github-actions"]}],"body":[0,"## 마이그레이션 요약\n\n* [Capgo](/register/)는 개발팀이 배포된 앱에 실시간 앱을 전송하는 것을 돕는 서비스입니다\n* jQuery Mobile, Framework 7, Sencha, KendoUI, Ionic 또는 사용자 정의 솔루션으로 작성된 Capacitor JS 앱을 마이그레이션할 수 있습니다 **기존 Ionic 앱이 필요하지 않습니다**\n* [Colt](https://voltbuild/)는 App Center Build(Android/iOS 앱 빌드)에 대한 동등한 서비스를 제공합니다 테스트, 진단 및 분석 서비스용\n\n##### 참고\n\n앱이 여전히 Cordova를 사용하고 있다면, Capgo로 마이그레이션하기 전에 먼저 [Capacitor로 마이그레이션](https://capacitorjscom/docs/cordova/migrating-from-cordova-to-capacitor/)해야 합니다\n\nIonic 팀이 Cordova의 정신적 후계자로 만든 Capacitor는 더 나은 사용자 경험과 성능을 제공하는 것을 목표로 네이티브 도구 및 기능에 가깝게 개발할 수 있게 합니다\n\n다행히도 마이그레이션 과정은 쉽고 대부분의 Cordova 플러그인이 Capacitor와 하위 호환됩니다 [여기서 마이그레이션 시작하기](https://capacitorjscom/docs/cordova/migrating-from-cordova-to-capacitor/)\n\n## Capgo 소개\n\nCapgo는 시간이 지남에 따라 앱을 업데이트하는 것을 처리합니다 개발팀은 앱의 고유한 기능에 완전히 집중할 수 있으며 복잡한 앱 전달 프로세스를 Capgo에 아웃소싱할 수 있습니다\n\nCapgo는 웹 전달과 모바일 사이의 격차를 메워줍니다\n\n## Capgo 전제 조건\n\nApp Center와 마찬가지로, [Capgo](/register/)는 Azure DevOps, Bitbucket, GitHub 및 GitLab의 Git 저장소에 호스팅된 앱을 지원합니다\n\n### Capgo CLI 설치\n\n##### 참고\n\n계속하기 전에 컴퓨터에 Node와 NPM이 설치되어 있어야 합니다 항상 [현재 LTS 버전](https://nodejsorg/)을 사용하세요 Capgo는 이전 버전을 지원하지 않습니다\n\n### `packagejson` 및 Capacitor 구성 파일 생성\n\n##### 참고\n\n시작하기 전에 새로운 Git 브랜치에서 변경하는 것을 권장합니다\n\n[Capgo](/register/)는 capacitor 앱을 자동화하기 위해 만들어졌기 때문에, 앱에 없을 수 있는 하나의 파일이 필요합니다 먼저 `capacitorconfigjson` 파일을 생성하세요 앱의 루트에서 실행하는 것이 가장 쉬운 방법입니다:\n\n[[CODE_BLOCK]]\n\n그런 다음 CLI 설문을 사용하여 Capacitor를 초기화하세요:\n\n[[CODE_BLOCK]]\n\nCLI는 앱 이름부터 시작하여 앱에 사용하고 싶은 패키지 ID 등 몇 가지 질문을 할 것입니다\n\n마지막으로 새 파일을 프로젝트에 커밋하세요:\n\n git add git commit -m \"added package json and capacitor config\" && git push\n\n### 코드 마이그레이션\n\n이제 새로운 필수 [Capgo](/register/) 파일이 준비되었으니, 실제 앱 자체에 주목할 수 있습니다 [Capgo](/register/)는 빌드된 전체 앱이 `dist`라는 디렉토리 안에 있기를 기대합니다\n\n빌드된 코드가 `dist` 디렉토리에 없다면, Capacitor 구성 파일에서 이 값을 변경하세요\n\n앱의 디렉토리 구조는 다음과 같아야 합니다:\n\n\n\n## Capgo 구성\n\n앱이 [Capgo](https://webcapgoapp/) 통합을 위해 준비되었다면, 가입하고 첫 번째 버전을 업로드하기 위한 API 키를 받을 시간입니다! [Capgo 계정 가입](/register/)으로 시작하세요\n\nCapgo에 로그인하면 계정 페이지로 이동한 다음 API 키를 클릭하고, '쓰기' 키를 클릭하여 클립보드에 복사하세요\n\n### Capgo SDK 설치\n\n명령줄에서 Capacitor 앱 폴더의 루트에 직접 다음 명령을 실행하세요:\n\n`npm i @capgo/capacitor-updater && npx cap sync`\n플러그인을 Capacitor 앱에 설치하기 위해\n\n그리고 CodePush 대신 앱에 다음 코드를 추가하세요:\n\n[[CODE_BLOCK]]\n\n이는 네이티브 플러그인에 설치가 성공했음을 알려줄 것입니다\n\n## 실시간 업데이트 배포 (CodePush 대안)\n\n실시간 업데이트 기능은 네이티브 애플리케이션에 설치된 [Capgo SDK](https://githubcom/Cap-go/capacitor-updater/)를 사용하여 특정 배포 채널 대상을 수신합니다 웹 빌드가 채널 대상에 할당되면, 해당 업데이트는 지정된 채널 대상을 수신하도록 구성된 바이너리를 실행하는 사용자 기기에 배포됩니다"],"filePath":[0,"src/content/blog/ko/appcenter-migration.md"],"digest":[0,"3a1df61593aa13b4"],"rendered":[0,{"html":[0,"앱이 여전히 Cordova를 사용하고 있다면, Capgo로 마이그레이션하기 전에 먼저 Capacitor로 마이그레이션해야 합니다
\nIonic 팀이 Cordova의 정신적 후계자로 만든 Capacitor는 더 나은 사용자 경험과 성능을 제공하는 것을 목표로 네이티브 도구 및 기능에 가깝게 개발할 수 있게 합니다
\n다행히도 마이그레이션 과정은 쉽고 대부분의 Cordova 플러그인이 Capacitor와 하위 호환됩니다 여기서 마이그레이션 시작하기
\nCapgo는 시간이 지남에 따라 앱을 업데이트하는 것을 처리합니다 개발팀은 앱의 고유한 기능에 완전히 집중할 수 있으며 복잡한 앱 전달 프로세스를 Capgo에 아웃소싱할 수 있습니다
\nCapgo는 웹 전달과 모바일 사이의 격차를 메워줍니다
\nApp Center와 마찬가지로, Capgo는 Azure DevOps, Bitbucket, GitHub 및 GitLab의 Git 저장소에 호스팅된 앱을 지원합니다
\n계속하기 전에 컴퓨터에 Node와 NPM이 설치되어 있어야 합니다 항상 현재 LTS 버전을 사용하세요 Capgo는 이전 버전을 지원하지 않습니다
\npackagejson
및 Capacitor 구성 파일 생성시작하기 전에 새로운 Git 브랜치에서 변경하는 것을 권장합니다
\nCapgo는 capacitor 앱을 자동화하기 위해 만들어졌기 때문에, 앱에 없을 수 있는 하나의 파일이 필요합니다 먼저 capacitorconfigjson
파일을 생성하세요 앱의 루트에서 실행하는 것이 가장 쉬운 방법입니다:
[[CODE_BLOCK]]
\n그런 다음 CLI 설문을 사용하여 Capacitor를 초기화하세요:
\n[[CODE_BLOCK]]
\nCLI는 앱 이름부터 시작하여 앱에 사용하고 싶은 패키지 ID 등 몇 가지 질문을 할 것입니다
\n마지막으로 새 파일을 프로젝트에 커밋하세요:
\ngit add git commit -m \"added package json and capacitor config\" && git push
이제 새로운 필수 Capgo 파일이 준비되었으니, 실제 앱 자체에 주목할 수 있습니다 Capgo는 빌드된 전체 앱이 dist
라는 디렉토리 안에 있기를 기대합니다
빌드된 코드가 dist
디렉토리에 없다면, Capacitor 구성 파일에서 이 값을 변경하세요
앱의 디렉토리 구조는 다음과 같아야 합니다:
\n앱이 Capgo 통합을 위해 준비되었다면, 가입하고 첫 번째 버전을 업로드하기 위한 API 키를 받을 시간입니다! Capgo 계정 가입으로 시작하세요
\nCapgo에 로그인하면 계정 페이지로 이동한 다음 API 키를 클릭하고, ‘쓰기’ 키를 클릭하여 클립보드에 복사하세요
\n명령줄에서 Capacitor 앱 폴더의 루트에 직접 다음 명령을 실행하세요:
\nnpm i @capgo/capacitor-updater && npx cap sync
\n플러그인을 Capacitor 앱에 설치하기 위해
그리고 CodePush 대신 앱에 다음 코드를 추가하세요:
\n[[CODE_BLOCK]]
\n이는 네이티브 플러그인에 설치가 성공했음을 알려줄 것입니다
\n실시간 업데이트 기능은 네이티브 애플리케이션에 설치된 Capgo SDK를 사용하여 특정 배포 채널 대상을 수신합니다 웹 빌드가 채널 대상에 할당되면, 해당 업데이트는 지정된 채널 대상을 수신하도록 구성된 바이너리를 실행하는 사용자 기기에 배포됩니다
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"마이그레이션-요약"],"text":[0,"마이그레이션 요약"]}],[0,{"depth":[0,5],"slug":[0,"참고"],"text":[0,"참고"]}],[0,{"depth":[0,2],"slug":[0,"capgo-소개"],"text":[0,"Capgo 소개"]}],[0,{"depth":[0,2],"slug":[0,"capgo-전제-조건"],"text":[0,"Capgo 전제 조건"]}],[0,{"depth":[0,3],"slug":[0,"capgo-cli-설치"],"text":[0,"Capgo CLI 설치"]}],[0,{"depth":[0,5],"slug":[0,"참고-1"],"text":[0,"참고"]}],[0,{"depth":[0,3],"slug":[0,"packagejson-및-capacitor-구성-파일-생성"],"text":[0,"packagejson 및 Capacitor 구성 파일 생성"]}],[0,{"depth":[0,5],"slug":[0,"참고-2"],"text":[0,"참고"]}],[0,{"depth":[0,3],"slug":[0,"코드-마이그레이션"],"text":[0,"코드 마이그레이션"]}],[0,{"depth":[0,2],"slug":[0,"capgo-구성"],"text":[0,"Capgo 구성"]}],[0,{"depth":[0,3],"slug":[0,"capgo-sdk-설치"],"text":[0,"Capgo SDK 설치"]}],[0,{"depth":[0,2],"slug":[0,"실시간-업데이트-배포-codepush-대안"],"text":[0,"실시간 업데이트 배포 (CodePush 대안)"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"appcenter-migration"],"title":[0,"Migration von App Center zu Capgo"],"description":[0,"Microsoft CodePush의 대안인 Capgo Live Updates의 전체 마이그레이션 과정을 안내해드리겠습니다."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[3,"2022-03-22T00:00:00.000Z"],"updated_at":[3,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/migrate_appcenter.webp"],"head_image_alt":[0,"Capacitor JS 데브를 위한 대안 검색"],"keywords":[0,"App Center, migration, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Migration"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,"automatic-build-and-release-with-github-actions"]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/moving-from-microsoft-app-center-to-capgo.md"],"data":[0,{"slug":[0,"moving-from-microsoft-app-center-to-capgo"],"title":[0,"Von Microsoft App Center zu Capgo für Live App Updates wechseln"],"description":[0,"Microsoft beendet die Unterstützung für Cordova-basierte Anwendungen. Wechseln Sie von Microsoft App Center zu Capgo für Live Mobile App Updates"],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[0,"2022-03-21T00:00:00.000Z"],"updated_at":[0,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/app_center.webp"],"head_image_alt":[0,"Microsoft App Center 일러스트레이션"],"keywords":[0,"Microsoft, App Center, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Alternatives"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"body":[0,"Microsoft는 최근 자사의 클라우드 제품인 App Center에서 [Apache Cordova에서 실행되는 앱에 대한 지원을 중단](https://devblogsmicrosoftcom/appcenter/announcing-apache-cordova-retirement/)한다고 발표했습니다. 이로 인해 App Center를 사용하는 기업과 팀들이 대안을 찾게 되었고, [Capgo](https://capgoapp/) 플랫폼이 Capacitor 앱을 완벽하게 지원하는 훌륭한 옵션이라는 점을 말씀드리게 되어 기쁩니다.\n\n## Microsoft App Center에서 Capgo Cloud로\n\nCapacitor는 Ionic으로 네이티브 모바일 앱을 구축하는 새로운 방식이며, 대부분의 Cordova 플러그인이 Capacitor에서 지원됩니다. Capgo는 CodePush와 유사한 실시간 업데이트 기능을 제공하지만, 플랫폼 종속성이 없고 즉각적인 앱 배포가 가능합니다. Capgo를 통해 개발팀은 복잡한 앱 제공 프로세스를 아웃소싱하고 Ionic 앱의 고유한 기능에만 전적으로 집중할 수 있습니다. 또한 App Center와 달리 Capgo는 Capacitor와 같은 하이브리드 아키텍처에 100% 집중하고 있습니다.\n\nCapacitor 고객은 전체 프로세스를 안내하는 [마이그레이션 가이드](https://capgoapp/blog/appcenter-migration/)를 사용하여 몇 가지 단계만으로 Microsoft App Center에서 Capgo로 쉽게 마이그레이션할 수 있습니다. Capgo는 Capacitor 사용자가 활용할 수 있는 완전한 기능 목록을 포함하고 있습니다.\n\nMicrosoft App Center에서 Capgo로의 마이그레이션에 대해 자세히 알아보시려면, 지금 [무료 Capgo 계정](/register/)을 만들어보세요.\n\n## 크레딧\n\n[Ionic](https://ioniccom/)에 많은 감사를 드립니다. 이 글은 [이 글](https://ionicio/blog/moving-from-microsoft-app-center-to-ionic-appflow/)을 chat-gpt-3로 다시 작성하고 수정한 것입니다."],"filePath":[0,"src/content/blog/ko/moving-from-microsoft-app-center-to-capgo.md"],"digest":[0,"9ac6a3eae72ea77f"],"rendered":[0,{"html":[0,"Microsoft는 최근 자사의 클라우드 제품인 App Center에서 Apache Cordova에서 실행되는 앱에 대한 지원을 중단한다고 발표했습니다. 이로 인해 App Center를 사용하는 기업과 팀들이 대안을 찾게 되었고, Capgo 플랫폼이 Capacitor 앱을 완벽하게 지원하는 훌륭한 옵션이라는 점을 말씀드리게 되어 기쁩니다.
\nCapacitor는 Ionic으로 네이티브 모바일 앱을 구축하는 새로운 방식이며, 대부분의 Cordova 플러그인이 Capacitor에서 지원됩니다. Capgo는 CodePush와 유사한 실시간 업데이트 기능을 제공하지만, 플랫폼 종속성이 없고 즉각적인 앱 배포가 가능합니다. Capgo를 통해 개발팀은 복잡한 앱 제공 프로세스를 아웃소싱하고 Ionic 앱의 고유한 기능에만 전적으로 집중할 수 있습니다. 또한 App Center와 달리 Capgo는 Capacitor와 같은 하이브리드 아키텍처에 100% 집중하고 있습니다.
\nCapacitor 고객은 전체 프로세스를 안내하는 마이그레이션 가이드를 사용하여 몇 가지 단계만으로 Microsoft App Center에서 Capgo로 쉽게 마이그레이션할 수 있습니다. Capgo는 Capacitor 사용자가 활용할 수 있는 완전한 기능 목록을 포함하고 있습니다.
\nMicrosoft App Center에서 Capgo로의 마이그레이션에 대해 자세히 알아보시려면, 지금 무료 Capgo 계정을 만들어보세요.
\nIonic에 많은 감사를 드립니다. 이 글은 이 글을 chat-gpt-3로 다시 작성하고 수정한 것입니다.
"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"microsoft-app-center에서-capgo-cloud로"],"text":[0,"Microsoft App Center에서 Capgo Cloud로"]}],[0,{"depth":[0,2],"slug":[0,"크레딧"],"text":[0,"크레딧"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"moving-from-microsoft-app-center-to-capgo"],"title":[0,"Von Microsoft App Center zu Capgo für Live App Updates wechseln"],"description":[0,"Microsoft beendet die Unterstützung für Cordova-basierte Anwendungen. Wechseln Sie von Microsoft App Center zu Capgo für Live Mobile App Updates"],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[3,"2022-03-21T00:00:00.000Z"],"updated_at":[3,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/app_center.webp"],"head_image_alt":[0,"Microsoft App Center 일러스트레이션"],"keywords":[0,"Microsoft, App Center, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Alternatives"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/update-your-capacitor-apps-seamlessly-using-capacitor-updater.md"],"data":[0,{"slug":[0,"update-your-capacitor-apps-seamlessly-using-capacitor-updater"],"title":[0,"Capacitor-updater를 사용하여 Capacitor 앱을 원활하게 업데이트하기"],"description":[0,"Capacitor Ionic 커뮤니티 여러분, 안녕하세요. 오늘은 여러분의 앱에 Capacitor-updater를 설정하는 것을 도와드리겠습니다. 이를 통해 원활한 릴리스를 할 수 있습니다."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[0,"2022-02-27T00:00:00.000Z"],"updated_at":[0,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/update_flow.webp"],"head_image_alt":[0,"Capacitor 개발자를 위한 대안 검색"],"keywords":[0,"Capacitor, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Tutorial"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"body":[0,"## Capacitor-updater란 무엇인가?\n\nCapacitor-updater는 앱 업데이트와 개선사항을 최종 사용자에게 즉시 전달하는 것을 도와주는 기술입니다\n\n특히 중요한 버그 수정을 하고 App Store 심사 과정 없이 즉시 전달하고 싶을 때 매우 유용합니다\n\n사용 가능한 업데이트를 즉시 사이드로딩할 수 있는 \"웹과 같은\" 민첩성을 가진 것으로 생각할 수 있습니다\n\n또한 새로운 업데이트가 앱을 중단시키는 경우 롤백을 제공합니다\n\n## 어떻게 작동하나요?\n\nCapgo는 앱의 JavaScript 번들을 Capgo 서버와 동기화 상태로 유지하며, 사용자가 앱을 열 때마다 Capgo 서버에서 번들에 대한 새로운 업데이트가 있는지 확인합니다. 물론 사용자 경험을 미세 조정하는 데 도움이 되는 수많은 멋진 구성이 함께 제공됩니다\n\n저는 제가 만드는 모든 프로젝트에서 Capgo를 사용합니다. 이를 통해 App Store 검토 프로세스에 소요되는 시간을 줄일 수 있습니다\n\n자세한 내용은 [여기](https://capgoapp/)에서 확인할 수 있습니다\n\n## 제한 사항이 있나요?\n\n좋아 보이지만, 우리가 명심해야 할 몇 가지 사항이 있습니다\n첫 번째는 OTA 업데이트가 __웹 번들에서만 작동한다는 것입니다__ \nCapacitor JS에서는 거의 모든 코드를 JS, CSS, HTML로 작성하기 때문에 이것이 큰 제한은 아니라고 생각할 수 있습니다\n이것이 사실일 수 있지만, 앱에 설치하는 네이티브 모듈도 여전히 있습니다\n모듈이 android나 iOS 디렉토리를 변경하는 경우 OTA를 사용하여 앱을 업데이트할 수 없습니다\n이는 이러한 디렉토리의 내용이 OTA가 업데이트할 수 없는 네이티브 바이너리를 컴파일하는 데 사용되기 때문입니다\n네이티브 앱조차도 이 부분을 업데이트할 수 없습니다\n\n하지만 CI/CD를 설정하여 이 부분을 처리할 수 있습니다. [여기 IOS용](https://capgoapp/blog/automatic-capacitor-android-build-github-action/)에서 이를 수행하는 방법에 대한 튜토리얼을 만들었습니다\n\n## 자동 Capgo 구성\n\n가입하고 첫 번째 버전을 업로드하기 위한 API 키를 받을 시간입니다! [Capgo 계정에 가입](/register/)하는 것으로 시작하세요\n\nCapgo에 로그인하면 온보딩 페이지가 표시됩니다 \n\n\n\n온보딩 페이지의 단계를 따라 첫 번째 앱을 추가하세요\n\n### CLI 가이드 따르기\n\n명령줄에서 Capacitor 앱의 루트 디렉토리에서 직접 실행하세요:\n\n`npx @capgo/cli@latest init`\nCapgo를 Capacitor 앱에 설치하기 위해 CLI가 Capgo로 앱을 설정하는 과정을 안내할 것입니다\n\n수동으로 하고 싶다면 아래 단계를 따르세요\n\n## 수동 Capgo 구성\n\n### 플러그인 설치\n\n앱에 다음 코드가 추가되어야 합니다:\n\n`npm i @capgo/capacitor-updater && npx cap sync`\nCapacitor 앱에 플러그인을 설치하기 위해\n\n그리고 JS 번들이 정상이라는 것을 네이티브 플러그인에 알리기 위해 앱에 이 코드를 추가하세요 (이를 하지 않으면 네이티브 플러그인이 이전 버전으로 롤백됩니다):\n\n```js\nimport { CapacitorUpdater } from '@capgo/capacitor-updater'\n\nCapacitorUpdater.notifyAppReady()\n```\n\n이는 네이티브 플러그인에 설치가 성공했음을 알립니다\n\n그런 다음 `npm run build && npx cap copy`를 실행하여 앱을 업데이트하세요\n\n### Capgo CLOUD에 로그인\n\n먼저 계정에 있는 `all` [apikey](https://webcapgoapp/dashboard/apikeys/)를 사용하여 CLI로 로그인하세요:\n\n`npx @capgo/cli@latest login YOU_KEY`\n\n### 첫 번째 앱 추가\n\nCLI로 Capgo Cloud에 앱을 생성하는 것부터 시작하겠습니다\n\n`npx @capgo/cli@latest app add`\n\n이 명령은 Capacitor 구성 파일에 정의된 모든 변수를 사용하여 앱을 생성합니다\n\n### 첫 번째 버전 업로드\n\n코드를 빌드하고 Capgo로 보내는 명령을 실행하세요:\n`npx @capgo/cli@latest bundle upload`\n\n기본적으로 버전 이름은 `packagejson` 파일의 버전이 됩니다\n\n[Capgo](https://webcapgoapp/)에서 빌드가 있는지 확인하세요\n\n내 [모바일 샌드박스 앱](https://capgoapp/app_mobile/)으로 테스트할 수도 있습니다\n\n### 채널을 기본값으로 설정\n\n앱을 Capgo로 보낸 후에는 앱이 Capgo에서 업데이트를 받을 수 있도록 채널을 `default`로 설정해야 합니다\n\n`npx @capgo/cli@latest channel set production -s default`\n\n## 디바이스에서 실시간 업데이트 받기\n\nDeploy에서 실시간 업데이트를 받으려면 디바이스나 에뮬레이터에서 앱을 실행해야 합니다에뮬레이터나 컴퓨터에 연결된 기기에서 로컬 앱을 실행하는 가장 쉬운 방법은 다음 명령어를 사용하는 것입니다\n\n npx cap run [ios | android]\n\n앱을 열고 백그라운드로 전환한 다음 다시 열면 로그에서 앱이 업데이트된 것을 확인할 수 있습니다\n\n축하합니다! 🎉 첫 번째 Live Update 배포에 성공하셨습니다. 이것은 Live Updates로 할 수 있는 것들의 시작일 뿐입니다. 자세한 내용은 [Live Updates 문서](/docs/plugin/cloud-mode/getting-started/)를 참조하세요\n\n> 로컬에서 업데이트 수신을 중지해야 하는 경우 다음 명령어를 실행하세요\n`npx @capgo/cli@latest channel set`"],"filePath":[0,"src/content/blog/ko/update-your-capacitor-apps-seamlessly-using-capacitor-updater.md"],"digest":[0,"463bb4684aaab1c4"],"rendered":[0,{"html":[0,"Capacitor-updater는 앱 업데이트와 개선사항을 최종 사용자에게 즉시 전달하는 것을 도와주는 기술입니다
\n특히 중요한 버그 수정을 하고 App Store 심사 과정 없이 즉시 전달하고 싶을 때 매우 유용합니다
\n사용 가능한 업데이트를 즉시 사이드로딩할 수 있는 “웹과 같은” 민첩성을 가진 것으로 생각할 수 있습니다
\n또한 새로운 업데이트가 앱을 중단시키는 경우 롤백을 제공합니다
\nCapgo는 앱의 JavaScript 번들을 Capgo 서버와 동기화 상태로 유지하며, 사용자가 앱을 열 때마다 Capgo 서버에서 번들에 대한 새로운 업데이트가 있는지 확인합니다. 물론 사용자 경험을 미세 조정하는 데 도움이 되는 수많은 멋진 구성이 함께 제공됩니다
\n저는 제가 만드는 모든 프로젝트에서 Capgo를 사용합니다. 이를 통해 App Store 검토 프로세스에 소요되는 시간을 줄일 수 있습니다
\n자세한 내용은 여기에서 확인할 수 있습니다
\n좋아 보이지만, 우리가 명심해야 할 몇 가지 사항이 있습니다\n첫 번째는 OTA 업데이트가 웹 번들에서만 작동한다는 것입니다\nCapacitor JS에서는 거의 모든 코드를 JS, CSS, HTML로 작성하기 때문에 이것이 큰 제한은 아니라고 생각할 수 있습니다\n이것이 사실일 수 있지만, 앱에 설치하는 네이티브 모듈도 여전히 있습니다\n모듈이 android나 iOS 디렉토리를 변경하는 경우 OTA를 사용하여 앱을 업데이트할 수 없습니다\n이는 이러한 디렉토리의 내용이 OTA가 업데이트할 수 없는 네이티브 바이너리를 컴파일하는 데 사용되기 때문입니다\n네이티브 앱조차도 이 부분을 업데이트할 수 없습니다
\n하지만 CI/CD를 설정하여 이 부분을 처리할 수 있습니다. 여기 IOS용에서 이를 수행하는 방법에 대한 튜토리얼을 만들었습니다
\n가입하고 첫 번째 버전을 업로드하기 위한 API 키를 받을 시간입니다! Capgo 계정에 가입하는 것으로 시작하세요
\nCapgo에 로그인하면 온보딩 페이지가 표시됩니다
\n온보딩 페이지의 단계를 따라 첫 번째 앱을 추가하세요
\n명령줄에서 Capacitor 앱의 루트 디렉토리에서 직접 실행하세요:
\nnpx @capgo/cli@latest init
\nCapgo를 Capacitor 앱에 설치하기 위해 CLI가 Capgo로 앱을 설정하는 과정을 안내할 것입니다
수동으로 하고 싶다면 아래 단계를 따르세요
\n앱에 다음 코드가 추가되어야 합니다:
\nnpm i @capgo/capacitor-updater && npx cap sync
\nCapacitor 앱에 플러그인을 설치하기 위해
그리고 JS 번들이 정상이라는 것을 네이티브 플러그인에 알리기 위해 앱에 이 코드를 추가하세요 (이를 하지 않으면 네이티브 플러그인이 이전 버전으로 롤백됩니다):
\nimport { CapacitorUpdater } from '@capgo/capacitor-updater'\nCapacitorUpdater.notifyAppReady()
이는 네이티브 플러그인에 설치가 성공했음을 알립니다
\n그런 다음 npm run build && npx cap copy
를 실행하여 앱을 업데이트하세요
먼저 계정에 있는 all
apikey를 사용하여 CLI로 로그인하세요:
npx @capgo/cli@latest login YOU_KEY
CLI로 Capgo Cloud에 앱을 생성하는 것부터 시작하겠습니다
\nnpx @capgo/cli@latest app add
이 명령은 Capacitor 구성 파일에 정의된 모든 변수를 사용하여 앱을 생성합니다
\n코드를 빌드하고 Capgo로 보내는 명령을 실행하세요:\nnpx @capgo/cli@latest bundle upload
기본적으로 버전 이름은 packagejson
파일의 버전이 됩니다
Capgo에서 빌드가 있는지 확인하세요
\n내 모바일 샌드박스 앱으로 테스트할 수도 있습니다
\n앱을 Capgo로 보낸 후에는 앱이 Capgo에서 업데이트를 받을 수 있도록 채널을 default
로 설정해야 합니다
npx @capgo/cli@latest channel set production -s default
Deploy에서 실시간 업데이트를 받으려면 디바이스나 에뮬레이터에서 앱을 실행해야 합니다에뮬레이터나 컴퓨터에 연결된 기기에서 로컬 앱을 실행하는 가장 쉬운 방법은 다음 명령어를 사용하는 것입니다
\nnpx cap run [ios | android]
앱을 열고 백그라운드로 전환한 다음 다시 열면 로그에서 앱이 업데이트된 것을 확인할 수 있습니다
\n축하합니다! 🎉 첫 번째 Live Update 배포에 성공하셨습니다. 이것은 Live Updates로 할 수 있는 것들의 시작일 뿐입니다. 자세한 내용은 Live Updates 문서를 참조하세요
\n\n"],"metadata":[0,{"headings":[1,[[0,{"depth":[0,2],"slug":[0,"capacitor-updater란-무엇인가"],"text":[0,"Capacitor-updater란 무엇인가?"]}],[0,{"depth":[0,2],"slug":[0,"어떻게-작동하나요"],"text":[0,"어떻게 작동하나요?"]}],[0,{"depth":[0,2],"slug":[0,"제한-사항이-있나요"],"text":[0,"제한 사항이 있나요?"]}],[0,{"depth":[0,2],"slug":[0,"자동-capgo-구성"],"text":[0,"자동 Capgo 구성"]}],[0,{"depth":[0,3],"slug":[0,"cli-가이드-따르기"],"text":[0,"CLI 가이드 따르기"]}],[0,{"depth":[0,2],"slug":[0,"수동-capgo-구성"],"text":[0,"수동 Capgo 구성"]}],[0,{"depth":[0,3],"slug":[0,"플러그인-설치"],"text":[0,"플러그인 설치"]}],[0,{"depth":[0,3],"slug":[0,"capgo-cloud에-로그인"],"text":[0,"Capgo CLOUD에 로그인"]}],[0,{"depth":[0,3],"slug":[0,"첫-번째-앱-추가"],"text":[0,"첫 번째 앱 추가"]}],[0,{"depth":[0,3],"slug":[0,"첫-번째-버전-업로드"],"text":[0,"첫 번째 버전 업로드"]}],[0,{"depth":[0,3],"slug":[0,"채널을-기본값으로-설정"],"text":[0,"채널을 기본값으로 설정"]}],[0,{"depth":[0,2],"slug":[0,"디바이스에서-실시간-업데이트-받기"],"text":[0,"디바이스에서 실시간 업데이트 받기"]}]]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"update-your-capacitor-apps-seamlessly-using-capacitor-updater"],"title":[0,"Capacitor-updater를 사용하여 Capacitor 앱을 원활하게 업데이트하기"],"description":[0,"Capacitor Ionic 커뮤니티 여러분, 안녕하세요. 오늘은 여러분의 앱에 Capacitor-updater를 설정하는 것을 도와드리겠습니다. 이를 통해 원활한 릴리스를 할 수 있습니다."],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[3,"2022-02-27T00:00:00.000Z"],"updated_at":[3,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/update_flow.webp"],"head_image_alt":[0,"Capacitor 개발자를 위한 대안 검색"],"keywords":[0,"Capacitor, mobile app development, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Tutorial"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,""]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}],[0,{"id":[0,"ko/do-google-allow-live-updates.md"],"data":[0,{"slug":[0,"do-google-allow-live-updates"],"title":[0,"Google에서는 앱 스토어 심사 없이 앱을 실시간으로 업데이트하는 것을 허용하나요?"],"description":[0,"Android 앱을 구글의 가이드라인을 완벽히 준수하면서 프로덕션 단계에서 코드 업데이트를 푸시하려면 어떻게 해야 할까요?"],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[0,"2022-01-13T00:00:00.000Z"],"updated_at":[0,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/playstore.webp"],"head_image_alt":[0,"Capacitor 우회 설명"],"keywords":[0,"Google, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Tutorial"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,"update-your-capacitor-apps-seamlessly-using-capacitor-updater"]}],"body":[0,"Google Play는 앱 업데이트와 관련하여 Apple보다 덜 제한적입니다\n\nGoogle Play를 통해 배포된 앱을 업데이트하는 것은 까다로운 작업일 수 있지만, Google의 가이드라인을 준수하는 것이 중요합니다. Google Play의 가이드라인에 따르면, 앱은 Google Play의 자체 업데이트 메커니즘 외에 다른 방법으로 자신을 수정, 교체 또는 업데이트해서는 안 됩니다. 이는 Google Play 이외의 소스에서 dex, JAR 또는 so 파일과 같은 실행 가능한 코드를 다운로드하는 것이 허용되지 않음을 의미합니다\n\n하지만 이러한 제한은 웹뷰나 브라우저에서 JavaScript와 같이 Android API에 간접적으로 접근할 수 있는 가상 머신이나 인터프리터에서 실행되는 코드에는 적용되지 않습니다. 이는 JavaScript, Python, Lua 등과 같은 인터프리터 언어를 사용하여 Google Play의 검토 과정 없이 앱을 업데이트할 수 있다는 것을 의미합니다. Capgo Capacitor 플러그인은 이 과정에 도움이 될 수 있는 도구입니다. 이 플러그인을 사용하면 개발자가 HTML, CSS, JavaScript 코드를 업데이트하고 검토 없이 앱에 업데이트를 보낼 수 있습니다\n\n또한, 런타임에 로드되는 JavaScript, Python, Lua 등과 같은 인터프리터 언어를 사용하는 앱이나 서드파티 코드는 Google Play 정책의 잠재적 위반을 허용해서는 안 됩니다. 이러한 인터프리터 코드는 앱과 함께 패키징되어서는 안 된다는 점에 유의해야 합니다\n\n이러한 가이드라인을 따르고 Capgo Capacitor 플러그인과 같은 도구를 사용함으로써, 앱 업데이트가 Google Play의 정책을 준수하고 플랫폼에서 사용자가 계속 앱을 사용할 수 있도록 보장할 수 있습니다. 항상 최신 버전의 Google 정책을 다시 확인하여 올바르게 따르고 있는지 확인하는 것이 좋습니다\n\nCapgo를 설치하여 검토를 우회하는 방법에 대한 자세한 내용은 다음 문서를 참조하세요"],"filePath":[0,"src/content/blog/ko/do-google-allow-live-updates.md"],"digest":[0,"0cfc7f8030b0873a"],"rendered":[0,{"html":[0,"로컬에서 업데이트 수신을 중지해야 하는 경우 다음 명령어를 실행하세요\n
\nnpx @capgo/cli@latest channel set
Google Play는 앱 업데이트와 관련하여 Apple보다 덜 제한적입니다
\nGoogle Play를 통해 배포된 앱을 업데이트하는 것은 까다로운 작업일 수 있지만, Google의 가이드라인을 준수하는 것이 중요합니다. Google Play의 가이드라인에 따르면, 앱은 Google Play의 자체 업데이트 메커니즘 외에 다른 방법으로 자신을 수정, 교체 또는 업데이트해서는 안 됩니다. 이는 Google Play 이외의 소스에서 dex, JAR 또는 so 파일과 같은 실행 가능한 코드를 다운로드하는 것이 허용되지 않음을 의미합니다
\n하지만 이러한 제한은 웹뷰나 브라우저에서 JavaScript와 같이 Android API에 간접적으로 접근할 수 있는 가상 머신이나 인터프리터에서 실행되는 코드에는 적용되지 않습니다. 이는 JavaScript, Python, Lua 등과 같은 인터프리터 언어를 사용하여 Google Play의 검토 과정 없이 앱을 업데이트할 수 있다는 것을 의미합니다. Capgo Capacitor 플러그인은 이 과정에 도움이 될 수 있는 도구입니다. 이 플러그인을 사용하면 개발자가 HTML, CSS, JavaScript 코드를 업데이트하고 검토 없이 앱에 업데이트를 보낼 수 있습니다
\n또한, 런타임에 로드되는 JavaScript, Python, Lua 등과 같은 인터프리터 언어를 사용하는 앱이나 서드파티 코드는 Google Play 정책의 잠재적 위반을 허용해서는 안 됩니다. 이러한 인터프리터 코드는 앱과 함께 패키징되어서는 안 된다는 점에 유의해야 합니다
\n이러한 가이드라인을 따르고 Capgo Capacitor 플러그인과 같은 도구를 사용함으로써, 앱 업데이트가 Google Play의 정책을 준수하고 플랫폼에서 사용자가 계속 앱을 사용할 수 있도록 보장할 수 있습니다. 항상 최신 버전의 Google 정책을 다시 확인하여 올바르게 따르고 있는지 확인하는 것이 좋습니다
\nCapgo를 설치하여 검토를 우회하는 방법에 대한 자세한 내용은 다음 문서를 참조하세요
"],"metadata":[0,{"headings":[1,[]],"localImagePaths":[1,[]],"remoteImagePaths":[1,[]],"frontmatter":[0,{"slug":[0,"do-google-allow-live-updates"],"title":[0,"Google에서는 앱 스토어 심사 없이 앱을 실시간으로 업데이트하는 것을 허용하나요?"],"description":[0,"Android 앱을 구글의 가이드라인을 완벽히 준수하면서 프로덕션 단계에서 코드 업데이트를 푸시하려면 어떻게 해야 할까요?"],"author":[0,"Martin Donadieu"],"author_image_url":[0,"https://avatars.githubusercontent.com/u/4084527?v=4"],"author_url":[0,"https://x.com/martindonadieu"],"created_at":[3,"2022-01-13T00:00:00.000Z"],"updated_at":[3,"2023-06-29T00:00:00.000Z"],"head_image":[0,"/playstore.webp"],"head_image_alt":[0,"Capacitor 우회 설명"],"keywords":[0,"Google, live updates, OTA updates, continuous integration, mobile app updates"],"tag":[0,"Tutorial"],"published":[0,true],"locale":[0,"ko"],"next_blog":[0,"update-your-capacitor-apps-seamlessly-using-capacitor-updater"]}],"imagePaths":[1,[]]}]}],"collection":[0,"blog"]}]]]}" client="load" opts="{"name":"VueBlogIndex","value":true}" await-children="">