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

이 튜토리얼에서, 우리는 새로운 React 앱에서 시작하여 Capacitor를 사용하여 네이티브 모바일 개발로 전환할 것입니다. optionally, Capacitor에 추가하여 Tailwind CSS와 함께 개선된 모바일 UI를 제공하는 Konsta UI 도 사용할 수 있습니다. __CAPGO_KEEP_0__는 React 웹 애플리케이션을 네이티브 모바일 앱으로 쉽게 변환할 수 있게 해줍니다. __CAPGO_KEEP_0__를 사용하면 React Native와 같은 새로운 기술을 배울 필요 없이 네이티브 모바일 앱으로 변환할 수 있습니다. 대부분의 React 애플리케이션은 몇 가지 단순한 단계만으로 모바일 앱으로 변환할 수 있습니다. 이 튜토리얼에서는 새로운 React 애플리케이션부터 시작하여 __CAPGO_KEEP_0__를 사용하여 네이티브 모바일 앱으로 전환하는 과정을 안내합니다. 또한 optionally, __CAPGO_KEEP_0__를 사용하여 Tailwind CSS와 함께 개선된 모바일 UI를 제공하는

Capacitor allows you to easily convert your React web application into a native mobile app without significant modifications or learning a new skill like React Native.

도 사용할 수 있습니다. __CAPGO_KEEP_0__에 대해 알아보기

CapacitorJS는 게임 체이저입니다! Capacitor를 웹 프로젝트에 쉽게 통합할 수 있으며, Capacitor는 네이티브 웹뷰로 애플리케이션을.wrap하고, 네이티브 Xcode 및 Android Studio 프로젝트를 생성합니다. 또한 플러그인은 JS 브리지를 통해 카메라와 같은 네이티브 장치 기능에 접근할 수 있습니다. __CAPGO_KEEP_0__ __CAPGO_KEEP_0__

Capacitor

__CAPGO_KEEP_0__

Capacitor으로 Capacitor을 사용하면 복잡한 설정이나 기울임꼴의 학습 곡선이 없는 훌륭한 네이티브 모바일 앱을 얻을 수 있습니다. API과 streamlined 기능이 얇고 streamlined 기능을 제공하여 프로젝트에 통합하는 것이 쉬워집니다. 믿을 수 있듯이 Capacitor으로 완전히 기능하는 네이티브 앱을 달성하는 것이 얼마나 쉬운지 놀랄 것입니다!

리액트 앱을 준비하세요

이 튜토리얼에서 가장 단순한 방법으로 리액트 앱을 시작하는 방법에 대해 설명하겠습니다. 이는 빈 리액트 앱을 제공하는 방법입니다.

npx create-react-app my-app

네이티브 모바일 앱을 만들기 위해서는 프로젝트의 export 가 필요합니다. 따라서 프로젝트의 package.json 에 간단한 스크립트를 포함하여 프로젝트를 빌드하고 내보낼 수 있도록 하겠습니다.

{
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  }
}

이제 __CAPGO_KEEP_0__을 실행할 수 있습니다. 걱정하지 마세요. 프로젝트의 루트 폴더에 새로운 폴더가 생성되어야 합니다. npm run build 이 폴더는 __CAPGO_KEEP_0__에 의해 나중에 사용될 것입니다. 그러나 현재는 올바르게 설정해야 합니다.

Capacitor을 리액트 앱에 추가하세요

Capacitor을 사용하여 Capacitor을 추가하세요

To native 모바일 앱으로 웹 앱을 패키징하려면 몇 가지 초기 단계를 따르야 하지만, 그 후에는 단일 명령어만 실행하면 됩니다. sync 먼저

__CAPGO_KEEP_0__ Capacitor CLI 를 개발 의존성으로 설치하고, 프로젝트 내에서 설정할 수 있습니다. 설정 중에는 이름과 번들 ID에 대한 기본값을 수락하려면 “엔터”를 눌러도 됩니다.

다음으로 iOS 및 Android 플랫폼에 관련된 패키지를 설치해야 합니다.

마지막으로 플랫폼을 추가하고, Capacitor은 프로젝트의 루트 폴더에 각 플랫폼을 위한 폴더를 생성할 것입니다:

# 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

이 시점에서 React 프로젝트에서 새로운 ios 와 android 폴더를 관찰할 수 있어야 합니다.

실제로 네이티브 프로젝트입니다!

앱디바이스 프로젝트에 접근하기 위해서는 Android Studio을 설치해야 합니다. iOS는 Mac에서 사용해야 하며 Xcode.

을 설치해야 합니다. 또한 프로젝트에서 capacitor.config.ts file in your project, which contains some fundamental Capacitor settings utilized during the sync. The only thing you need to pay attention to is the webDir입니다. 이 설정은 현재 명령어의 결과로 설정되어야 합니다.

이 설정이 정확하지 않습니다. 이 문제를 해결하기 위해서는 capacitor.config.json 파일과 업데이트 하세요. webDir:

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

다음 명령어를 실행하여 시도해 보세요:

npm run build
npx cap sync

첫 번째 명령어는 npm run build React 프로젝트를 단순히 빌드하고 정적 빌드를 내보냅니다.

두 번째 명령어는 npx cap sync 웹 code을 모든 네이티브 플랫폼의 올바른 위치에同步합니다.

그리고 앱에서 표시되도록합니다. Capacitor plugins __CAPGO_KEEP_0__ 플러그인을 설치하면 npx cap sync 다시 실행해야합니다.

그러나 의식하지 못하고 실제로 완료되었습니다. 그래서 기기에서 앱을 보러 가 봅시다!

native 앱을 빌드하고 배포하세요

iOS 앱을 개발하려면 Xcode 를 설치해야하고 Android 앱을 개발하려면 Android Studio 를 설치해야합니다. 또한 앱을 스토어에 배포하려면 iOS에는 Apple Developer Program에 등록하고 Android에는 Google Play Console에 등록해야합니다.

native 모바일 개발에 새로운 경우 Capacitor CLI를 사용하여 쉽게 두 개의 네이티브 프로젝트를 열 수 있습니다.

npx cap open ios
npx cap open android

네이티브 프로젝트를 설정한 후 장치에 앱을 배포하는 것은 쉽습니다. Android Studio에서는 설정을 변경하지 않고 장치에 앱을 배포할 수 있습니다. 예를 들어:

Xcode에서는 실제 장치에 앱을 배포하려면 서명 계정 설정을 해야합니다. 이 과정을 처음으로 진행하는 경우 Xcode는 개발자 프로그램에 등록된 경우 개발자 프로그램을 안내합니다. 그 후에 단순히 플레이 버튼을 클릭하여 장치에 앱을 실행할 수 있습니다. 장치 선택은 위쪽에서 가능합니다. 예를 들어:

성공적으로 React 웹 앱을 모바일 장치에 배포했습니다. 예를 들어:

하지만, 개발 중에 더 빠른 방법이 있습니다...

Capacitor Live Reload

이제는 모든 현대 프레임워크에서热重载을 사용해 보셨을 것입니다. 좋은 뉴스는, 동일한 기능을 모바일 장치에서 사용할 수 있다는 것입니다. 최소한의 노력으로도 가능합니다. 로컬로 호스팅 된 애플리케이션에 대한 접근을 활성화하고, 네트워크 내에서 Live Reload를 사용하려면, __CAPGO_KEEP_0__ 앱이 특정 URL에서 콘텐츠를 로드하도록 하십시오.

첫 번째 단계는 로컬 IP 주소를 찾는 것입니다. 맥을 사용하는 경우, 터미널에서 다음 명령어를 실행하여 이를 알아내십시오: 윈도우즈에서 실행하시면: by having the Capacitor app load the content from the specific URL.

Enable access to your locally hosted application with live reload on your network by having the __CAPGO_KEEP_0__ app load the content from the specific URL.

ipconfig getifaddr en0

By now, you’re probably used to having hot reload with all modern frameworks, and the good news is that you can have the same functionality on a mobile device with minimal effort!

ipconfig

on a mobile device

우리는 Capacitor에 앱을 서버에서 직접 로드하도록 지시할 수 있습니다. 우리의 파일에 추가로 다른 항목을 추가하는 것입니다. capacitor.config.ts 파일:

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

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

export default config;

정확한 IP와 포트를 사용하십시오. 이 예시에서는 기본 React 포트를 사용했습니다. 이제 이러한 변경 사항을 우리의 네이티브 프로젝트로 복사할 수 있습니다:명령은

와 유사하지만, 웹 폴더와 구성에만 변경 사항을 복사하고 네이티브 프로젝트를 업데이트하지 않습니다.

npx cap copy

이제 Android Studio 또는 Xcode를 통해 앱을 한 번 더 배포하십시오. 그 후에, React 앱에서 변경 사항이 있으면 copy configuration syncconfiguration configuration configuration

configuration 앱은 자동으로 다시 로드되고, 변경 사항을 표시합니다. 새로운 플러그인인 카메라를 설치하는 경우에도, native 프로젝트를 다시 빌드해야 합니다. 이는 native 파일이 변경되었기 때문입니다. 이 작업은 실시간으로 수행할 수 없습니다.

주의하십시오 정확한 IP 주소와 포트 번호를 사용하여 구성해야 합니다. 위의 __CAPGO_KEEP_0__ 블록은 React 기본 포트를 데모 목적으로 보여주고 있습니다.

code 플러그인 사용

Capacitor 플러그인을 사용하는 방법에 대해 살펴보겠습니다. 이에 대해 이전에 몇 번 언급했듯이, 간단한 플러그인을 설치하여 수행할 수 있습니다.

Let’s take a look at how to use a Capacitor plugin in action, which we’ve mentioned a few times before. To do this, we can install a fairly simple plugin by running:

npm i @capacitor/share

이 플러그인을 사용하려면, 패키지를 임포트하고, 앱에서 함수를 호출하면 됩니다. 이제는 src/App.js를 변경해 보겠습니다. __CAPGO_KEEP_0____CAPGO_KEEP_0__ share() __CAPGO_KEEP_0__ __CAPGO_KEEP_0__ 이러한 작업을 수행하려면 __CAPGO_KEEP_0__을 사용하여 UI를 구성해야 합니다.

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

function App() {
  const share = async () => {
    await Share.share({
      title: 'Open Youtube',
      text: 'Check new video on youtube',
      url: 'https://www.youtube.com',
      dialogTitle: 'Share with friends'
    });
  };

  return (
    <div>
      <h1>Welcome to React and Capacitor!</h1>
      <p>
        <h2>Cool channel</h2>
        <button onClick={() => share()}>Share now!</button>
      </p>
    </div>
  );
}

export default App;

Capacitor를 설치한 후 새로운 플러그인을 설치할 때는 sync 작업을 수행하고 앱을 다시 장치에 배포해야 합니다. 이 작업을 수행하려면 다음 명령어를 실행하세요.

npx cap sync

버튼을 클릭한 후에 멋진 네이티브 공유 대화 상자를 확인할 수 있습니다.

버튼을 모바일 친화적으로 보이게 하려면 웹 앱에 사용하는 UI 컴포넌트 라이브러리 - React를 사용하여 스타일링을 추가할 수 있습니다.

Konsta UI를 추가합니다.

__CAPGO_KEEP_0__을 사용하여 여러 해 동안 Capacitor를 사용하여 멋진 크로스 플랫폼 애플리케이션을 빌드했습니다. 그 중에서 몇 년 동안 최고의 선택이었지만 이제는 더 이상 추천하지 않습니다. React와 통합하기가 매우 복잡하고, 이미 __CAPGO_KEEP_0__을 사용하고 있다면 그만큼의 가치가 없기 때문입니다. tailwindcss iOS와 Android에 특화된 스타일링을 지원하는 멋진 모바일 UI를 원한다면 Konsta UI를 추천합니다..

__CAPGO_KEEP_0__이 필요합니다.

Capacitor를 설치한 후 새로운 플러그인을 설치할 때는 sync 작업을 수행하고 앱을 다시 장치에 배포해야 합니다. 이 작업을 수행하려면 다음 명령어를 실행하세요. tailwind가 이미 설치되어 있습니다.

사용하려면 react 패키지를 설치하는 것만 필요합니다.:

npm i konsta

또한, 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를 위해 필요한 추가 변형 및 도우미 유틸리티를 포함하여 기본 (또는 커스텀) Tailwind CSS 설정을 확장합니다.

이제 메인 App 컴포넌트를 설정하여 전역 매개변수 (예를 들어 theme).

를 설정할 수 있습니다. App 앱 전체를 src/App.js:

import { App } from 'konsta/react';
import './App.css';

function MyApp({ Component, pageProps }) {
  return (
    // Wrap our app with App component
    <App theme="ios">
      <Component {...pageProps} />
    </App>
  );
}

export default MyApp;

로 감싸야 합니다.

예시 페이지

예를 들어, 다음과 같이 열어보세요. src/App.js 그리고 다음으로 변경하세요:

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

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

      <Block strong>
        <p>
          Here is your React & Konsta UI app. Let's see what we have here.
        </p>
      </Block>
      <BlockTitle>Navigation</BlockTitle>
      <List>
        <ListItem href="/about/" title="About" />
        <ListItem href="/form/" title="Form" />
      </List>

      <Block strong className="flex space-x-4">
        <Button>Button 1</Button>
        <Button>Button 2</Button>
      </Block>
    </Page>
  );
}

export default App;

모든 필요한 구성 요소를 설치한 후에 live reload이 동기화되지 않으면 다시 모든 것을 시작해 보세요. 한 번에 그 작업을 마치면, React와 Capacitor로 빌드된 모바일 앱을 보실 수 있을 것입니다.

다음과 같은 페이지를 결과로 볼 수 있을 것입니다:

결론

Capacitor은 기존 웹 프로젝트를 기반으로 하는 네이티브 애플리케이션을 빌드하는 데 적합한 옵션입니다. existing 웹 프로젝트를 기반으로 하는 네이티브 애플리케이션을 빌드하는 데 code을 공유하고 일관된 UI를 유지하는 간단한 방법을 제공합니다.

그리고 __CAPGO_KEEP_0__를 추가하는 데 __CAPGO_KEEP_0__를 추가하는 데 더 쉬워졌습니다. 앱에 live updates를 추가하여 사용자들이 항상 최신 기능과 버그 수정에 접근할 수 있도록 해 주세요. Capgo를 React 앱에 추가하는 방법을 배우고 싶다면, 다음 기사를 참조하세요:Building Mobile Apps with React와 __CAPGO_KEEP_0__에서 계속 진행하세요.

Capgo

Keep going from Building Mobile Apps with React and Capacitor

If you are using React와 Capacitor으로 모바일 앱을 빌드하는 방법 __CAPGO_KEEP_0__ CI/CD와 연결하여 CI/CD 자동화 계획을 만듭니다. Capgo CI/CD Capgo CI/CD에서 제품 워크플로우를 관리합니다. Capgo Native Builds Capgo Native Builds에서 제품 워크플로우를 관리합니다. Capgo Integrations Capgo Integrations에서 제품 워크플로우를 관리합니다. CI/CD Integration CI/CD Integration의 구현 세부 사항 GitHub Actions Integration 구현 세부 정보에 대한 GitHub 액션 통합.