This tutorial will walk you through crafting a mobile application using React, Capacitor, and Konsta UI. By the end, you’ll know how to morph a React.js web app into a native mobile application with Capacitor, and implement a native UI using Konsta UI.
Capacitor은 React.js 웹 앱을 네이티브 모바일 애플리케이션으로 변환하는 것을 쉽게 해줍니다. React Native와 같은 새로운 전략을 배울 필요 없이, 기존의 React.js 앱을 네이티브 모바일 앱으로 변환할 수 있습니다.
이 과정은 몇 가지 단순한 단계로 구성되어 있습니다. 따라서 React.js 앱을 네이티브 모바일 앱으로 변환하는 과정을 따라가보세요.
Capacitor 개요
CapacitorJS는 게임을 바꾸는 것입니다. 웹 프로젝트와 완벽하게 통합할 수 있으며 앱을 네이티브 웹뷰로 wrapping하고 네이티브 Xcode 및 Android Studio 프로젝트를 생성하는 동안 네이티브 카메라와 같은 장치 기능에 접근할 수 있습니다.
Capacitor는 어려운 학습 곡선이나 번거로움 없이 네이티브 모바일 애플리케이션을 만들 수 있는 간단한 방법을 제공합니다. API와 streamlined 기능이 프로젝트에 쉽게 통합되도록 합니다.
React.js 앱 설정
React 애플리케이션을 시작하는 가장 단순한 방법을 선택해 보겠습니다. npm 패키지 관리자를 사용하여 새로운 React 앱을 생성합니다.
npx create-react-app my-app프로젝트를 네이티브 모바일 앱으로 변환하려면 export 가 필요합니다.
이것에 대해 다시 돌아올 것입니다. 먼저 Capacitor를 React 앱에 통합하는 방법을 이해해 보겠습니다.
Capacitor를 React.js 앱에 통합하는 방법
초기 설정 단계가 조금 복잡할 수 있지만, 그 이후로 네이티브 앱 wrapper를 업데이트하는 것은 단순히 명령을 실행하는 것만큼 간단합니다. sync 먼저 __CAPGO_KEEP_0__ __CAPGO_KEEP_1__를 개발 의존성으로 설치하고 프로젝트 내에서 설정합니다. 설정 중 이름과 번들 ID에 대한 기본값을 수락하기 위해 “enter”를 누릅니다.
Capacitor는 CLI를 개발 의존성으로 설치하고 프로젝트 내에서 설정합니다. 설정 중 이름과 번들 ID에 대한 기본값을 수락하기 위해 “enter”를 누릅니다.
다음으로, 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 androidReact.js 프로젝트에 ios 및 android 디렉토리가 이제 존재합니다. Android 프로젝트에 접근하기 위해서는 "Android Studio"를 설치해야 합니다. iOS를 위해서는 Mac이 필요하며 "Xcode"를 설치해야 합니다. 마지막으로, __CAPGO_KEEP_0__은 프로젝트 루트에 각 플랫폼을 위한 폴더를 생성할 것입니다. 다음으로, iOS 및 Android 플랫폼에 관련된 패키지를 설치할 것입니다.
React.js 프로젝트에 ios 및 android 디렉토리가 이제 존재합니다. Android 프로젝트에 접근하기 위해서는 "Android Studio"를 설치해야 합니다.iOS를 위해서는 Mac이 필요하며 "Xcode"를 설치해야 합니다. 마지막으로, __CAPGO_KEEP_0__은 프로젝트 루트에 각 플랫폼을 위한 폴더를 생성할 것입니다..
다음으로, iOS 및 Android 플랫폼에 관련된 패키지를 설치할 것입니다. 웹 디렉토리 당신의 capacitor.config.json 아래와 같이 파일에 추가하세요:
{
"appId": "com.example.app",
"appName": "my-app",
"webDir": "build",
"bundledWebRuntime": false
}Run the build command and sync your project with Capacitor:
npm run build
npx cap syncThe npm run build 명령어는 React.js 프로젝트를 빌드합니다. npx cap sync 명령어는 웹 code를 네이티브 플랫폼의 정확한 위치에 맞춰서 앱에서 실행할 수 있도록 합니다.
지금, 약간의 운과 오류가 없다면, React.js 앱이 기기에 출시 준비가 된 것입니다!
네이티브 앱 빌드 및 배포
iOS 앱 개발을 위해서는 XcodeiOS 및 Android 앱을 개발하는 경우 Android StudioiOS 앱을 앱 스토어에 배포하려면 Apple Developer Program에 가입해야 하며, Android 앱을 Google Play Console에 배포하려면 Google Play Console에 가입해야 합니다.
Capacitor CLI은 iOS와 Android의 네이티브 프로젝트를 모두 열기 위한 프로세스를 단순화합니다.
npx cap open ios
npx cap open android네이티브 프로젝트를 설정한 후 앱을 연결된 장치에 배포하는 것은 단순한 과정입니다.
Android Studio의 경우, 모든 것을 로드하기만 기다리면 연결된 장치에 앱을 배포할 수 있습니다.
Xcode의 경우, 실제 장치에 앱을 배포하기 위해만 서명 계정을 설정하면, 시뮬레이터에서만 앱을 배포하는 대신, 연결된 장치에서 앱을 실행할 수 있습니다. 그 후에 단순히 플레이 버튼을 클릭하여 앱을 연결된 장치에서 실행할 수 있습니다. 연결된 장치를 선택할 수 있습니다.
모든 것이 잘 진행된 경우, React.js 웹 앱을 네이티브 모바일 애플리케이션으로 변환할 수 있습니다.
Capacitor Live Reload
최신 개발 프레임워크는 대부분 핫 리로드 기능을 제공합니다. Capacitor도 핫 리로드 기능을 제공하지만, 핫 리로드 기능은 모바일 장치에서만 작동합니다. 로컬 호스트 애플리케이션에 접근할 수 있도록 네트워크에서 __CAPGO_KEEP_0__ 앱이 특정 URL에서 콘텐츠를 로드하도록 구성할 수 있습니다.!
Capacitor Live Reload
첫 번째로, 로컬 IP 주소를 결정하세요. 맥에서 이 작업을 수행하려면 터미널에서 ipconfig getifaddr en0 을 실행하세요. 윈도우에서 ipconfig 을 실행하고 IPv4 주소를 찾으세요.
Capacitor을 서버에서 앱을 직접 로드하도록 지시하려면, 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;앱을 다시 한 번 Android Studio 또는 Xcode를 통해 배포하면, React 앱의 변경 사항이 자동으로 로드되고 앱에 표시됩니다! npx cap copy 새로운 플러그인을 설치한 경우, 카메라와 같은 경우, 네이티브 프로젝트를 다시 빌드해야 합니다. 이는 네이티브 파일이 변경되었기 때문입니다. 이러한 파일은 실시간으로 업데이트할 수 없습니다.
__CAPGO_KEEP_0__ 플러그인 사용
__CAPGO_KEEP_0__ 플러그인을 사용하는 방법에 대해 간단히 살펴보겠습니다. 간단한 플러그인인
Using Capacitor Plugins
Let’s take a quick look at how to use a Capacitor plugin. Let’s install a simple one, the 을 실행하세요. 윈도우에서, which prompts the native share dialog:
npm i @capacitor/shareCapgo를 사용하려면 패키지를 임포트하고 Capgo 앱에서 해당 함수를 호출하세요. Capgo의 기능을 사용하기 위해 고려해야 할 사항은 share() App.js 새로운 플러그인을 설치한 후 React 프로젝트를 다시 동기화하세요.:
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;Konsta UI를 Implement하는 방법: 더 좋은 모바일 UI npx cap sync.
모바일 UI 경험을 더 좋게 하기 위해 Konsta UI를 사용할 것입니다. iOS와 Android에 특화된 스타일링을 제공하고 사용하기 쉽습니다.
Konsta UI를 사용하려면 React 패키지를 설치하세요:
Konsta UI를 사용하기 위해
npm i konsta파일을 다음과 같이 수정하세요: tailwind.config.js Konsta UI를 사용하기 위해 Tailwind CSS 설정을 보완하는 추가 변형 및 유틸리티가 필요합니다.
// 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 기본 App 컴포넌트를 설정하여 글로벌 파라미터를 설정하세요.
protectedTokens theme. Wrap the main app with App in the 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')
);React.js 페이지에서 Konsta UI React 컴포넌트를 사용해 보세요. Open 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>
);
}모든 것이 올바르게 수행되었다면, React와 Konsta UI 간의 수월한 통합을 제공하여 모바일 앱에 원생스러운 외관을 줄 수 있습니다.
결론
Capacitor은 기존 웹 프로젝트 기반으로 native 앱을 빌드하는 데 있어 수월한 수단을 제공하며, code를 공유하고 일관된 UI를 제공하는 간단한 방법을 제공합니다.
Capacitor 기술과 같은 기술 덕분에, React.js 웹 앱으로부터 모바일 애플리케이션을 빌드하는 것이 절대적으로 쉬워졌습니다. 웹 개발 기술을 다음 단계로 끌어올리기 위해, 훌륭한 원생스러운 모바일 앱을 제작하세요. Happy coding!
앱 개발 프로세스를 가속화하는 방법에 대해 더 알아보려면 자유 계정으로 오늘
Building Mobile Apps with Pure React.js와 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의 네이티브 기능을 사용하기 위해.
