![[React.js로만 만드는 모바일 앱: Capacitor을 이용한 가이드]](/react_capacitor.webp)
이 튜토리얼은 React와 Capacitor을 사용하여 모바일 애플리케이션을 제작하는 방법을 안내합니다. 튜토리얼의 끝에서, Capacitor을 사용하여 React.js 웹 애플리케이션을 네이티브 모바일 애플리케이션으로 변환하는 방법과 네이티브한 느낌을 Capgo Native Navigation and Transitions를 사용하여 추가하는 방법을 알 수 있습니다.
Capacitor은 React.js 웹 애플리케이션을 네이티브 모바일 애플리케이션으로 변환하는 것을 쉽게 허용하며, React Native와 같은 새로운 전략을 배울 필요 없이 큰 변화나 학습이 필요하지 않습니다.
이 과정은 몇 가지 단순한 단계로 구성되어 있으며, React.js 애플리케이션을 완전히 작동하는 모바일 애플리케이션으로 변환하기까지는 시간이 걸리지 않습니다. 따라서 이 여정을 안내하는 동안 지켜보세요.
Capacitor 개요
CapacitorJS는 게임 체이저입니다. 웹 프로젝트와 완벽하게 통합할 수 있으며, 네이티브 웹뷰로 앱을.wrap하고 네이티브 Xcode 및 Android Studio 프로젝트를 생성할 수 있습니다. 또한 플러그인을 통해 JS 브리지를 사용하여 카메라와 같은 네이티브 장치 기능에 접근할 수 있습니다.
Capacitor은 네이티브 모바일 애플리케이션을 만들기 위한 단순한 방법을 제공합니다. 네이티브 모바일 애플리케이션을 만들 때 발생하는 어려움이나 steep learning curve가 없습니다. API과 streamlined 기능이 간단하고 편리하게 프로젝트에 통합할 수 있도록 합니다.
React.js 앱 설정
React 애플리케이션을 시작하는 가장 단순한 방법을 사용해 보겠습니다. npm 패키지 매니저를 사용하여 새로운 React 앱을 생성할 것입니다.
npx create-react-app my-app네이티브 모바일 앱으로 프로젝트를 변환하기 위해서는 앱의 __CAPGO_KEEP_0__을 export해야 합니다. 이것에 대해 다시 돌아올 것입니다. 먼저, React 앱에 __CAPGO_KEEP_0__을 통합하는 방법을 이해해 보겠습니다. __CAPGO_KEEP_0__은 React.js 웹 앱을 네이티브 모바일 앱으로 변환하는 것을 쉽게 허용합니다.
We’ll come back to this in a moment. First, let’s understand how to integrate Capacitor into our React app.
React.js 앱에 Capacitor을 통합하기
초기 설정 단계는 조금 복잡할 수 있지만, 그 이후로 네이티브 앱 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 androidios and context android 디렉토리는 이제 React.js 프로젝트에 존재합니다.
앱을 나중에 Android 프로젝트에 접근하기 위해 설치하세요. 안드로이드 스튜디오iOS의 경우 Mac이 필요하고 Xcode.
다음으로 __CAPGO_KEEP_0__.config.json 파일을 업데이트하여 아래와 같이 설정하세요: 빌드 명령어를 실행하고 capacitor 프로젝트를同步하세요: 명령어는 React.js 프로젝트를 빌드합니다.
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "build",
"bundledWebRuntime": false
}는 웹 Capacitor을 native 플랫폼의 정확한 위치에 동기화하여 앱에서 실행할 수 있도록합니다.
npm run build
npx cap sync__CAPGO_KEEP_0__ npm run build __CAPGO_KEEP_0__ npx cap sync code
지금은 조금의 운과 오류가 없다면, React.js 앱이 기기에서 출시 준비가 된 것입니다!
React 앱을 사용하여 모바일 앱을 만들기
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;변경 사항을 적용하려면 native 프로젝트에 다음 변경 사항을 적용하십시오. npx cap copy Android Studio 또는 Xcode를 통해 앱을 다시 배포하면 React 앱의 변경 사항이 자동으로 리로드되고 앱에 표시됩니다.
__CAPGO_KEEP_0__ Live Reload
새로운 플러그인을 설치하면, 예를 들어 카메라와 같은 경우, 네이티브 프로젝트를 다시 빌드해야 합니다. 이는 네이티브 파일이 변경되었기 때문입니다. 이 파일을 실시간으로 업데이트할 수 없습니다.
Capacitor 플러그인 사용
Capacitor 플러그인을 사용하는 방법에 대해 간단하게 살펴보겠습니다. 간단한 하나의 플러그인인 Share 플러그인을 설치해 보겠습니다. 이 플러그인은 네이티브 공유 대화창을 표시합니다.
npm i @capacitor/share__CAPGO_KEEP_0__을 사용하여 앱을 사용하려면 패키지를 임포트하고 앱에서 해당 share() __CAPGO_KEEP_0__ 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.
iOS와 Android에서 앱을 더 네이티브하게 만들고 Capgo 네비게이션과 전환, 그리고 iOS에서 발생하는 수평 스크롤이나 안전 영역이 잘려나가는 문제를 해결할 수 있습니다.
네이티브한 UI를 만들기 위해 Capgo 네이티브 네비게이션과 전환
여러 년 동안 React와 Capacitor를 사용하여 모바일 앱을 만들기 Ionic을 사용하여 가로 플랫폼 앱을 만들기 위해서는, React와 통합하는 것이 불편하고, 이미 가지고 있는 경우에는 거의 가치가 없지만 Tailwind CSS.
For a native mobile feel in a React + Capacitor app, use Capgo plugins instead of web-only UI kits like Konsta UI:
- @capgo/capacitor-native-navigation — 네이티브 네비게이션 바, iOS에서 Liquid Glass 탭 바, Android에서 흐린 탭 바 스타일. React 라우터는 경로 상태를 유지하고; 플러그인은 네이티브 창을 소유합니다.
- @capgo/capacitor-transitions — Ionic 스타일의 페이지 전환 및 iOS 에지 스와이프 백(웹뷰层)으로, 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는 흐린 웹뷰 백그라운드 사용):
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') 이동하기 전에 중복되는 웹 헤더 또는 푸터를 만들지 마십시오. 네이티브 네비게이션에서 이 표면을 소유하고 있습니다.
자세한 지침을 참조하십시오: Using @capgo/capacitor-native-navigation 그리고 Using @capgo/capacitor-transitions.
안전한 영역에 Tailwind 사용
Tailwind CSS에서 장치 안전 영역을 사용하려면 @capgo/tailwind-capacitor (게시일) tailwind-capacitor on npm. safe-areas Capgo는 Capacitor-친화적인 Tailwind 플러그인을 제공합니다.
bun add -D tailwind-capacitorIn src/index.css:
@import 'tailwindcss';
@plugin "@capgo/tailwind-capacitor/platform";
@plugin "@capgo/tailwind-capacitor/safe-areas";React 앱에서 사용할 수 있는 유용한 기능들을 사용하세요. pt-safe, pb-safe, px-safe 대신 __CAPGO_KEEP_0__에서 제공하는 기능들을 사용하세요. env(safe-area-inset-*) 이러한 기능들을 __CAPGO_KEEP_0__에서 직접 구현하는 대신 사용하세요. 프로젝트는 활발하게 개발되고 있습니다. React 설정에 필요한 기능이 누락된 경우, GitHub에 PR을 제출하세요..
iOS 레이아웃 문제를 해결하는 방법 (뷰포트, 안전 영역, 수평 스크롤)
iOS에서 콘텐츠가 잘려나가거나-shifted되거나 수평 스크롤이 가능하다면, __CAPGO_KEEP_0__ 태그를 수정하거나 __CAPGO_KEEP_0__를 추가하는 것만으로는 해결되지 않습니다. 이러한 체크를 순서대로 진행하세요. overflow-x: hidden iOS에서 콘텐츠가 잘려나가거나-shifted되거나 수평 스크롤이 가능하다면, __CAPGO_KEEP_0__ 태그를 수정하거나 __CAPGO_KEEP_0__를 추가하는 것만으로는 해결되지 않습니다.
뷰포트 메타 태그가 올바르게 적용되어 있는지 확인하세요.
뷰포트 메타 태그를 추가하세요. 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에 중복된 안전 영역 패딩을 적용하면 UI가 잘린 것처럼 보거나 너무 크게 보일 수 있습니다.
그리고 @__CAPGO_KEEP_0__/tailwind-__CAPGO_KEEP_1__와 함께, 같은 패딩을 표현할 수 있습니다. @capgo/tailwind-capacitor__CAPGO_KEEP_0__ iOS pt-safe pb-safe px-safe on that single shell.
Set Capacitor iOS contentInset 까지 never 첫 번째
In capacitor.config.ts, contentInsetMode: 'css'자연스러운 inset을 사용하고 CSS (또는 Native Navigation의)
const config: CapacitorConfig = {
appId: 'com.example.myapp',
appName: 'my-app',
webDir: 'build',
ios: {
contentInset: 'never',
},
};Mixing Capacitor’s automatic content inset with CSS env(safe-area-inset-*) __CAPGO_KEEP_0__의 자동 콘텐츠 inset과 CSS padding을 혼합하는 것은 일반적인 double spacing의 원인이다.
실제로 넘치는 요소를 찾으세요
일반적으로 원인은 100vw, w-screen, Tailwind 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,
}));Tailwind 대신 사용할 수 있습니다. w-screen 대신 w-full viewport meta 태그 자체에서 오는 것이 아닙니다. 100vw / w-screen결론
__CAPGO_KEEP_0__은 기존 웹 프로젝트에 기반한 네이티브 앱을 빌드하기 위한 무결한 수단을 제공하며, __CAPGO_KEEP_1__을 공유하고 일관된 UI를 제공하는 간단한 방법을 제공합니다.
Capacitor offers a seamless means of building native apps based on an existing web project, providing a simple way to share code and have consistent UI.
Capacitor에 대해 더 알아보려면
__CAPGO_KEEP_0__ 당신이 __CAPGO_KEEP_0__을 사용하고 있다면 __CAPGO_KEEP_0__
Capacitor
__CAPGO_KEEP_0__ React.js와 Capacitor으로 모바일 앱을 만들기 자연스러운 미디어 및 인터페이스 동작을 계획하고 연결하려면 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/capacitor-video-player를 사용하여 구현 세부 정보를 capgo/capacitor-native-navigation을 사용하여 capgo/capacitor-native-navigation을 사용하여
