Vue.js를 사용하여 SQLite와 CRUD

아래는 Vue.js + SQLite로 CRUD(Create / Read / Update / Delete)를 구현하는 가장 보편적이고 실무적인 구조입니다.
(SQLite는 브라우저에서 직접 접근할 수 없으므로 Node.js API 서버를 반드시 거칩니다)

---

1️⃣ 전체 구조

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

---

2️⃣ SQLite DB 구성

2.1 DB 파일 생성 (database.db)

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 (Vue 3)

4.1 프로젝트 생성

npm create vue@latest
cd vue-project
npm install axios
npm run dev

---

4.2 API 유틸 (src/api.js)

import axios from 'axios';

export default axios.create({
  baseURL: 'http://localhost:3000'
});

---

4.3 CRUD 컴포넌트 (src/components/UserCrud.vue)

<template>
  <div>
    <h2>User CRUD</h2>

    <input v-model="name" placeholder="Name" />
    <input v-model="email" placeholder="Email" />
    <button @click="createUser">Add</button>

    <ul>
      <li v-for="u in users" :key="u.id">
        {{ u.name }} ({{ u.email }})
        <button @click="deleteUser(u.id)">Delete</button>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import api from '../api'

const users = ref([])
const name = ref('')
const email = ref('')

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

const createUser = async () => {
  await api.post('/users', { name: name.value, email: email.value })
  name.value = ''
  email.value = ''
  loadUsers()
}

const deleteUser = async (id) => {
  await api.delete(`/users/${id}`)
  loadUsers()
}

onMounted(loadUsers)
</script>

---

4.4 App.vue

<template>
  <UserCrud />
</template>

<script setup>
import UserCrud from './components/UserCrud.vue'
</script>

---

5️⃣ 실행 순서

1. Backend

node server.js

2. Frontend

npm run dev

---

6️⃣ 실무 확장 포인트

• SQLite WAL 모드
• 트랜잭션 처리
• 입력 검증 (Zod / Joi)
• Composition API 분리
• TypeScript 전환
• Electron / Tauri 연계 (로컬 DB 앱)

---

원하시면 다음도 바로 이어서 설명 가능합니다:

• Vue + SQLite (Electron 데스크톱 앱)
• IndexedDB vs SQLite 비교
• Vue + REST vs GraphQL
• SQLite → MariaDB 마이그레이션

필요한 방향을 말씀해 주세요.