Capacitor를 사용한 리액트.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 프로젝트를 생성할 수 있습니다. 또한, 플러그인을 통해 카메라와 같은 네이티브 장치 기능에 접근할 수 있습니다.

Capacitor은 네이티브 모바일 애플리케이션을 만들기 위한 단순하고 편리한 방법을 제공합니다. API과 streamlined 기능으로 인해 프로젝트에 쉽게 통합할 수 있습니다.

React.js 앱 설정

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

npx create-react-app my-app

네이티브 모바일 앱으로 변환하기 위해 프로젝트를 __CAPGO_KEEP_1__으로 변환해야 합니다. 앱의 __CAPGO_KEEP_0__이 필요합니다. 이 문제에 다시 돌아올 것입니다. 먼저, __CAPGO_KEEP_0__을 React 앱에 통합하는 방법을 이해해 보겠습니다.

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

초기 설정 단계가 조금 복잡할 수 있지만, 그 이후로 네이티브 앱 wrapper를 업데이트하는 것은 Capacitor을 실행하는 것만큼 간단합니다.

먼저, __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 개발 의존성으로 설치하고 프로젝트 내에서 설정합니다. 설정 중 이름과 번들 ID의 기본값을 수락하려면 “엔터”를 눌러주세요. sync 다음으로, 코어 패키지와 iOS 및 Android 플랫폼에 관련된 패키지를 설치합니다.

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

그리고 __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ 안드로이드 __CAPGO_KEEP_0__ 디렉토리가 이제 React.js 프로젝트에 존재합니다.

앞으로 안드로이드 프로젝트에 접근하기 위해 설치해야 하는 경우 Android StudioiOS의 경우 Mac가 필요하며 Xcode를 설치해야 합니다. 다음으로.

__CAPGO_KEEP_0__.config.json 파일의 webDir capacitor.config.json 빌드 명령어를 실행하고 __CAPGO_KEEP_0__과 프로젝트를 싱크하세요.

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

Capacitor

npm run build
npx cap sync

명령어는 React.js 프로젝트를 빌드하며 npm run build 는 네이티브 플랫폼의 정확한 위치에 웹 __CAPGO_KEEP_0__를 정렬하여 기기에서 실행할 수 있도록 합니다. npx cap sync will align the web code in the accurate places of the native platforms so they can be executed in an app.

네이티브 앱을 빌드하고 배포하기

iOS 앱을 개발하려면

Xcode 가 필요하며, Android 앱은Android Studio 가 필요합니다. 앱 스토어에서 앱을 배포하려면 iOS는 Apple Developer Program에, Android는 Google Play Console에 등록해야 합니다.Capgo는 네이티브 프로젝트를 열기 위한 프로세스를 단순화합니다:

The Capacitor CLI simplifies the process of opening both native projects:

npx cap open ios
npx cap open android

Developing iOS apps requires Xcode, and Android apps need Android Studio. If you plan to distribute your app on the app store, you must enroll in the Apple Developer Program for iOS and the Google Play Console for Android.

Android Studio에서 앱을 연결된 기기에서 실행하려면 모든 것을 로드하고 기다려야 합니다.

Xcode에서 앱을 실제 기기에서 실행하기 위해 시뮬레이터 대신 서명 계정을 설정하세요. 그 후에 단순히 플레이 버튼을 클릭하여 연결된 기기에서 앱을 실행하세요. 기기를 선택하려면 위쪽에서 선택하세요.

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

Capacitor Live Reload

최신 개발 프레임워크는 대부분 핫 리로드 기능을 제공합니다. Capacitor도 마찬가지로 핫 리로드 기능을 제공할 수 있습니다. __CAPGO_KEEP_0__ Live Reload!

네트워크 내에서 로컬 호스트 애플리케이션에 라이브 리로드를 적용하려면 Capacitor 앱이 특정 URL에서 콘텐츠를 로드하도록 설정하세요.

먼저 로컬 IP 주소를 확인하세요. 맥에서는 터미널에서 실행하여 IP 주소를 확인할 수 있습니다. 윈도우에서는 명령 프롬프트에서 실행하여 IPv4 주소를 확인하세요. ipconfig getifaddr en0 터미널에서 다음 명령어를 실행하세요. ipconfig 명령 프롬프트에서 다음 명령어를 실행하세요.

이제 Capacitor 앱을 서버에서 직접 로드하도록 설정하세요. 앱의 capacitor.config.ts __CAPGO_KEEP_0__ 앱을 서버에서 직접 로드하도록 설정하세요. 앱의

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;

__CAPGO_KEEP_0__ IP 주소와 포트를 정확하게 사용하십시오. Run npx cap copy __CAPGO_KEEP_0__ 변경 사항을 우리의 네이티브 프로젝트에 적용하기 위해

앱을 다시 한 번 Android Studio 또는 Xcode를 통해 배포한 후, React 앱의 변경 사항은 자동으로 다시 로드되고 앱에 표시됩니다!

새로운 플러그인을 설치한 경우, 카메라와 같은 경우, 네이티브 프로젝트를 다시 빌드해야 합니다. 이는 네이티브 파일이 변경되었기 때문입니다. 즉, 동적으로 업데이트할 수 없습니다.

Capacitor 플러그인 사용

Capacitor 플러그인을 사용하는 방법에 대해 간단히 살펴보겠습니다. 간단한 플러그인을 설치해 보겠습니다. 예를 들어, 공유 플러그인, native 공유 대화상자를 표시합니다.

npm i @capacitor/share

사용하려면 패키지를 임포트하고, 앱에서 해당 share() 함수 App.js:

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;

새로운 플러그인을 설치한 후, 다시 React 프로젝트를 싱크해야 합니다. npx cap sync.

Konsta UI를 Implement하는 방법: 더 좋은 모바일 UI

더 좋은 모바일 UI 경험을 위해, 우리는 Konsta UI를 사용할 것입니다. iOS와 Android에 특화된 스타일링을 제공하고, 사용하기 쉽습니다.

Konsta UI를 사용하려면 React 패키지를 설치하세요:

npm i konsta

현재 Tailwind CSS 설정을 보완하는 추가 변형 및 유틸리티가 필요하므로, 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 Konsta UI를 사용하기 위해,

주요 App 컴포넌트를 설정하여 전역 매개변수와 같은 theme를 설정하세요. 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 페이지에 사용하세요. 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>
  );
}