Node.js와 Express를 백엔드로, React를 프론트엔드로 사용하고, 데이터베이스로 MySQL을 사용하겠습니다.

 MySQL을 사용하여 Todo 리스트의 CRUD 기능을 구현하는 방법을 설명해드리겠습니다. 이번에는 Node.js와 Express를 백엔드로, React를 프론트엔드로 사용하고, 데이터베이스로 MySQL을 사용하겠습니다.

728x90

백엔드 (Node.js + Express + MySQL)

1. 프로젝트 설정:

mkdir todo-app
cd todo-app
npm init -y
npm install express mysql2 cors

2. MySQL 데이터베이스 설정:
   MySQL에 접속하여 다음 명령어를 실행합니다:

CREATE DATABASE todoapp;
USE todoapp;
CREATE TABLE todos (
  id INT AUTO_INCREMENT PRIMARY KEY,
  text VARCHAR(255) NOT NULL,
  completed BOOLEAN DEFAULT false
);

3. server.js 파일 생성:

const express = require('express');
const mysql = require('mysql2/promise');
const cors = require('cors');

const app = express();
const PORT = process.env.PORT || 5000;

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

const pool = mysql.createPool({
  host: 'localhost',
  user: 'your_mysql_username',
  password: 'your_mysql_password',
  database: 'todoapp',
  waitForConnections: true,
  connectionLimit: 10,
  queueLimit: 0
});

// Create
app.post('/todos', async (req, res) => {
  try {
    const { text } = req.body;
    const [result] = await pool.query('INSERT INTO todos (text) VALUES (?)', [text]);
    res.json({ id: result.insertId, text, completed: false });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Read
app.get('/todos', async (req, res) => {
  try {
    const [rows] = await pool.query('SELECT * FROM todos');
    res.json(rows);
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Update
app.put('/todos/:id', async (req, res) => {
  try {
    const { id } = req.params;
    const { completed } = req.body;
    await pool.query('UPDATE todos SET completed = ? WHERE id = ?', [completed, id]);
    res.json({ message: 'Todo updated' });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

// Delete
app.delete('/todos/:id', async (req, res) => {
  try {
    const { id } = req.params;
    await pool.query('DELETE FROM todos WHERE id = ?', [id]);
    res.json({ message: 'Todo deleted' });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}`);
});

프론트엔드 (React)

프론트엔드 부분은 이전 예제와 거의 동일하지만, 약간의 수정이 필요합니다.

1. React 프로젝트 생성 (이미 생성되어 있다면 이 단계는 건너뛰세요):

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

2. src/App.js 파일 수정:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

function App() {
  const [todos, setTodos] = useState([]);
  const [text, setText] = useState('');

  useEffect(() => {
    fetchTodos();
  }, []);

  const fetchTodos = async () => {
    const res = await axios.get('http://localhost:5000/todos');
    setTodos(res.data);
  };

  const addTodo = async () => {
    const res = await axios.post('http://localhost:5000/todos', { text });
    setTodos([...todos, res.data]);
    setText('');
  };

  const toggleTodo = async (id, completed) => {
    await axios.put(`http://localhost:5000/todos/${id}`, { completed: !completed });
    fetchTodos();
  };

  const deleteTodo = async (id) => {
    await axios.delete(`http://localhost:5000/todos/${id}`);
    fetchTodos();
  };

  return (
    <div>
      <h1>Todo List</h1>
      <input
        value={text}
        onChange={(e) => setText(e.target.value)}
        placeholder="Enter a new todo"
      />
      <button onClick={addTodo}>Add Todo</button>
      <ul>
        {todos.map((todo) => (
          <li key={todo.id}>
            <span
              style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
              onClick={() => toggleTodo(todo.id, todo.completed)}
            >
              {todo.text}
            </span>
            <button onClick={() => deleteTodo(todo.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

728x90

실행 방법

1. MySQL 서버가 실행 중인지 확인합니다.
2. 백엔드 실행:
   프로젝트 루트 디렉토리에서 node server.js 명령어를 실행합니다.
3. 프론트엔드 실행:
   client 디렉토리에서 npm start 명령어를 실행합니다.

이제 브라우저에서 http://localhost:3000으로 접속하면 MySQL을 사용하는 Todo 리스트 애플리케이션을 사용할 수 있습니다.

주의사항:

• server.js의 MySQL 연결 정보(사용자 이름, 비밀번호 등)를 실제 환경에 맞게 수정해야 합니다.
• 실제 프로덕션 환경에서는 보안, 에러 처리, 입력 유효성 검사 등을 더 강화해야 합니다.
• 환경 변수를 사용하여 데이터베이스 연결 정보를 관리하는 것이 좋습니다.

이 예제를 통해 Node.js, Express, React, 그리고 MySQL을 사용하여 기본적인 Todo 리스트 CRUD 애플리케이션을 구현할 수 있습니다.