React와 Capacitor을 사용한 모바일 앱 개발

이 튜토리얼에서는 새로운 React 앱을 시작하여 __CAPGO_KEEP_0__을 사용하여 네이티브 모바일 개발로 전환할 것입니다. 또한 __CAPGO_KEEP_1__ 네이티브 네비게이션 및 전환을 추가하여 네이티브 모바일 느낌을 제공하고 tailwind-__CAPGO_KEEP_2__를 사용하여 안전한 영역을 사용할 수 있습니다. __CAPGO_KEEP_0__은 React 웹 애플리케이션을 네이티브 모바일 앱으로 쉽게 변환할 수 있는 기능을 제공합니다. 네이티브 모바일 앱으로 변환하는 데 필요한 수정이나 새로운 기술을 배우지 않아도 됩니다. app and transition to native mobile development using Capacitor. You can also add Capgo Native Navigation and Transitions for a native mobile feel, and use tailwind-capacitor for safe areas.

이 튜토리얼에서는 새로운 React 앱을 시작하여 Capacitor을 사용하여 네이티브 모바일 앱으로 전환하는 과정을 안내합니다. 또한 __CAPGO_KEEP_1__ 네이티브 네비게이션, 전환 및 tailwind-__CAPGO_KEEP_2__를 사용하여 안전한 영역을 사용할 수 있습니다.

__CAPGO_KEEP_0__에 대해 알아보기

This tutorial will guide you through the process, starting with a new React app and then incorporating Capacitor to move into the realm of native mobile apps. You can also use Capgo Native Navigation, Transitions, and tailwind-capacitor for safe areas.

About Capacitor

__CAPGO_KEEP_2__

Capacitor으로는 훌륭한 네이티브 모바일 앱을 간단한 설정이나 기울임꼴의 학습 곡선 없이 얻을 수 있습니다. API와 streamlined 기능이 얇아져서 프로젝트에 통합하는 것이 쉬워졌습니다. 믿어도 됩니다. Capacitor를 사용하면 완전히 기능하는 네이티브 앱을 쉽게 달성할 수 있습니다.

React 앱을 준비합니다

이 튜토리얼에서 가장 단순한 방법으로 React 애플리케이션을 시작하는 방법에 대해 설명합니다.

npx create-react-app my-app

네이티브 모바일 앱을 만들기 위해서는 프로젝트의 export 이 필요합니다. 따라서 package.json에 쉽게 사용할 수 있는 스크립트를 포함하여 React 프로젝트를 빌드하고 export할 수 있도록 하겠습니다. 이제 __CAPGO_KEEP_0__를 실행할 수 있습니다. 걱정 없이 실행할 수 있으며 프로젝트의 루트 폴더에 새로운 폴더를 찾을 수 있습니다. 이 폴더는 __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 __CAPGO_KEEP_0__

This folder will be used by Capacitor later on, but for now, we must set it up correctly.

Adding Capacitor to Your React App

모바일 네이티브 컨테이너로 웹 앱을 패키지화하려면 몇 가지 초기 단계를 따르야 하지만 나중에 단일 sync 명령어만 실행하면 됩니다.

먼저 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 폴더를 관찰할 수 있어야 합니다.

Those are real native projects!

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, 이 값이 빌드 명령의 결과를 가리키지 않으면 안됩니다. 현재는 정확하지 않습니다. 이 문제를 해결하기 위해서는

__CAPGO_KEEP_0__.config.json 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에서는 설정을 변경하지 않고도 연결된 장치에 앱을 배포할 수 있습니다. 예를 들어:

android-studio-run

Xcode에서는 실제 장치에 앱을 배포하려면 서명 계정을 설정해야합니다. 서명 계정을 설정한 적이 없다면 Xcode는 프로세스를 안내해줍니다(하지만 다시 말하지만 개발자 프로그램에 등록해야합니다). 그 후에 단지 플레이 버튼을 클릭하여 연결된 장치에서 앱을 실행할 수 있습니다. 앱을 실행할 장치를 위쪽에서 선택할 수 있습니다. 예를 들어:

xcode-run

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

개발 중에 더 빠르게 이 작업을 수행할 수 있는 방법이 있습니다.

Capacitor 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

with minimal effort!

Capacitor을 서버에서 직접 로드하도록 지시하려면, 우리의 capacitor.config.ts file:

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__를 올바르게 사용하십시오. , 예제에서는 기본 React 포트를 사용했습니다.이제, 이러한 변경 사항을 우리의 네이티브 프로젝트로 복사할 수 있습니다.

명령은

npx cap copy

,와 유사하지만, 웹 폴더와 설정만 복사하고 네이티브 프로젝트를 업데이트하지 않습니다. copy __CAPGO_KEEP_0__를 다시 한 번 Android Studio 또는 Xcode를 통해 배포하십시오. 그 후, React 앱에서 변경 사항이 생기면... sync__CAPGO_KEEP_0__을 다시 한 번 Android Studio 또는 Xcode를 통해 배포하십시오. 그 후, React 앱에서 변경 사항이 생기면... __CAPGO_KEEP_0__을 다시 한 번 Android Studio 또는 Xcode를 통해 배포하십시오. 그 후, React 앱에서 변경 사항이 생기면... __CAPGO_KEEP_0__을 다시 한 번 Android Studio 또는 Xcode를 통해 배포하십시오. 그 후, React 앱에서 변경 사항이 생기면...

__CAPGO_KEEP_0__을 다시 한 번 Android Studio 또는 Xcode를 통해 배포하십시오. 그 후, React 앱에서 변경 사항이 생기면... 앱은 자동으로 다시 로드되고 변경 사항을 표시합니다!

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

정확한 IP와 포트를 사용하여 구성해야 합니다. code 블록은 데모를 위해 기본 React 포트를 보여줍니다.

Capacitor 플러그인 사용

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

npm i @capacitor/share

Share 플러그인은 특별한 기능이 없지만, native 공유 대화 상자를 열어줍니다!이제는 플러그인을 임포트하고 앱에서 share() 함수를 호출하기만 하면 됩니다. Let’s src/App.js를 변경하십시오. __CAPGO_KEEP_0__ 플러그인을 사용하는 방법에 대해 살펴보겠습니다. 이에 대해 이전에 몇 번 언급했듯이, 이를 수행하려면 다음과 같은 간단한 플러그인을 설치할 수 있습니다. 이러한 절차를 따르세요:

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;

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

npx cap sync

버튼을 클릭한 후, 아름다운 네이티브 공유 대화창을 경험할 수 있습니다!

iOS와 Android에서 앱을 더 네이티브하게 만들고 Capgo 네비게이션과 전환을 사용하여 일반적인 iOS 레이아웃 문제를 해결할 수 있습니다. 또한 Capgo 네이티브 네비게이션과 전환을 사용하여 앱을 네이티브하게 만들 수 있습니다.

10년 이상 Ionic 을 사용하여 크로스 플랫폼 앱을 개발했지만, React와 통합하는 것은 복잡하고 드물게 가치가 있습니다. 이미 Tailwind CSS.

를 사용하고 있다면, React + Capacitor 앱에서 네이티브 모바일 느낌을 얻으려면 Capgo 플러그인을 사용하세요. 웹 전용 UI 키트인 Konsta UI와 같은 대신에:

@capgo/capacitor-native-navigation native navbar, Liquid Glass 탭바를 iOS에서, Android에서 블러드 탭바 스타일을 사용합니다. React 라우터는 경로 상태를 유지하고; 플러그인은 네이티브 창을 소유합니다.
@capgo/capacitor-transitions iOS 에지 스와이프 백을 WebView layer에서 Ionic-style 페이지 전환과 함께 사용할 수 있습니다. Ionic UI 를 채택하지 않습니다.

두 개 모두 설치하세요:

bun add @capgo/capacitor-native-navigation @capgo/capacitor-transitions
bunx cap sync

CSS inset 모드를 사용하여 네이티브 바를 존중하는 웹 콘텐츠를 네이티브 네비게이션을 구성하세요:

import { NativeNavigation } from '@capgo/capacitor-native-navigation';

await NativeNavigation.configure({
  contentInsetMode: 'css',
  animationDuration: 360,
  glass: {
    effect: 'liquidGlass',
  },
});

리퀴드 글라스 탭바를 렌더링하세요 (iOS는 시스템 소유 렌더링을 사용하고 Android는 블러드 WebView 백그라운드 사용):

await NativeNavigation.setTabbar({
  selectedId: 'home',
  labelVisibilityMode: 'labeled',
  icons: true,
  colors: { dynamic: true },
  tabs: [
    { id: 'home', title: 'Home', icon: { svg: '...' } },
    { id: 'settings', title: 'Settings', icon: { svg: '...' } },
  ],
});

await NativeNavigation.addListener('tabSelect', ({ id }) => {
  navigate(`/${id}`);
});

앱 셸에서 네이티브 페이지 전환을 추가하세요:

import { useEffect, useRef } from 'react';
import { useNavigate } from 'react-router-dom';
import '@capgo/capacitor-transitions';
import { initTransitions, setDirection, setupRouterOutlet } from '@capgo/capacitor-transitions/react';

initTransitions({ platform: 'auto' });

export function AppShell() {
  const navigate = useNavigate();
  const outletRef = useRef<HTMLElement>(null);

  useEffect(() => {
    if (outletRef.current) {
      setupRouterOutlet(outletRef.current, { platform: 'auto', swipeGesture: 'auto' });
    }
  }, []);

  const openSettings = () => {
    setDirection('forward');
    navigate('/settings');
  };

  return <cap-router-outlet ref={outletRef}>{/* routes */}</cap-router-outlet>;
}

페이지를 cap-router-outlet, cap-page, cap-content, setDirection('forward') , setDirection('back') ,

See the full guides: @capgo/capacitor-native-navigation 사용하기 및 @capgo/capacitor-transitions 사용하기.

Tailwind에서 안전한 영역

Tailwind CSS에서 장치 안전 영역을 사용하려면 @capgo/tailwind-capacitor을 사용하세요. ( __CAPGO_KEEP_0__에서 tailwind-capacitor 에 공개되었습니다.). Tailwind에서 npm-친화적인 유용한 플러그인들을 제공합니다. safe-areas utilities and other Capacitor-friendly Tailwind plugins:

bun add -D tailwind-capacitor

__CAPGO_KEEP_0__와 같은 유용한 기능을 사용하세요. src/index.css:

@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";

__CAPGO_KEEP_0__는 __CAPGO_KEEP_1__에서 __CAPGO_KEEP_2__합니다. pt-safe, pb-safe그리고 px-safe 대신에 뿌리듯 뿌리기 env(safe-area-inset-*) React 설정을 위해 누락된 것이 있다면 GitHub에 PR을 열어.

iOS 레이아웃 문제 해결 (뷰포트, 안전 영역, 가로 스크롤)

iOS에서 콘텐츠가 잘려나거나-shifted되거나 가로 스크롤이 가능하다면 overflow-x: hidden 뷰포트 태그만 추가하거나 조정하는 것만으로 해결되지 않는다. 이러한 체크를 순서대로 진행하라.

뷰포트 메타 태그가 올바르게 적용되었는지 확인하라.

뷰포트 메타 태그를 추가하라. index.html 내부 <head>:

<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />

iOS 안전 영역을 하나의 루트 wrapper에서만 처리하라.

싱글 앱 셸을 생성하고 안전 영역 패딩을 적용하라 — 여러 개의 중첩된 컴포넌트에서만 적용하지 마라:

html,
body,
#root {
  width: 100%;
  min-height: 100%;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

.app-shell {
  min-height: 100dvh;
  width: 100%;
  padding-top: env(safe-area-inset-top);
  padding-right: env(safe-area-inset-right);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
}

모든 페이지 콘텐츠를 감싸세요. .app-shell헤더, 모달, 레이아웃 wrapper에서 중복된 safe-area 패딩이 UI가 잘린 것처럼 보이거나 너무 크게 보이게 만듭니다.

그리고 @capgo/tailwind-capacitor그것과 같은 패딩을 표현할 수 있는 유틸리티들처럼 pt-safe pb-safe px-safe 그것을 단일 셸에

Capacitor iOS `contentInset` 를 `never` 첫 번째

In capacitor.config.ts, contentInsetMode: 'css'자연스러운 inset이 비활성화되고 CSS (또는 Native Navigation의 )가 safe area를 소유하게 해주세요.

const config: CapacitorConfig = {
  appId: 'com.example.myapp',
  appName: 'my-app',
  webDir: 'dist',
  ios: {
    contentInset: 'never',
  },
};

자동 콘텐츠 인셋과 CSS의 자동 콘텐츠 인셋을 혼합하는 Capacitor env(safe-area-inset-*) CSS 패딩이 일반적인 더블 스페이싱의 원인입니다.

실제로 초과하는 요소를 찾으세요.

일반적으로 초과 요인은 요소가 사용하는 100vwTailwind w-screen픽셀 단위의 고정 너비 또는 min-width.

대형

[...document.querySelectorAll('*')]
  .filter(el => el.scrollWidth > document.documentElement.clientWidth)
  .map(el => ({
    el,
    tag: el.tagName,
    class: el.className,
    scrollWidth: el.scrollWidth,
    clientWidth: document.documentElement.clientWidth,
  }));

Safari Web Inspector에서 실행하세요: w-screen Tailwind의 경우 w-full 가능한 경우 100vw / w-screen대부분의 수평 초과 문제는

안전 영역 패딩의 중복 또는 고정 너비 컨테이너 — viewport meta 태그 자체가 아닌 것에서 발생합니다.

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

그리고 __CAPGO_KEEP_0__ 추가로 Capgo, 앱에 실시간 업데이트를 더 쉽게 추가하여 사용자들이 항상 최신 기능과 버그 수정에 접근할 수 있도록 합니다.

Capgo를 React 앱에 추가하는 방법을 배우고 싶다면, 다음 기사를 참조하세요.

Building Mobile Apps with React and Capacitor에서 계속 진행하세요.

__CAPGO_KEEP_0__를 사용하여 CI/CD 자동화 계획을 만든다면, __CAPGO_KEEP_0__ CI/CD와 연결하여 Capacitor CI/CD의 제품 워크플로우에서 __CAPGO_KEEP_0__ Native Builds를 사용하세요. Capgo를 사용하여 CI/CD 자동화 계획을 만든다면, Capgo CI/CD와 연결하여 Capgo CI/CD의 제품 워크플로우에서 Capgo Native Builds를 사용하세요. Capgo Native Builds를 위한 제품 워크플로우에 대해 Capgo 통합 Capgo 통합을 위한 제품 워크플로우에 대해 CI/CD 통합 __CAPGO_KEEP_0__ Actions 통합을 위한 구현 세부 사항, 그리고 GitHub Actions 통합 GitHub Actions 통합을 위한 구현 세부 사항.

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

About Capacitor

React 앱을 준비합니다

Adding Capacitor to Your React App

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

Capacitor Live Reload

Capacitor 플러그인 사용

Capgo 네이티브 네비게이션과 전환을 사용하여 네이티브한 UI를 만들 수 있습니다.

Tailwind에서 안전한 영역

iOS 레이아웃 문제 해결 (뷰포트, 안전 영역, 가로 스크롤)

뷰포트 메타 태그가 올바르게 적용되었는지 확인하라.

iOS 안전 영역을 하나의 루트 wrapper에서만 처리하라.

Capacitor iOS `contentInset` 를 `never` 첫 번째

실제로 초과하는 요소를 찾으세요.

안전 영역 패딩의 중복 또는 고정 너비 컨테이너 — viewport meta 태그 자체가 아닌 것에서 발생합니다.

Building Mobile Apps with React and Capacitor에서 계속 진행하세요.

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

About Capacitor

React 앱을 준비합니다

Adding Capacitor to Your React App

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

Capacitor Live Reload

Capacitor 플러그인 사용

Capgo 네이티브 네비게이션과 전환을 사용하여 네이티브한 UI를 만들 수 있습니다.

Tailwind에서 안전한 영역

iOS 레이아웃 문제 해결 (뷰포트, 안전 영역, 가로 스크롤)

뷰포트 메타 태그가 올바르게 적용되었는지 확인하라.

iOS 안전 영역을 하나의 루트 wrapper에서만 처리하라.

Capacitor iOS contentInset 를 never 첫 번째

실제로 초과하는 요소를 찾으세요.

안전 영역 패딩의 중복 또는 고정 너비 컨테이너 — viewport meta 태그 자체가 아닌 것에서 발생합니다.

Building Mobile Apps with React and Capacitor에서 계속 진행하세요.

Capacitor iOS `contentInset` 를 `never` 첫 번째