Svelte를 사용하여 SQLite와 CRUD

아래는 Svelte + SQLite로 **CRUD(Create / Read / Update / Delete)**를 구현하는 가장 단순하면서도 실무에 바로 쓰는 구조입니다.
※ 브라우저는 SQLite에 직접 접근 불가 → Node.js API 서버 필수

---

1️⃣ 전체 구조

[ Svelte (Frontend) ]
        |
        | REST API (JSON)
        v
[ Node.js + Express ]
        |
        | sqlite3
        v
[ SQLite (.db) ]

---

2️⃣ SQLite 테이블

CREATE TABLE users (
  id INTEGER PRIMARY KEY AUTOINCREMENT,
  name TEXT NOT NULL,
  email TEXT NOT NULL
);

---

3️⃣ Backend (Node.js + Express + SQLite)

3.1 패키지 설치

npm init -y
npm install express cors sqlite3

---

3.2 DB 연결 (db.js)

const sqlite3 = require('sqlite3').verbose();

const db = new sqlite3.Database('./database.db', (err) => {
  if (err) console.error(err.message);
  else console.log('SQLite connected');
});

module.exports = db;

---

3.3 API 서버 (server.js)

const express = require('express');
const cors = require('cors');
const db = require('./db');

const app = express();
app.use(cors());
app.use(express.json());

/* CREATE */
app.post('/users', (req, res) => {
  const { name, email } = req.body;
  db.run(
    'INSERT INTO users (name, email) VALUES (?, ?)',
    [name, email],
    function () {
      res.json({ id: this.lastID });
    }
  );
});

/* READ */
app.get('/users', (req, res) => {
  db.all('SELECT * FROM users', [], (err, rows) => {
    res.json(rows);
  });
});

/* UPDATE */
app.put('/users/:id', (req, res) => {
  const { name, email } = req.body;
  db.run(
    'UPDATE users SET name=?, email=? WHERE id=?',
    [name, email, req.params.id],
    () => res.sendStatus(200)
  );
});

/* DELETE */
app.delete('/users/:id', (req, res) => {
  db.run(
    'DELETE FROM users WHERE id=?',
    [req.params.id],
    () => res.sendStatus(200)
  );
});

app.listen(3000, () => {
  console.log('API server running on port 3000');
});

---

4️⃣ Frontend (Svelte)

4.1 프로젝트 생성

npm create svelte@latest svelte-crud
cd svelte-crud
npm install axios
npm run dev

---

4.2 CRUD 컴포넌트 (src/routes/+page.svelte)

<script>
  import { onMount } from 'svelte';
  import axios from 'axios';

  let users = [];
  let name = '';
  let email = '';

  const api = axios.create({
    baseURL: 'http://localhost:3000'
  });

  async function loadUsers() {
    const res = await api.get('/users');
    users = res.data;
  }

  async function createUser() {
    await api.post('/users', { name, email });
    name = '';
    email = '';
    loadUsers();
  }

  async function deleteUser(id) {
    await api.delete(`/users/${id}`);
    loadUsers();
  }

  onMount(loadUsers);
</script>

<h2>User CRUD</h2>

<input placeholder="Name" bind:value={name} />
<input placeholder="Email" bind:value={email} />
<button on:click={createUser}>Add</button>

<ul>
  {#each users as u}
    <li>
      {u.name} ({u.email})
      <button on:click={() => deleteUser(u.id)}>Delete</button>
    </li>
  {/each}
</ul>

---

5️⃣ 실행 순서

1. Backend

node server.js

1. Frontend

npm run dev

---

6️⃣ 실무 확장 포인트

• SQLite WAL 모드 (PRAGMA journal_mode=WAL)
• 트랜잭션 처리
• 입력 검증 (Zod)
• Svelte Store로 상태 분리
• TypeScript 전환
• Electron / Tauri 기반 데스크톱 앱

---

🔍 참고

• SvelteKit은 서버 API(/src/routes/api)에 SQLite를 직접 붙일 수도 있음
• 로컬 앱이면 SQLite 단독 사용 가능
• 웹 배포면 SQLite → MariaDB/PostgreSQL 권장

원하시면:

• SvelteKit + SQLite (API 통합 구조)
• Electron + Svelte + SQLite
• Vue / React / Svelte CRUD 구조 비교
• SQLite → MariaDB 이전 전략

중 원하는 방향을 말씀해 주세요.