Capacitor을 사용하여 순수 React.js로 모바일 앱을 빌드하는 방법

이 튜토리얼은 React, Capacitor, 및 Konsta UI를 사용하여 모바일 애플리케이션을 제작하는 방법을 안내합니다. 튜토리얼을 마치면 React.js 웹 애플리케이션을 Capacitor으로 변환하고 Konsta UI를 사용하여 네이티브 UI를 implement하는 방법을 알게 될 것입니다.

Capacitor은 React.js 웹 애플리케이션을 네이티브 모바일 애플리케이션으로 변환하는 것을 쉽게 허용하며, React Native와 같은 새로운 전략을 배울 필요 없이 큰 변형이나 학습이 필요하지 않습니다.

이 과정은 몇 가지 단순한 단계로 구성되어 있으며, React.js 애플리케이션이 완전한 네이티브 모바일 애플리케이션으로 변환되기까지 몇 분 만에 완료할 수 있습니다. 따라서 이 여정을 안내하는 데 함께 해 주세요.

Capacitor 개요

CapacitorJS는 게임 체이너입니다. 웹 프로젝트와 완벽하게 통합할 수 있으며, 네이티브 웹뷰로 앱을.wrap하고 네이티브 Xcode 및 Android Studio 프로젝트를 생성합니다. 플러그인으로는 카메라와 같은 네이티브 장치 기능에 접근할 수 있는 JS 브리지를 제공합니다.

Capacitor은 네이티브 모바일 애플리케이션을 생성하는 데 어려움 없이 쉽게 사용할 수 있는 방법을 제공합니다. 간단한 API 및 스트리밍된 기능으로 인해 프로젝트에 쉽게 통합할 수 있습니다.

React.js 애플리케이션 설정

React 애플리케이션을 시작하는 가장 단순한 방법을 사용해 보겠습니다. npm 패키지 관리자를 사용하여 새로운 React 애플리케이션을 생성할 것입니다.

npx create-react-app my-app

프로젝트를 네이티브 모바일 애플리케이션으로 변환하려면 앱의 export 가 필요합니다.

이것에 대해 나중에 다시 돌아가겠습니다. 먼저 Capacitor을 React 애플리케이션에 통합하는 방법을 이해해 보겠습니다.

Capacitor을 React.js 앱에 통합하는 방법

기본 설정 단계는 조금 세세할 수 있지만, 그 이후로 네이티브 앱 wrapper를 업데이트하는 것은 단순히 명령어를 실행하는 것과 같습니다. sync 첫 번째로, __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 개발 의존성으로 설치하고 프로젝트 내에서 설정합니다. 설정 중 이름과 번들 ID에 대한 기본값을 수락하기 위해 “enter”를 눌러주세요.

First, we’ll install the Capacitor CLI as a development dependency and set it up within our project. During the setup, accept the default values for name and bundle ID by pressing “enter.”

마지막으로, 플랫폼을 추가하고 __CAPGO_KEEP_0__은 프로젝트 루트에 플랫폼별 폴더를 생성합니다.

Finally, we’ll add the platforms, and Capacitor will create folders for each platform at our project root:

# Install the Capacitor CLI locally
npm install -D @capacitor/cli

# Initialize Capacitor in your React project
npx cap init

# Install the required packages
npm install @capacitor/core @capacitor/ios @capacitor/android

# Add the native platforms
npx cap add ios
npx cap add android

앱을 개발하는 중에 Android 프로젝트에 접근해야 하는 경우, Android 프로젝트를 설치하세요. __CAPGO_KEEP_0__ __CAPGO_KEEP_1__ __CAPGO_KEEP_0__ __CAPGO_KEEP_0__

__CAPGO_KEEP_0__ Android StudioiOS 개발을 위해 Mac이 필요하며 Xcode.

다음으로 webDir __CAPGO_KEEP_0__.config.json capacitor.config.json __CAPGO_KEEP_0__

{
  "appId": "com.example.app",
  "appName": "my-app",
  "webDir": "build",
  "bundledWebRuntime": false
}

Run the build command and sync your project with Capacitor:

npm run build
npx cap sync

명령어는 React.js 프로젝트를 빌드하며 npm run build native 플랫폼에서 정확한 위치에 웹 __CAPGO_KEEP_0__를 정렬하여 앱에서 실행할 수 있도록 합니다. npx cap sync code

지금, 약간의 운과 오류가 없다면, React.js 앱이 기기에서 출시 준비가 된 것입니다!

자연어 앱을 빌드하고 배포하는 방법

iOS 앱 개발을 위해 Xcode, Android 앱은 Android Studio를 필요로 합니다. 앱 스토어에서 앱을 배포하려면 iOS는 Apple Developer Program에, Android는 Google Play Console에 등록해야 합니다.

Capgo는 iOS와 Android의 네이티브 프로젝트를 모두 열기 위한 Capacitor CLI를 단순화합니다.

npx cap open ios
npx cap open android

네이티브 프로젝트가 설정되면 기기와 연결된 기기에서 앱을 배포하는 것은 단순한 과정입니다.

Android Studio의 경우, 모든 것을 로드하고 기기와 연결된 기기에서 앱을 배포합니다.

Xcode의 경우, 실제 기기에서 앱을 배포하기 위해 서명 계정을 설정해야 합니다. 그 후에, 앱을 기기에서 실행하기 위해 단순히 플레이 버튼을 클릭하면 됩니다. 기기를 선택할 수 있습니다.

모든 것이 잘 진행되면, React.js 웹 앱을 네이티브 모바일 애플리케이션으로 변환할 수 있습니다!

Capacitor Live Reload

최신 개발 프레임워크는 일반적으로 핫 리로드를 제공하며, Capacitor도 마찬가지로 핫 리로드를 제공할 수 있습니다. 모바일 기기에서!

네트워크 내에서 라이브 리로드가 가능하게 하려면, Capacitor 앱이 특정 URL에서 콘텐츠를 로드하도록 하십시오.

먼저, 로컬 IP 주소를 결정하십시오. 맥에서 터미널에서 ipconfig getifaddr en0 윈도우에서 ipconfig IPv4 주소를 찾으십시오.

Capacitor를 서버에서 앱을 직접 로드하도록 하려면, 파일에 추가 매개 변수를 추가하십시오. capacitor.config.ts 정확한 IP 주소와 포트를 사용하십시오. 다음 명령어를 실행하여 변경 사항을 적용하십시오.

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

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'my-app',
  webDir: 'build',
  bundledWebRuntime: false,
  server: {
    url: 'http://192.168.x.xx:3000',
    cleartext: true
  }
};

export default config;

Android Studio 또는 Xcode를 통해 앱을 다시 배포하면, React 앱의 변경 사항이 자동으로 로드되고 표시됩니다! npx cap copy __CAPGO_KEEP_0__

__CAPGO_KEEP_0__

Do new plugin을 설치하면, 예를 들어 카메라와 같은 경우, native 프로젝트를 다시 빌드해야 합니다. 이는 native 파일이 변경되었기 때문입니다. native 파일을 실시간으로 업데이트할 수 없습니다.

Capacitor 플러그인 사용

Capacitor 플러그인을 사용하는 방법에 대해 간단히 살펴보겠습니다. 간단한 플러그인을 설치해 보겠습니다. 그것은 'Share plugin'입니다. Share plugin은 native 공유 대화 상자를 표시합니다.이를 사용하려면 패키지를 임포트하고 앱에서 해당 함수를 호출하세요. Consider the 'App.js'를 참조하세요.

npm i @capacitor/share

new plugin을 설치한 후 React 프로젝트를 다시 싱크하세요. share() Konsta UI를 사용하여 Implementing Better-looking Mobile UI 모바일 UI 경험을 개선하기 위해 Konsta UI를 사용하겠습니다. iOS 및 Android에 대한 스타일링을 제공하며 사용하기 쉽습니다.:

import { Share } from '@capacitor/share';

function ShareButton() {
  const share = async () => {
    await Share.share({
      title: 'React App',
      text: 'Visit this React App',
      url: 'http://localhost:3000',
      dialogTitle: 'Share with...'
    });
  };

  return (
    <button onClick={share}>
      Share
    </button>
  );
}

export default ShareButton;

Konsta UI를 사용하려면 React 패키지를 설치하세요. npx cap sync.

__CAPGO_KEEP_0__

Share plugin

App.js

npm i konsta

__CAPGO_KEEP_0__ tailwind.config.js 파일을 다음과 같이 수정하세요:

// import konstaConfig config
const konstaConfig = require('konsta/config')

// wrap config with konstaConfig config
module.exports = konstaConfig({
  content: [
    './src/**/*.{js,ts,javascript,tsx}',
  ],
  darkMode: 'media', // or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
})

konstaConfig __CAPGO_KEEP_0__는 현재의 Tailwind CSS 설정에 추가 변형 및 유용성을 제공하여 Konsta UI를 지원합니다.

현재, 전역 매개변수와 같은 것을 설정하기 위해 주 App 컴포넌트를 설정하세요. thememain app을 App으로 wrapping하세요. src/index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import {App} from 'konsta/react';
import './index.css';
import MyApp from './App';

ReactDOM.render(
  <React.StrictMode>
    <App theme="ios">
      <MyApp />
    </App>
  </React.StrictMode>,
  document.getElementById('root')
);

Konsta UI React 컴포넌트를 사용하여 React.js 페이지에서 사용하세요. Open src/App.js 그것을 다음과 같이 수정하세요:

// Konsta UI components
import {
  Page,
  Navbar,
  Block,
  Button,
  List,
  ListItem,
} from 'konsta/react';

export default function MyApp() {
  return (
    <Page>
      <Navbar title="My App" />

      <Block strong>
        <p>
          Welcome to your React & Konsta UI app.
        </p>
      </Block>
      
      <List>
        <ListItem href="/about" title="About" />
      </List>

      <Block strong>
        <Button>Click Me</Button>
      </Block>
    </Page>
  );
}

모든 것이 올바르게 수행되었다면, React와 Konsta UI 간의 수월한 통합을 통해 모바일 앱에 원생스러운 외관을 제공할 것입니다.

결론

Capacitor은 기존 웹 프로젝트를 기반으로 하는 code을 공유하고 일관된 UI를 제공하는 데 있어 수월한 방법을 제공합니다.

Capacitor와 같은 기술 덕분에, React.js 웹 앱을 기반으로 하는 모바일 앱을 만들기 위해 절차를 단축할 수 있습니다. 웹 개발 기술을 다음 단계로 끌어올리기 위해 훌륭한 원생스러운 모바일 앱을 제작하세요. Happy coding!

__CAPGO_KEEP_0__에 대해 더 알아보려면, 앱 개발 프로세스를 단축하는 방법에 대해 알아보세요. __CAPGO_KEEP_0__에 대한 무료 계정으로 가입하세요. 오늘.

Capacitor와 함께 Pure React.js로 모바일 앱을 계속 개발하세요.

__CAPGO_KEEP_0__를 사용하고 있다면 Pure React.js와 Capacitor를 사용하여 모바일 앱을 개발하세요. __CAPGO_KEEP_0__를 사용하여 네이티브 미디어 및 인터페이스 동작을 계획하고, __CAPGO_KEEP_0__와 연결하세요. @capgo/capacitor-live-activities를 사용하여 @capgo/capacitor-live-activities에서 사용하는 네이티브 기능을 위해 @capgo/capacitor-live-activities를 사용하여 @capgo/capacitor-live-activities에서 구현하는 구체적인 세부 사항을 위해 @capgo/capacitor-video-player를 사용하여 @capgo/capacitor-video-player에서 사용하는 네이티브 기능을 위해 @capgo/capacitor-video-player capgo 구현 세부 사항은 @capgo/capacitor-video-player에서 확인할 수 있습니다. @capgo/capacitor-native-navigation을 사용하여 @capgo/capacitor-native-navigation의 네이티브 기능을 사용하여.