React와 MariaDB를 사용하여 CRUD

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

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

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

1. 프로젝트 설정:

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

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

    const express = require('express');
    const mariadb = require('mariadb');
    const cors = require('cors');
    const app = express();
    const port = 3001;
   
    app.use(express.json());
    app.use(cors());
   
    // MariaDB connection pool
    const pool = mariadb.createPool({
        host: 'localhost',
        user: 'your-username',
        password: 'your-password',
        database: 'your-database',
        connectionLimit: 5
    });
   
    // Create table (ensure this runs only once, or modify as needed)
    const createTable = async () => {
        const conn = await pool.getConnection();
        await conn.query(`
            CREATE TABLE IF NOT EXISTS items (
                id INT AUTO_INCREMENT PRIMARY KEY,
                name VARCHAR(255) NOT NULL
            )
        `);
        conn.end();
    };
    createTable();
   
    // Create
    app.post('/items', async (req, res) => {
        const { name } = req.body;
        const conn = await pool.getConnection();
        try {
            const result = await conn.query('INSERT INTO items (name) VALUES (?)', [name]);
            res.json({ id: result.insertId, name });
        } catch (err) {
            res.status(500).json({ error: err.message });
        } finally {
            conn.end();
        }
    });
   
    // Read
    app.get('/items', async (req, res) => {
        const conn = await pool.getConnection();
        try {
            const rows = await conn.query('SELECT * FROM items');
            res.json(rows);
        } catch (err) {
            res.status(500).json({ error: err.message });
        } finally {
            conn.end();
        }
    });
   
    // Update
    app.put('/items/:id', async (req, res) => {
        const { id } = req.params;
        const { name } = req.body;
        const conn = await pool.getConnection();
        try {
            await conn.query('UPDATE items SET name = ? WHERE id = ?', [name, id]);
            res.json({ id, name });
        } catch (err) {
            res.status(500).json({ error: err.message });
        } finally {
            conn.end();
        }
    });
   
    // Delete
    app.delete('/items/:id', async (req, res) => {
        const { id } = req.params;
        const conn = await pool.getConnection();
        try {
            await conn.query('DELETE FROM items WHERE id = ?', [id]);
            res.json({ id });
        } catch (err) {
            res.status(500).json({ error: err.message });
        } finally {
            conn.end();
        }
    });
   
    app.listen(port, () => {
        console.log(`Server running on http://localhost:${port}`);
    });

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

1. 프로젝트 설정:

    npx create-react-app frontend
    cd frontend
    npm install axios

2. React 컴포넌트 작성 (src/App.js):

    import React, { useState, useEffect } from 'react';
    import axios from 'axios';
   
    const App = () => {
        const [items, setItems] = useState([]);
        const [newItem, setNewItem] = useState('');
        const [editItem, setEditItem] = useState({ id: null, name: '' });
   
        useEffect(() => {
            fetchItems();
        }, []);
   
        const fetchItems = async () => {
            const response = await axios.get('http://localhost:3001/items');
            setItems(response.data);
        };
   
        const addItem = async () => {
            const response = await axios.post('http://localhost:3001/items', { name: newItem });
            setItems([...items, response.data]);
            setNewItem('');
        };
   
        const startEdit = (item) => {
            setEditItem({ ...item });
        };
   
        const updateItem = async () => {
            await axios.put(`http://localhost:3001/items/${editItem.id}`, { name: editItem.name });
            setItems(items.map(item => item.id === editItem.id ? editItem : item));
            setEditItem({ id: null, name: '' });
        };
   
        const deleteItem = async (id) => {
            await axios.delete(`http://localhost:3001/items/${id}`);
            setItems(items.filter(item => item.id !== id));
        };
   
        return (
            <div>
                <h1>Items</h1>
                <input
                    type="text"
                    value={newItem}
                    onChange={(e) => setNewItem(e.target.value)}
                    placeholder="New item"
                />
                <button onClick={addItem}>Add Item</button>
   
                {editItem.id && (
                    <div>
                        <input
                            type="text"
                            value={editItem.name}
                            onChange={(e) => setEditItem({ ...editItem, name: e.target.value })}
                            placeholder="Edit item"
                        />
                        <button onClick={updateItem}>Update Item</button>
                    </div>
                )}
   
                <ul>
                    {items.map(item => (
                        <li key={item.id}>
                            {item.name}
                            <button onClick={() => startEdit(item)}>Edit</button>
                            <button onClick={() => deleteItem(item.id)}>Delete</button>
                        </li>
                    ))}
                </ul>
            </div>
        );
    };
   
    export default App;

3단계: 실행 및 테스트

1. MariaDB 설정:

   MariaDB 서버를 실행하고 데이터베이스를 설정합니다. your-database와 사용자 인증 정보를 적절하게 변경해 주세요.

2. 백엔드 서버 실행:

    cd backend
    node server.js

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

    cd frontend
    npm start

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

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