728x90
해당 페이지는 Ionic React 기준 에서 jeep-sqlite를 사용하는 것을 예시로 들어 작성
1)
main.tsx
* 설치 라이브러리
npm install @capacitor/core@latest @capacitor/cli@latest @capacitor/android@latest @capacitor/ios@latest
npm install @capacitor-community/sqlite@latest
* 해당 버전은 다음 버전으로 작성 및 테스트 되었음.
+-- @capacitor-community/sqlite@5.7.3-3
| `-- jeep-sqlite@2.7.1 deduped
`-- jeep-sqlite@2.7.1
main.tsx 예시 )
import React from 'react';
import { createRoot } from 'react-dom/client';
import App from './App';
import { Capacitor } from "@capacitor/core";
import {
CapacitorSQLite,
SQLiteConnection,
} from "@capacitor-community/sqlite";
import {
CapacitorSQLite,
SQLiteConnection,
} from "@capacitor-community/sqlite";
import { JeepSqlite } from "jeep-sqlite/dist/components/jeep-sqlite";
window.addEventListener("DOMContentLoaded", async () => {
try {
const platform = Capacitor.getPlatform();
if (platform === "web") {
const sqlite = new SQLiteConnection(CapacitorSQLite);
// Create the 'jeep-sqlite' Stencil component
customElements.define("jeep-sqlite", JeepSqlite);
const jeepSqliteEl = document.createElement("jeep-sqlite");
document.body.appendChild(jeepSqliteEl);
await customElements.whenDefined("jeep-sqlite");
console.log(`after customElements.whenDefined`);
await sqlite.initWebStore();
console.log(`after initWebStore`);
}
const container = document.getElementById("root");
const root = createRoot(container!);
root.render(
<React.StrictMode>
<App />
</React.StrictMode>
);
} catch (e) {
console.log(e);
}
});
728x90
'아이오닉(Ionic) > Ionic React' 카테고리의 다른 글
| Ionic React _ jeep-sqlite 사용 (2) _ Failed to execute 'compile' on 'WebAssembly..... (0) | 2024.05.29 |
|---|---|
| sql.js 사용하는경우 (sql-wasm.wasm 파일) (0) | 2024.05.29 |
| React XML - fetch 이용하여 불러오기 (0) | 2024.05.18 |
| 기본 변수 (0) | 2024.05.17 |
| React Native 프로젝트에서 Sqlite Database 사용 2 (Sample) (0) | 2023.12.17 |