Drizzle과 OP-SQLite 시작하기
This guide assumes familiarity with:
- OP-SQLite - react-native를 위한 SQLite 라이브러리 - 여기에서 읽기
Step 1 - Expo 템플릿으로 프로젝트 설정하기
npm
yarn
pnpm
bun
npx create expo-app --template blank-typescript이 템플릿에 대한 자세한 내용은 여기에서 확인할 수 있습니다.
기본 파일 구조
템플릿을 설치하고 db 폴더를 추가한 후 다음과 같은 내용을 찾을 수 있습니다: db/schema.ts 파일에는 drizzle 테이블 정의가 포함되어 있습니다. drizzle 폴더에는 SQL 마이그레이션 파일과 스냅샷이 포함되어 있습니다.
📦 <project root>
├ 📂 assets
├ 📂 drizzle
├ 📂 db
│ └ 📜 schema.ts
├ 📜 .gitignore
├ 📜 .npmrc
├ 📜 app.json
├ 📜 App.tsx
├ 📜 babel.config.ts
├ 📜 drizzle.config.ts
├ 📜 package.json
└ 📜 tsconfig.jsonStep 2 - 필요한 패키지 설치하기
npm
yarn
pnpm
bun
npm i drizzle-orm @op-engineering/op-sqlite
npm i -D drizzle-kitStep 3 - Drizzle ORM을 데이터베이스에 연결하기
루트 디렉토리에 App.tsx 파일을 생성하고 연결을 초기화합니다:
import { open } from '@op-engineering/op-sqlite';
import { drizzle } from 'drizzle-orm/op-sqlite';
const opsqliteDb = open({
name: 'db',
});
const db = drizzle(opsqliteDb);Step 4 - 테이블 생성하기
db 디렉토리에 schema.ts 파일을 생성하고 테이블을 선언합니다:
import { int, sqliteTable, text } from "drizzle-orm/sqlite-core";
export const usersTable = sqliteTable("users_table", {
id: int().primaryKey({ autoIncrement: true }),
name: text().notNull(),
age: int().notNull(),
email: text().notNull().unique(),
});Step 5 - Drizzle 설정 파일 설정하기
Drizzle config - Drizzle Kit에서 사용하는 설정 파일이며, 데이터베이스 연결, 마이그레이션 폴더 및 스키마 파일에 대한 모든 정보를 포함합니다.
프로젝트 루트에 drizzle.config.ts 파일을 생성하고 다음 내용을 추가합니다:
import { defineConfig } from 'drizzle-kit';
export default defineConfig({
dialect: 'sqlite',
driver: 'expo',
schema: './db/schema.ts',
out: './drizzle',
});Step 6 - metro 설정하기
루트 폴더에 metro.config.js 파일을 생성하고 다음 코드를 추가합니다:
const { getDefaultConfig } = require('expo/metro-config');
/** @type {import('expo/metro-config').MetroConfig} */
const config = getDefaultConfig(__dirname);
config.resolver.sourceExts.push('sql');
module.exports = config;Step 7 - babel 설정 업데이트하기
module.exports = function(api) {
api.cache(true);
return {
presets: ['babel-preset-expo'],
plugins: [["inline-import", { "extensions": [".sql"] }]] // <-- 이 부분 추가
};
};Step 8 - 데이터베이스에 변경사항 적용하기
Expo에서는 drizzle-kit generate 명령어를 사용하여 마이그레이션을 생성한 다음, 런타임에 drizzle-orm의 migrate() 함수를 사용하여 적용해야 합니다.
마이그레이션 생성:
npx drizzle-kit generateStep 9 - 마이그레이션 적용 및 데이터베이스 쿼리하기:
마이그레이션과 사용자를 생성, 읽기, 업데이트, 삭제하는 쿼리를 사용하여 App.tsx 파일을 업데이트하겠습니다.
import { Text, View } from 'react-native';
import { open } from '@op-engineering/op-sqlite';
import { useEffect, useState } from 'react';
import { drizzle } from 'drizzle-orm/op-sqlite';
import { usersTable } from './db/schema';
import { useMigrations } from 'drizzle-orm/op-sqlite/migrator';
import migrations from './drizzle/migrations';
const opsqliteDb = open({
name: 'db',
});
const db = drizzle(opsqliteDb);
export default function App() {
const { success, error } = useMigrations(db, migrations);
const [items, setItems] = useState<typeof usersTable.$inferSelect[] | null>(null);
useEffect(() => {
if (!success) return;
(async () => {
await db.delete(usersTable);
await db.insert(usersTable).values([
{
name: 'John',
age: 30,
email: 'john@example.com',
},
]);
const users = await db.select().from(usersTable);
setItems(users);
})();
}, [success]);
if (error) {
return (
<View>
<Text>Migration error: {error.message}</Text>
</View>
);
}
if (!success) {
return (
<View>
<Text>Migration is in progress...</Text>
</View>
);
}
if (items === null || items.length === 0) {
return (
<View>
<Text>Empty</Text>
</View>
);
}
return (
<View
style={{
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
width: '100%',
height: '100%',
justifyContent: 'center',
}}
>
{items.map((item) => (
<Text key={item.id}>{item.email}</Text>
))}
</View>
);
}Step 10 - Expo 앱 빌드 및 실행하기
npm
yarn
pnpm
bun
npx expo run:ios