Node.js Express, React로 Todo List CRUD 구현하기: 상세 가이드

Node.js와 Express를 백엔드로, React를 프론트엔드로 사용하여 Todo 리스트의 CRUD(Create, Read, Update, Delete) 기능을 구현하는 방법을 설명해드리겠습니다.

728x90

백엔드 (Node.js + Express)

1. 프로젝트 설정:

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

2. server.js 파일 생성:

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');

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

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

mongoose.connect('mongodb://localhost/todoapp', { useNewUrlParser: true, useUnifiedTopology: true });

const Todo = mongoose.model('Todo', {
  text: String,
  completed: Boolean
});

// Create
app.post('/todos', async (req, res) => {
  const todo = new Todo(req.body);
  await todo.save();
  res.json(todo);
});

// Read
app.get('/todos', async (req, res) => {
  const todos = await Todo.find();
  res.json(todos);
});

// Update
app.put('/todos/:id', async (req, res) => {
  const todo = await Todo.findByIdAndUpdate(req.params.id, req.body, { new: true });
  res.json(todo);
});

// Delete
app.delete('/todos/:id', async (req, res) => {
  await Todo.findByIdAndDelete(req.params.id);
  res.json({ message: 'Todo deleted' });
});

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

728x90

프론트엔드 (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 () => {
    await axios.post('http://localhost:5000/todos', { text, completed: false });
    setText('');
    fetchTodos();
  };

  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;

실행 방법

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

이제 브라우저에서 http://localhost:3000으로 접속하면 Todo 리스트 애플리케이션을 사용할 수 있습니다. 새로운 할 일을 추가하고, 완료 상태를 토글하고, 삭제할 수 있습니다.

이 예제는 기본적인 CRUD 기능을 구현한 것입니다. 실제 프로젝트에서는 에러 처리, 입력 유효성 검사, 스타일링 등을 추가로 구현해야 합니다.