Vue.js를 사용하여 SQLite와 CRUD

Vue.js를 사용하여 SQLite와 CRUD(생성, 읽기, 업데이트, 삭제) 기능을 구현하는 방법을 설명하겠습니다. Vue.js는 클라이언트 사이드에서 UI를 구축하고, SQLite는 서버 사이드에서 데이터베이스를 관리하는 데 사용됩니다. 이 작업을 수행하기 위해서는 다음과 같은 구성 요소가 필요합니다:

1. 백엔드 서버: SQLite와 상호작용할 API를 제공하는 서버. Node.js와 Express를 사용하여 이 서버를 구축할 수 있습니다.
2. 프론트엔드 애플리케이션: Vue.js를 사용하여 사용자 인터페이스를 구축합니다. 이 프론트엔드 애플리케이션이 백엔드 서버와 통신하여 CRUD 작업을 수행합니다.

1단계: 백엔드 서버 구축 (Node.js + Express + SQLite)

1. 프로젝트 설정:

    mkdir backend
    cd backend
    npm init -y
    npm install express sqlite3 cors

2. 서버 코드 작성 (server.js):

    const express = require('express');
    const sqlite3 = require('sqlite3').verbose();
    const cors = require('cors');
    const app = express();
    const port = 3001;
   
    app.use(express.json());
    app.use(cors());
   
    const db = new sqlite3.Database(':memory:');
   
    db.serialize(() => {
        db.run("CREATE TABLE items (id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT)");
    });
   
    // Create
    app.post('/items', (req, res) => {
        const { name } = req.body;
        db.run("INSERT INTO items (name) VALUES (?)", [name], function(err) {
            if (err) {
                return res.status(500).json({ error: err.message });
            }
            res.json({ id: this.lastID, name });
        });
    });
   
    // Read
    app.get('/items', (req, res) => {
        db.all("SELECT * FROM items", [], (err, rows) => {
            if (err) {
                return res.status(500).json({ error: err.message });
            }
            res.json(rows);
        });
    });
   
    // Update
    app.put('/items/:id', (req, res) => {
        const { id } = req.params;
        const { name } = req.body;
        db.run("UPDATE items SET name = ? WHERE id = ?", [name, id], function(err) {
            if (err) {
                return res.status(500).json({ error: err.message });
            }
            res.json({ id, name });
        });
    });
   
    // Delete
    app.delete('/items/:id', (req, res) => {
        const { id } = req.params;
        db.run("DELETE FROM items WHERE id = ?", id, function(err) {
            if (err) {
                return res.status(500).json({ error: err.message });
            }
            res.json({ id });
        });
    });
   
    app.listen(port, () => {
        console.log(`Server running on http://localhost:${port}`);
    });

2단계: 프론트엔드 애플리케이션 구축 (Vue.js)

1. 프로젝트 설정:

    npx @vue/cli create frontend
    cd frontend
    npm install axios

2. Vue 컴포넌트 작성 (src/components/ItemManager.vue):

    <template>
      <div>
        <h1>Items</h1>
        <input v-model="newItem" placeholder="New item" />
        <button @click="addItem">Add Item</button>
   
        <div v-if="editItem.id !== null">
          <input v-model="editItem.name" placeholder="Edit item" />
          <button @click="updateItem">Update Item</button>
        </div>
   
        <ul>
          <li v-for="item in items" :key="item.id">
            {{ item.name }}
            <button @click="startEdit(item)">Edit</button>
            <button @click="deleteItem(item.id)">Delete</button>
          </li>
        </ul>
      </div>
    </template>
   
    <script>
    import axios from 'axios';
   
    export default {
      data() {
        return {
          items: [],
          newItem: '',
          editItem: { id: null, name: '' }
        };
      },
      mounted() {
        this.fetchItems();
      },
      methods: {
        async fetchItems() {
          const response = await axios.get('http://localhost:3001/items');
          this.items = response.data;
        },
        async addItem() {
          const response = await axios.post('http://localhost:3001/items', { name: this.newItem });
          this.items.push(response.data);
          this.newItem = '';
        },
        startEdit(item) {
          this.editItem = { ...item };
        },
        async updateItem() {
          await axios.put(`http://localhost:3001/items/${this.editItem.id}`, { name: this.editItem.name });
          this.items = this.items.map(item => (item.id === this.editItem.id ? this.editItem : item));
          this.editItem = { id: null, name: '' };
        },
        async deleteItem(id) {
          await axios.delete(`http://localhost:3001/items/${id}`);
          this.items = this.items.filter(item => item.id !== id);
        }
      }
    };
    </script>
   
    <style>
    /* Add your styles here */
    </style>

3. 앱 컴포넌트에 추가 (src/App.vue):

    <template>
      <div id="app">
        <ItemManager />
      </div>
    </template>
   
    <script>
    import ItemManager from './components/ItemManager.vue';
   
    export default {
      components: {
        ItemManager
      }
    };
    </script>
   
    <style>
    /* Add your styles here */
    </style>

3단계: 실행 및 테스트

1. 백엔드 서버 실행:

    cd backend
    node server.js

2. 프론트엔드 애플리케이션 실행:

    cd frontend
    npm run serve

이제 http://localhost:8080에서 Vue 애플리케이션을 열면 SQLite 데이터베이스와 상호작용할 수 있습니다. CRUD 작업을 테스트해 보세요.

이 예제는 개발 환경에서 사용하는 기본적인 형태로, 실제 프로덕션 환경에서는 보안, 오류 처리, 데이터 유효성 검증, 그리고 데이터베이스 연결 관리를 추가적으로 고려해야 합니다.