메인 콘텐츠로 바로가기
튜토리얼

Capacitor을 사용하여 Bolt.new 프로젝트를 네이티브 모바일 앱으로 변환하세요.

Capacitor을 사용하여 Bolt.new 웹 애플리케이션을 네이티브 모바일 앱으로 변환하는 방법을 배워보세요. React, Vue, 기타 프레임워크에 대한 완전한 가이드.

마틴 도나디유

마틴 도나디유

콘텐츠 마케터

Capacitor을 사용하여 Bolt.new 프로젝트를 네이티브 모바일 앱으로 변환하세요.

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__ __CAPGO_KEEP_0__ Capacitor.

__CAPGO_KEEP_0__

__CAPGO_KEEP_0__

__CAPGO_KEEP_0____CAPGO_KEEP_0__

__CAPGO_KEEP_0__:

  • __CAPGO_KEEP_0____CAPGO_KEEP_0__
  • __CAPGO_KEEP_0__: 모든 운영 체제 (Windows/Mac/Linux)
  • 보호된 공간: 개발 도구 20-30GB
  • 메모리: 8GB RAM 최소, 16GB 권장

필요한 예산:

  • 애플 개발자: 1년 $99 (iOS 앱 스토어)
  • 구글 플레이: 1회 $25
  • Cursor Pro: $20/월 (선택적, 개발 속도 향상)

What We’ll Install:

  • Node.js & npm
  • Xcode (Mac only, for iOS)
  • Android Studio (for Android)
  • Various command-line tools

Why Transform Your Bolt.new App to Mobile?

  • Cross-Platform Reach모바일 앱 스토어에 AI 생성 앱을 배포하세요
  • 자연스러운 장치 접근: 카메라, GPS, 파일 시스템, 기타 원시 기능을 사용하세요
  • Improved Performance: 원시 컨테이너는 웹 뷰보다 성능이 좋습니다.
  • 오프라인 기능: 네이티브 저장 솔루션을 사용하여 오프라인에서 작업
  • 푸시 알림: 네이티브 푸시 알림 지원을 통해 사용자와 상호 작용

왜 Capacitor 대신 Expo를 사용하지?

Capacitor은 모바일 개발 옵션을 고려하고 있는 경우, Expo보다 Capacitor이 유의미한 이점을 제공합니다. 특히 웹-첫 번째 개발에 대한 경우:

  • 하나의 코드베이스, 세 가지 플랫폼: 기존의 React, Next.js, 또는 Vue.js 웹사이트가 iOS, Android, 및 웹 앱으로 변환되지 않고도 zero conversion이 필요합니다
  • 재빌드가 필요하지 않습니다: Bolt.new 프로젝트를 그대로 가져가 - 다른 프레임워크와 같은 Expo가 필요로하는 것과 같은 다른 프레임워크를 위해 다시 작성할 필요가 없습니다
  • 진정한 웹-첫 번째 접근 방식: Expo는 모바일-첫 번째이며 웹에서 불편한 반면 Capacitor은 웹을 최우선 고객으로 다룹니다
  • 무난한 개발: 웹 개발에 익숙한 도구와 워크플로우를 계속 사용하세요
  • 프레임워크 자유: React, Vue, Svelte, Next.js 등 어떤 웹 프레임워크도 지원 - Expo와 같은 React Native로 묶이지 않습니다

주요 차이점

  • : Capacitor: 웹 사이트를 빌드하세요 → 모바일 지원 추가 (같은 코드베이스)
  • : 모바일 빌드 → 웹 지원 시도 (다른 접근 방식, 종종 불편함)__CAPGO_KEEP_0__로 Bolt.new 프로젝트는 이미 웹 애플리케이션으로 이미 구성되어 있습니다. __CAPGO_KEEP_0__는 코드 베이스를 변경하지 않고 모바일을 확장할 수 있지만 Expo는 프레임워크를 위한 프로젝트를 다시 빌드해야 합니다.

Since your Bolt.new project is already a web application, Capacitor lets you extend it to mobile without changing a single line of code. Expo would require rebuilding your entire project for their framework.

Cursor - 당신의 AI-Powered __CAPGO_KEEP_0__ 에디터

Get Cursor - Your AI-Powered Code Editor

To __CAPGO_KEEP_0__ 프로젝트와 효율적으로 일하기 위해서는 Bolt.new 프로젝트를 사용할 것입니다. Cursor는 개발을 간소화하는 지능적인 code 편집기를 사용합니다.

  1. Cursor 로 이동하세요. cursor.sh
  2. 에서 운영 체제에 맞는 설치 프로그램을 다운로드하세요.
  3. 설치 프로그램을 실행하여 설치 과정을 완료하세요.

Cursor

를 실행하세요.

Cursor

  1. 를 시작하세요. - 무료 버전은 작동하지만, Pro ($20/월)으로 다음과 같은 기능을 활성화합니다.

    • 무제한 AI 지원
    • GPT-4, Claude와 같은 프리미엄 모델
    • 즉시 반응
    • 프리미엄 지원
  2. 설정 with Command+, (Mac) 또는 Ctrl+, (Windows)

커서 설정

  1. AI 기능 활성화 - AI 지원이 켜져 있는지 확인하십시오:

모델 허용

  1. AI 모델 선택 - Claude 또는 GPT-4를 추천합니다:

커서 모델 선택

  1. 명령 실행 허용 - 커서가 명령을 자동으로 실행하도록 하세요:

명령 실행 허용

2단계: Bolt.new 프로젝트 내보내기

현재 Bolt.new 프로젝트를 커서로 가져옵니다.

프로젝트 다운로드

  1. 브라우저에서 Bolt.new 프로젝트를 찾으세요.
  2. 프로젝트 위치 다운로드 또는 Bolt 인터페이스 내의 버튼 Bolt.new 다운로드 버튼

프로젝트 ZIP 파일을 다운로드하세요.

  1. 프로젝트를 컴퓨터에 있는 폴더에 압축해제하세요.
  2. Bolt.new 프로젝트 파일

Cursor에서 열기

압축해제 후 Cursor에서 프로젝트를 열어보세요.

Cursor에서 사용하세요.

  1. Cursor에서 사용하세요. File > Open Folder Cursor에서 사용하세요.
  2. 프로젝트 폴더를 선택하세요
  3. 프로젝트를 로드하는 중입니다

Cursor에서 열기

GitHub에서 클론하기

GitHub에 Bolt.new를 연결했다면

  1. Press Shift+Command+P Mac에서: Shift+Ctrl+P Windows에서:
  2. Git: Clone을 검색하세요
  3. 저장소 URL을 입력하세요
  4. 저장소를 저장할 위치를 선택하세요

Cursor에서 클론하기

Step 2: 프로젝트 프레임워크를 식별하세요

Bolt.new는 다양한 프레임워크를 사용하여 프로젝트를 생성할 수 있습니다. 어떤 프레임워크를 사용하고 있는지 식별해 보세요:

package.json을 확인하세요

열기 package.json 프로젝트가 사용하는 프레임워크를 확인하려면

Bolt.new package.json 검사

일반적인 Bolt.new 프로젝트 유형:

  • React + Vite: 가장 일반적인 설정
  • Vue + Vite: Vue.js 애플리케이션
  • Svelte : Svelte 어플리케이션
  • Next.js : 풀스택 React 앱
  • Vanilla JS : 플랫폼 자바스크립트 앱

Step 3: 개발 도구 설치

Option A: Cursor AI가 모든 것을 처리하십시오

  1. Press Command+K (Mac) 또는 Ctrl+K (Windows)에서 Cursor
  2. 이 요청을 입력하십시오:
    Install all necessary development tools including Node.js, then install project dependencies and start the dev server

Cursor AI는 자동으로:

  • Node.js와 npm를 설치하세요 (필요한 경우)
  • macOS에서 Homebrew를 설정하세요
  • 프로젝트의 모든 의존성을 설치하세요
  • 개발 서버를 시작하세요

Homebrew를 설치하세요

Option B: 수동 설치 프로세스

AI 접근 방식이 문제를 만나거나 수동 제어를 원하신다면:

Cursor의 터미널을 먼저 열어주세요 with Shift+Command+T (Mac) 또는 Shift+Ctrl+T (Windows)

macOS 사용자라면:

# Get Homebrew package manager
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

# Install Node.js via Homebrew
brew install node

# Move to your project folder
cd your-bolt-project

# Install project packages
npm install

# Launch development server
npm run dev

Windows 사용자에게:

  1. Node.js 설치 프로그램을 nodejs.org
  2. 설치 마법사를 완료하십시오.
  3. Cursor의 터미널에서:
cd your-bolt-project
npm install
npm run dev

Bolt.new 앱이 로컬에서 실행 중입니다.

Bolt.new 앱이 이제 실행 중이되어야 합니다 (일반적으로 http://localhost:5173 Vite 프로젝트의 경우).

Step 4: 모바일 빌드 구성

프로젝트 프레임워크에 따라 구성이 달라질 것입니다.

Option A: Cursor AI를 사용한 자동 구성

Cursor AI에게 구성 처리를 부탁하십시오.

Configure my Bolt.new project for mobile deployment with proper build settings

__CAPGO_KEEP_0__은 프레임워크를 감지하고 올바른 설정을 적용합니다.

Option B: 프레임워크별 수동 설정

React + Vite 프로젝트에 대해:

수정 vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  base: './',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    rollupOptions: {
      output: {
        manualChunks: undefined,
      },
    },
  },
})

Vue + Vite 프로젝트에 대해:

수정 vite.config.js:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

export default defineConfig({
  plugins: [vue()],
  base: './',
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
  },
})

Next.js 프로젝트에 대해:

프로젝트에 다음을 추가하세요. package.json 스크립트:

{
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "static": "next build && next export"
  }
}

업데이트 next.config.js:

/** @type {import('next').NextConfig} */
const nextConfig = {
  output: 'export',
  trailingSlash: true,
  images: {
    unoptimized: true,
  },
}

module.exports = nextConfig

Step 5: Bolt.new 앱의 프로덕션 빌드를 생성하세요.

__CAPGO_KEEP_1__을 생성하는 데 소요되는 시간입니다.

Option A: Cursor AI로 빌드하기

Cursor AI에게 단순히 물어보세요:

Build my Bolt.new project for production deployment

Cursor AI는 당신의 프레임워크에 따라 적절한 빌드 명령어를 실행합니다.

Option B: 수동으로 빌드하기

Vite 기반 프로젝트 (React/Vue/Svelte):

npm run build

Bolt.new Vite 빌드 성공

Next.js 애플리케이션:

npm run static

빌드 성공을 확인하세요

빌드가 올바른 출력을 생성했는지 확인하세요:

  • Vite 프로젝트: 빌드 디렉토리를 확인하세요 dist directory
  • Next.js 프로젝트: __CAPGO_KEEP_0__을 확인하세요. out 디렉토리

Bolt.new 빌드 출력

Step 6: Bolt.new 프로젝트에 Capacitor을 추가하세요.

웹 애플리케이션을 네이티브 모바일 앱으로 변환하세요.

Option A: Cursor AI를 사용한 빠른 설정

클릭 Command+K (Mac) 또는 Ctrl+K (Windows) 키를 누르고 요청:

Add Capacitor to my project and set up iOS and Android platforms

Cursor AI는 모든 설정 프로세스를 처리합니다.

Option B: 단계별 수동 설정

Install Capacitor’s command-line tools:

npm install -D @capacitor/cli

Capacitor 프로젝트를 초기화하세요:

npx cap init

Capacitor 초기화 Bolt

다음과 같은 정보를 입력하실 필요가 있습니다:

  • 애플리케이션 이름: Bolt.new 프로젝트 이름
  • Bundle ID: 다음 형식으로 입력하세요 com.yourcompany.yourapp

수동 설정을 계속하세요 - 필수 패키지를 설치하세요:

npm install @capacitor/core @capacitor/ios @capacitor/android

모바일 플랫폼 지원을 추가하세요:

npx cap add ios
npx cap add android

Capacitor 플랫폼이 Bolt에 추가되었습니다.

무엇이 일어났나요?

Bolt.new 프로젝트 구조는 다음과 같습니다.

your-bolt-project/
├── src/           # Your app source (React/Vue/etc)
├── public/        # Static files  
├── dist/          # Build output (Vite)
├── out/           # Build output (Next.js)
├── ios/           # iOS Xcode project (NEW!)
├── android/       # Android Studio project (NEW!)
├── capacitor.config.ts  # Mobile configuration
└── package.json   # Dependencies

중요한 주의 사항:

  • Your web code는 여전히 src/ - 여기에 편집
  • ios/ 그리고 android/ 자동으로 생성되며 편집하지 마세요.
  • 변경 사항이 있으면 항상 npx cap sync
  • 각 플랫폼에는 독립적인 빌드 프로세스가 있습니다.

7단계: Capacitor을 구성하세요.

특정 프레임워크에 맞게 Capacitor을 구성하는 시간입니다.

선택 A: 커서의 자동 구성

커서의 도움을 요청하십시오:

Configure capacitor.config.ts for my Bolt.new project build output

Option B: 수동 설정

Vite 기반 애플리케이션에 대해:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'dist',
  bundledWebRuntime: false,
  server: {
    androidScheme: 'https'
  }
};

export default config;

Next.js 애플리케이션에 대해:

import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'out',
  bundledWebRuntime: false,
  server: {
    androidScheme: 'https'
  }
};

export default config;

8 단계: 빌드 및 동기화

모바일 배포를 위해 앱을 준비하세요.

Option A: Cursor AI 사용

Cursor에게 말하세요:

Build my project and sync it with Capacitor for mobile deployment

Option B: 수동 프로세스

다음 명령어를 순서대로 실행하세요:

npm run build
npx cap sync

Capacitor Bolt 동기화 완료

Mac이나 Xcode/Android Studio 로컬 PIPELINE이 필요하지 않습니다. App Store와 Google Play로 배포할 수 있습니다. Capgo Builder __CAPGO_KEEP_0__ Builder는 클라우드에서 iOS 및 Android 빌드를 컴파일, 서명, 제출할 수 있습니다. — vibe-coded 앱에서 Bolt.new로 내보낸 앱을 위한 가장 빠른 경로입니다.

Capgo Builder를 사용하는 이유는?

  • Mac이 필요하지 않습니다. iOS — Windows, Linux, 또는 AI 코딩 환경에서 빌드할 수 있습니다.
  • CLI Builder의 단일 워크플로우 — Cursor, Claude Code, 또는 Codex와 쉽게 스크립트하고 전달할 수 있습니다.
  • Live Updates와 함께 pairs합니다. — JS/UI 수정을 오버 더 에어로 전송하고 플러그인 또는 권한이 변경될 때만 네이티브 바이너리를 다시 빌드합니다.

Capgo Builder를 설정합니다.

생산 빌드와 Capacitor 동기화 작업을 로컬에서 수행한 후:

npx @capgo/cli@latest login
npx @capgo/cli@latest init
npx @capgo/cli@latest build init --platform ios
npx @capgo/cli@latest build init --platform android

一次에 서명 인증서를 저장하십시오 (Apple 인증서, 배포 프로파일, Android 키 스토어). __CAPGO_KEEP_0__ 인증 관리 and Windows에서 iOS 빌드.

클라우드 빌드를 요청하세요

npm run build
npx cap sync
npx @capgo/cli@latest build com.yourcompany.yourapp --platform ios --build-mode release
npx @capgo/cli@latest build com.yourcompany.yourapp --platform android --build-mode release

Capgo 빌더는 터미널에서 빌드 로그를 스트리밍합니다. App Store Connect가 구성되면 iOS 빌드는 TestFlight로 바로 이동할 수 있습니다.

웹 번들 업로드: OTA 업데이트

npx @capgo/cli@latest bundle upload --channel production

10단계: 로컬 테스트를 위한 네이티브 IDE 열기 (선택 사항)

Mac을 가지고 있거나 클라우드 빌드 전에 에뮬레이터 테스트를 원한다면, 로컬 네이티브 프로젝트를 열어보세요.

앱의 네이티브 개발 환경에 접근하세요.

iOS 개발

A. 커서 AI를 통해

Open my iOS project in Xcode

B. 터미널 명령어를 통해

npx cap open ios

Xcode Bolt 프로젝트 열기

안드로이드 개발

Option A: 커서 AI를 통해

Open my Android project in Android Studio

Option B: 터미널 명령어를 통해

npx cap open android

Android Studio Bolt 프로젝트 열기

11단계: 로컬에서 빌드 및 실행 (선택사항)

iOS에서 실행

Xcode 설정 (처음 사용)

  1. 목표 선택:

    • 플레이 버튼 옆에 기기 선택기를 클릭
    • 테스트를 위해: 임의의 아이폰 시뮬레이터를 선택
    • 실제 기기: 아이폰을 USB로 연결
  2. Configure Code 인증:

    • 왼쪽 사이드바에서 프로젝트 이름을 클릭하세요
    • ‘인증 및 기능’ 탭으로 이동하세요
    • ‘자동으로 인증 관리’를 활성화하세요
    • 애플 ID로 로그인하세요
    • 주의: 실제 기기 사용을 위해서는 애플 개발자 프로그램 ($99/년)을 구독해야 합니다.
  3. 앱을 빌드하세요:

    • ▶️ 재생 버튼을 클릭하세요
    • 첫 번째 빌드: 5-10분 소요 (잠시 기다려 주세요)
    • 상단의 진행바를 감시하세요

iOS 문제 해결:

  • “계정 찾을 수 없음”: Xcode > 설정 > 계정에서 Apple ID 추가
  • “빌드 실패”: Shift+Command+K를 눌러 빌드 폴더를 정리하고 다시 시도
  • Simulator 문제': Device > 다시 시작'을 클릭하여 시뮬레이터를 다시 시작

iOS에서 Bolt 앱 실행

Android에서 실행

Android Studio 설정 (처음 사용)

  1. SDK 설정 (자동):

    • Android Studio는 누락된 구성 요소를 자동으로 감지합니다.
    • 클릭 “SDK을 설치하세요”를 클릭할 때
    • __CAPGO_KEEP_0__을 다운로드하면 2-3GB의 파일이 다운로드됩니다.
  2. 가상 장치 만들기:

    • AVD 매니저 열기 (도구栏의 전화 아이콘)
    • 클릭 “+ 가상 장치 만들기”
    • “Pixel 6”을 선택하세요 (기본값)
    • 시스템 이미지를 다운로드할 때 클릭
    • 기본 옵션으로 설정을 마치세요
  3. 앱 실행:

    • 다운로드 드롭다운 메뉴에서 에뮬레이터를 선택하세요
    • 녹색 ▶️ 실행 버튼을 클릭하세요
    • 첫 번째 빌드: 10-15분
    • 자동 모드가 시작됩니다.

안드로이드 문제 해결:

  • “Gradle 동기화 실패”: 캐시를 무효화 하세요. (File > Invalidate Caches)
  • 느린 에뮬레이터: AVD 설정에서 하드웨어 가속을 활성화하세요.
  • 빌드 오류.: Gradle을 업데이트하세요.

Bolt 앱이 안드로이드에서 실행 중입니다.

인증 확인 목록

성공적으로 빌드가 완료되면 확인하세요.

✅ 앱이 충돌 없이 실행됩니다. ✅ Bolt.new 콘텐츠가 올바르게 표시됩니다. ✅ 버튼 및 상호 작용이 정상 작동합니다. ✅ 콘솔에 빨간색 오류가 없습니다.

아직도 문제가 있나요? 오류 메시지는 정확히 무엇이 잘못되었는지 알려줍니다 - 그들을 신중하게 읽어보세요!

12 단계: Live Reload 활성화 (개발)

개발 워크플로우를 가속화하는 데 도움이 되는热 재로드.

선택 A: 커서와 함께 자동 설정

커서에게 물어보세요:

Enable live reload for my Capacitor app development

커서는 모든 것을 자동으로 구성합니다.

선택 B: 수동 구성

  1. 로컬 IP 주소를 얻으세요:
# macOS
ipconfig getifaddr en0

# Windows  
ipconfig
  1. 업데이트 capacitor.config.ts:
import { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.yourcompany.yourapp',
  appName: 'Your Bolt App',
  webDir: 'dist', // or 'out' for Next.js
  bundledWebRuntime: false,
  server: {
    url: 'http://YOUR_IP_ADDRESS:5173', // or 3000 for Next.js
    cleartext: true,
  },
};

export default config;
  1. 설정 적용:
npx cap copy

Bolt의 Live reload이 활성화되었습니다.

Step 13: __CAPGO_KEEP_0__

__CAPGO_KEEP_1__ 앱을 Bolt.new와 함께 개선하세요. 기기별 기능을 추가하세요.

Option A: 인공지능(AI) 통합

Cursor에서 요청합니다.

Add native share, camera, and geolocation features to my Bolt.new app

Cursor는 플러그인 설치 및 code 통합을 생성합니다.

Option B: 수동 플러그인 설치

인기있는 네이티브 플러그인을 설치하세요.

npm i @capacitor/share @capacitor/camera @capacitor/geolocation

React 프로젝트에 대한 유틸리티 파일을 생성하세요.

// utils/capacitor.js
import { Share } from '@capacitor/share';
import { Camera, CameraResultType } from '@capacitor/camera';
import { Geolocation } from '@capacitor/geolocation';

export const shareContent = async (title, text, url) => {
  await Share.share({
    title,
    text,
    url,
    dialogTitle: 'Share with friends',
  });
};

export const takePicture = async () => {
  const image = await Camera.getPhoto({
    quality: 90,
    allowEditing: true,
    resultType: CameraResultType.Uri
  });
  return image;
};

export const getCurrentPosition = async () => {
  const coordinates = await Geolocation.getCurrentPosition();
  return coordinates;
};

컴포넌트에서 사용하세요.

// For React components
import React from 'react';
import { shareContent, takePicture } from '../utils/capacitor';

function MyComponent() {
  const handleShare = () => {
    shareContent('My Bolt App', 'Check out this amazing app!', 'https://your-app.com');
  };

  const handleCamera = async () => {
    try {
      const photo = await takePicture();
      console.log('Photo taken:', photo);
    } catch (error) {
      console.error('Camera error:', error);
    }
  };

  return (
    <div>
      <button onClick={handleShare}>Share App</button>
      <button onClick={handleCamera}>Take Photo</button>
    </div>
  );
}

export default MyComponent;

Cursor AI를 사용하여 변경 사항을 동기화하세요.

수동 명령어를 사용하세요.

Sync my native feature changes to all platforms

__CAPGO_KEEP_2__

npx cap sync

__CAPGO_KEEP_0__

__CAPGO_KEEP_1__

__CAPGO_KEEP_2__

__CAPGO_KEEP_3__

__CAPGO_KEEP_4__

Create app icons and splash screens for my mobile app

__CAPGO_KEEP_5__

  1. __CAPGO_KEEP_6__
npm install -D @capacitor/assets
  1. __CAPGO_KEEP_7__

    • __CAPGO_KEEP_8__ assets/icon.png __CAPGO_KEEP_9__
    • __CAPGO_KEEP_10__ assets/splash.png __CAPGO_KEEP_11__
  2. 모든 크기 자동 생성:

npx capacitor-assets generate

Bolt 앱 자산 생성

최적화 빌드

Vite 프로젝트의 경우 빌드 최적화:

// vite.config.js
export default defineConfig({
  plugins: [react()], // or vue()
  base: './',
  build: {
    outDir: 'dist',
    minify: 'terser',
    terserOptions: {
      compress: {
        drop_console: true,
        drop_debugger: true,
      },
    },
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'], // adjust for your framework
        },
      },
    },
  },
})

최종 빌드

선택 A: 커서 AI로 빌드

Create the final production build and prepare for app store deployment

선택 B: 수동 빌드 프로세스

npm run build
npx cap sync
npx cap copy

일반적인 문제 해결

프레임워크별 문제

React/Vite 프로젝트

  • 설정되어야 함 base: './' Vite config에서 설정되어야 함
  • 모든 임포트가 상대 경로를 사용하는지 확인하세요
  • __CAPGO_KEEP_0__ dist 폴더가 올바르게 생성되는지 확인하세요

Vue 프로젝트

  • 모바일 환경에서 Vue Router가 해시 모드를 사용하는지 확인하세요
  • 자산이 올바르게 참조되는지 확인하세요
  • 모바일 환경에서 컴포넌트의 느긋한 로딩이 작동하는지 확인하세요

Next.js 프로젝트

  • 정적 내보내기 설정이 올바르게 구성되어 있는지 확인하세요
  • 정적 환경에서 동적 임포트가 작동하는지 확인하세요
  • API 경로가 사용되지 않거나 올바르게 처리되는지 확인하세요

빌드 오류

If you encounter build errors:

  1. Clear node_modules and reinstall:
rm -rf node_modules package-lock.json
npm install
  1. 모바일 호환성을 위해 Bolt.new 프로젝트 의존성을 확인하십시오.
  2. 모바일 배포를 위해 모든 상대 경로가 정확한지 확인하십시오.

미등록 자산

자산 로딩 문제의 경우:

  1. 모든 자산이 public 폴더에 있는지 확인하십시오.
  2. 이미지 및 파일에 대한 상대 경로를 사용하십시오.
  3. 빌드 프로세스가 모든 필요한 자산을 복사하는지 확인하십시오.

결론

축하합니다! Bolt.new 프로젝트를 성공적으로 모바일 네이티브 애플리케이션으로 변환했습니다. AI가 생성한 웹 앱은 이제:

  • iOS 및 Android 장치에서 네이티브로 실행할 수 있습니다.
  • __CAPGO_KEEP_0__
  • __CAPGO_KEEP_0__
  • __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

  • Capgo__CAPGO_KEEP_0__
  • __CAPGO_KEEP_0____CAPGO_KEEP_0__ Capgo __CAPGO_KEEP_0__
  • __CAPGO_KEEP_0____CAPGO_KEEP_0__
  • 성능: 모바일 앱의 성능을 모니터링하고 최적화하세요
  • 테스트: 다양한 장치와 화면 크기에 앱을 테스트하세요

Your Bolt.new 생성은 이제 모바일 생태계에 준비되었습니다!

자원

Capgo이란 Capgo을 통해 모바일 앱에 즉시 업데이트를 제공하는 방법을 배워보세요. __CAPGO_KEEP_0__ 무료 계정으로 가입하세요. 오늘부터 시작하세요.

Capacitor Bolt.new 프로젝트를 Native 모바일 앱으로 변환하는 방법을 계속 진행하세요.

__CAPGO_KEEP_0__을 사용 중이라면 Capacitor Bolt.new 프로젝트를 Native 모바일 앱으로 변환하는 방법을 계속 진행하세요. __CAPGO_KEEP_0__을 통해 Native 플러그인 작업을 계획할 때, __CAPGO_KEEP_0__ Plugin Directory와 연결하세요. Capgo Plugin Directory에서 Capgo 제품 워크플로우를 확인하세요. Capgo Plugin Directory에서 __CAPGO_KEEP_1__가 개발한 Capgo 플러그인을 확인하세요. Capacitor 플러그인에서 Capgo가 개발한 Capacitor 플러그인의 구현 세부 사항을 확인하세요. for the implementation detail in Capacitor Plugins by Capgo, __CAPGO_KEEP_0__ 플러그인을 추가하거나 업데이트 하세요. __CAPGO_KEEP_0__ 구현 세부 사항에 대한 정보는 Adding or Updating Plugins에서 찾을 수 있습니다. Ionic Enterprise Plugin Alternatives __CAPGO_KEEP_0__ 제품 워크플로에 대한 정보는 Ionic Enterprise Plugin Alternatives에서 찾을 수 있습니다. Capgo Native Builds Capgo 제품 워크플로에 대한 정보는 Capgo Native Builds에서 찾을 수 있습니다.

Capacitor 앱에 대한 실시간 업데이트

웹-layer 버그가 활성화된 경우, 앱 스토어 승인까지 며칠 기다리지 않고 Capgo를 통해 픽스를 배포하세요. 사용자는 배경에서 업데이트를 받으면서 Native 변경 사항은 일반적인 검토 경로에 남아 있습니다.

시작하기

최신 블로그 게시물

Capgo은 당신이 완벽한 전문가 모바일 앱을 만들기 위해 필요한 모든 통찰력을 제공합니다.