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

이 튜토리얼에서는 새로운 리액트 앱을 시작하여 __CAPGO_KEEP_0__를 사용하여 네이티브 모바일 개발로 전환할 것입니다. optionally, Konsta UI도 추가할 수 있습니다. 리액트 Capacitor Konsta UI for an improved mobile UI with Tailwind CSS.

Capacitor은 React 웹 애플리케이션을 쉽게 네이티브 모바일 앱으로 변환할 수 있도록 해줍니다. 네이티브 모바일 앱으로 변환할 때 중요한 변경이나 새로운 기술을 배우지 않아도 됩니다.

대부분의 React 애플리케이션은 몇 가지 단순한 단계만으로 모바일 앱으로 변환할 수 있습니다.

이 튜토리얼에서는 React 앱의 새로운 버전부터 시작하여 Capacitor를 사용하여 네이티브 모바일 앱으로 변환하는 과정을 안내합니다. 또한 optionally Capacitor를 사용하여 Konsta UI 를 사용하여 Tailwind CSS와 함께 모바일 UI를 향상할 수 있습니다.

Capacitor에 대해 알아보기

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

Capacitor를 사용하면 복잡한 설정이나 기울임꼴의 학습 곡선 없이도 훌륭한 네이티브 모바일 앱을 얻을 수 있습니다. API와 streamlined 기능은 프로젝트에 통합하는 것을 매우 쉬운 일로 만들었습니다. 믿을 수 없을 정도로 Capacitor를 사용하여 완전히 기능적인 네이티브 앱을 쉽게 만들 수 있습니다.

React 앱을 준비하기

이 튜토리얼에서 사용할 React 애플리케이션을 시작하는 방법은 여러 가지가 있습니다. 가장 단순한 방법을 사용하겠습니다.

npx create-react-app my-app

네이티브 모바일 앱을 만들기 위해선 프로젝트의 내보내기. 따라서, 우리 프로젝트에 간단한 스크립트를 포함시켜 React 프로젝트를 빌드하고 내보낼 수 있도록 하겠습니다. package.json에 포함시킬 수 있는 스크립트입니다. 이제 걱정없이 실행할 수 있으며, 프로젝트의 루트 폴더에 새로운 폴더를 찾을 수 있습니다. 이 폴더는 __CAPGO_KEEP_0__에 의해 나중에 사용되지만, 현재는 올바르게 설정해야 합니다.

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

__CAPGO_KEEP_0__를 React 앱에 추가하는 방법 npm run build 웹 앱을 네이티브 모바일 컨테이너로 패키징하려면 몇 가지 초기 단계를 따르면, 단일 명령어만 실행하면 됩니다.

Capacitor

Adding Capacitor to Your React App

export sync of our project. Thus, let’s include a straightforward script in our

package.json 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 프로젝트에 접근하려면 Android Studio를 설치해야 합니다. iOS는 Mac에서 설치해야 하며, Mac이 없다면 iOS 프로젝트에 접근할 수 없습니다.Android Studio Xcode.

그리고 당신은 프로젝트에서 capacitor.config.ts 파일을 찾을 수 있어야 합니다. 이 파일에는 동기화 과정에서 사용되는 기본적인 Capacitor 설정이 포함되어 있습니다. 주의할 것은 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을 네이티브 플랫폼의 올바른 위치에同步합니다. 이로써 앱에서 표시될 수 있습니다.

또한 Sync 명령어는 네이티브 플랫폼을 업데이트하고 플러그인을 설치할 수 있으므로 새로운 Capacitor 플러그인을 설치할 때 다시 실행해야 합니다. npx cap sync 알지 못한 채로 실제로 완료되었습니다. 이제 기기를 통해 앱을 확인해 보겠습니다.

네이티브 앱 빌드 및 배포

iOS 앱을 개발하려면

Xcode 설치되어야 하며, Android 앱을 개발하려면 설치되어야 합니다. Android Studio가 설치되어 있습니다. 또한 앱을 앱 스토어에 배포하려면 iOS에는 Apple Developer Program에, Android에는 Google Play Console에 등록해야 합니다. native 모바일 개발에 새로운 사람이라면 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__을 사용하여 쉽게 두 개의 네이티브 프로젝트를 열 수 있습니다.

If you’re new to native mobile development, you can use the Capacitor CLI to easily open both native projects:

npx cap open ios
npx cap open android

android-studio-run

Xcode에서는 실제 장치에 앱을 배포하기 위해 서명 계정을 설정해야 합니다. 만약 이 과정을 처음으로 진행한다면 Xcode는 개발자 프로그램에 등록되어야 한다는 것을 안내해 줄 것입니다. 그 후에 단순히 플레이 버튼을 클릭하여 연결된 장치에서 앱을 실행할 수 있습니다. 실행할 장치를 위쪽에서 선택할 수 있습니다. 예를 들어 다음과 같습니다.

xcode-run

축하합니다! React 웹 앱을 모바일 장치에 성공적으로 배포했습니다. 예를 들어 다음과 같습니다.

react-mobile-app

__CAPGO_KEEP_0__ Live Reload

이제는 모든 현대 프레임워크에서 핫 리로드를 사용해 보셨을 것입니다. 좋은 소식은 Capacitor Live Reload과 같은 기능을 사용할 수 있다는 것입니다.

__CAPGO_KEEP_1__ 모바일 기기에서 최소한의 노력으로!

실시간 리로드를 지원하는 로컬 호스팅 애플리케이션에 접근할 수 있도록 해주세요. 네트워크 내에서 Capacitor 앱이 특정 URL에서 콘텐츠를 로드하도록 하여

첫 번째 단계는 로컬 IP 주소를 찾는 것입니다. 맥을 사용하는 경우, 터미널에서 다음 명령어를 실행하여 이를 알아낼 수 있습니다.

ipconfig getifaddr en0

윈도우즈에서 실행하세요:

ipconfig

그런 다음 IPv4 주소를 찾으세요.

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;

__CAPGO_KEEP_0__을 사용할 때 정확한 IP 주소와 포트를 사용하십시오., 이 예시에서 기본 React 포트를 사용했습니다.

이제 이러한 변경 사항을 원시 프로젝트로 복사할 수 있습니다:

npx cap copy

The copy 명령어는 sync와 유사하지만 웹 폴더와 구성만 복사하고 원시 프로젝트를 업데이트하지 않습니다. 이제 Android Studio 또는 Xcode를 통해 앱을 한 번 더 배포할 수 있습니다. 그 후에, React 앱에서 변경 사항을 변경하면 앱은 자동으로 다시 로드되고 변경 사항을 표시합니다!

주의하십시오 새로운 플러그인인 카메라를 설치한 경우 여전히 원시 프로젝트를 다시 빌드해야 합니다. 이는 원시 파일이 변경되었기 때문입니다. 이 작업은 즉시 수행할 수 없습니다. Keep in mind that if you install new plugins such as the camera, it still requires a rebuild of your native project. This is because native files are changed, and it can’t be done on the fly.

You can now deploy your app one more time through Android Studio or Xcode. After that, if you change something in your React app, the app will automatically reload and show the changes! The command is similar to , but it will only copy over the changes made to the web folder and configuration, without updating the native project.

정확한 IP와 포트를 사용하여 구성 파일을 설정하세요. 위의 code 블록은 React 기본 포트를 데모 목적으로 보여주고 있습니다.

Capacitor 플러그인 사용

이전에도 언급한 바와 같이 Capacitor 플러그인을 사용하는 방법에 대해 살펴보겠습니다. 이를 위해 우리는 간단한 플러그인을 설치할 수 있습니다. 이를 위해 다음 명령어를 실행하세요:

npm i @capacitor/share

__CAPGO_KEEP_0__ 플러그인은 특별한 기능도 없지만, native share dialog를 표시합니다. 플러그인을 공유하는 것은 의미가 없지만, native share dialog를 표시합니다.이제는 __CAPGO_KEEP_0__ 패키지를 임포트하고, 앱에서 해당 함수를 호출하면 됩니다. 따라서, share() src/App.js 파일을 다음으로 변경하세요: 새로운 플러그인을 설치할 때, sync 연산을 수행하고 앱을 다시 배포해야 합니다. 이를 위해 다음 명령어를 실행하세요:

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;

버튼을 클릭한 후, native share dialog를 사용할 수 있습니다!

npx cap sync

react-__CAPGO_KEEP_0__-share

Note: capacitor is a placeholder and should be replaced with the actual value.

모바일 친화적인 버튼을 보이기 위해, 우리는 웹 앱의 UI 컴포넌트 라이브러리 - React를 사용하여 스타일링을 추가할 수 있습니다. (이것은 농담이 아닙니다.)

Konsta UI를 추가합니다.

나는 여러 해 동안 Ionic 을 사용하여 크로스 플랫폼 애플리케이션을 만들었습니다. 그것은 여러 해 동안 최고의 선택이었습니다. 그러나 이제는 그것을 추천하지 않습니다. 그것은 React와 통합하기 매우 복잡하고, React가 이미 설치되어 있다면 그것은 정말로 가치가 없습니다. tailwindcss.

iOS와 Android의 스타일링을 적응하는 훌륭한 모바일 UI를 원한다면, 나는 Konsta UI를 추천합니다.

Konsta UI를 사용하려면, tailwind

이미 설치되어 있어야 합니다.

npm i konsta

사용하려면, 우리는 단지 React 패키지를 설치하면 됩니다. 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 Tailwind CSS 설정을 기본 설정 (또는 사용자 정의 설정)에서 확장하여 Konsta UI에 필요한 추가 변형 및 도우미 유틸리티를 추가합니다.

메인 앱 구성 요소를 설정하여 전역 매개 변수 (예: 앱 전체를 로 감싸야 합니다. theme).

예시 페이지 App 모든 설정이 완료되면 React 앱에서 Konsta UI React 컴포넌트를 사용할 수 있습니다. 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;

예를 들어,

를 열고 다음으로 변경하세요:

라이브 리로드가 설치된 모든 필요한 컴포넌트 후 동기화가 맞지 않으면 다시 시작해 보세요. 그 후에 React와 __CAPGO_KEEP_0__로 빌드된 모바일 앱을 보실 수 있습니다. 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;

If the live reload is out of sync after installing all the necessary components, try restarting everything. Once you have done that, you should see a mobile app with a somewhat native look, built with React and Capacitor!

모바일 앱을 빌드하여 React와 __CAPGO_KEEP_0__로 빌드된 모바일 앱을 만듭니다.