Cordova 프로젝트에 React와 Tailwind CSS를 추가하려면 다음 단계를 따르면 됩니다.
1. React 추가하기
Cordova는 기본적으로 HTML, CSS, JavaScript를 사용하므로, React를 추가하려면 react와 react-dom을 설치해야 합니다.
1.1 React 및 Vite 추가
Vite를 사용하면 React 개발이 빠르고 편리합니다.
cd your-cordova-project
npm init vite@latest www -- --template react
설치가 완료되면 기존 www 폴더의 내용을 삭제하고, 새로운 www 폴더 안에 Vite 프로젝트가 생성됩니다.
1.2 의존성 설치
cd www
npm install
1.3 Cordova 플러그인 설치
Cordova 내부에서 React 앱을 원활하게 실행하려면 cordova-plugin-whitelist가 필요합니다.
cordova plugin add cordova-plugin-whitelist
그리고 config.xml 파일에 아래 내용을 추가하세요.
<allow-navigation href="*" />
<access origin="*" />
2. Tailwind CSS 추가하기
React 프로젝트(www 폴더)에서 Tailwind CSS를 설정합니다.
2.1 Tailwind CSS 설치
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
2.2 Tailwind CSS 설정 변경 (tailwind.config.js)
content 옵션을 수정하여 React 파일을 감지할 수 있도록 설정합니다.
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
2.3 Tailwind CSS 적용 (src/index.css)
기본 CSS 파일에 Tailwind를 추가합니다.
@tailwind base;
@tailwind components;
@tailwind utilities;
3. Cordova와 React 연결하기
3.1 index.html 수정
www/index.html을 수정하여 React 앱이 정상적으로 로드되도록 합니다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cordova + React + Tailwind</title>
</head>
<body>
<div id="root"></div>
<script src="cordova.js"></script>
<script type="module" src="/src/main.jsx"></script>
</body>
</html>
3.2 src/main.jsx 수정
React 앱이 정상적으로 실행되도록 src/main.jsx를 수정합니다.
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
const App = () => {
return (
<div className="flex items-center justify-center min-h-screen bg-gray-100">
<h1 className="text-3xl font-bold text-blue-600">Hello, Cordova + React + Tailwind!</h1>
</div>
);
};
document.addEventListener("deviceready", () => {
ReactDOM.createRoot(document.getElementById("root")).render(<App />);
}, false);
4. 빌드 및 실행
4.1 React 빌드
Cordova는 정적인 HTML/CSS/JS 파일을 사용하므로, React 앱을 빌드하여 www 폴더에 넣어야 합니다.
cd www
npm run build
이렇게 하면 www/dist 폴더에 빌드된 파일이 생성됩니다.
4.2 Cordova 빌드 및 실행
이제 Cordova 앱을 실행할 수 있습니다.
cordova build android
cordova emulate android
혹은 실제 기기에 설치하려면:
cordova run android --device
✅ 정리
이제 Cordova 프로젝트에서 React와 Tailwind CSS를 사용할 수 있습니다! React 앱을 개발한 후, npm run build를 실행하고 Cordova 앱을 빌드하면 됩니다.
카테고리 없음
댓글