React, Node.js, Express, MySQL CRUD 앱

이 튜토리얼에서는 프런트엔드에 React, 백엔드에 Express를 사용하고 MySQL 데이터베이스를 사용하여 기본적인 CRUD 앱을 만드는 방법을 배웁니다.

이 종합 튜토리얼에서는 프런트엔드에 React를, 백엔드에 Node.js와 Express를 사용하고 MySQL 데이터베이스를 기반으로 하는 풀스택 CRUD(생성, 읽기, 업데이트, 삭제) 애플리케이션을 만드는 방법을 배웁니다. 사용자 경험을 향상시키기 위해 React Router, Axios, TailwindCSS와 같은 기술을 활용할 것입니다.

Want to experiment with passkey flows? Try our Passkeys Debugger.

Try for Free

1. 프로젝트 개요#

사용자가 튜토리얼을 관리할 수 있는 풀스택 애플리케이션을 개발할 것입니다. 각 튜토리얼은 다음과 같은 속성을 가집니다:

ID: 고유 식별자
Title: 튜토리얼 이름
Description: 상세 정보
Published Status: 게시 상태

사용자는 다음 작업을 수행할 수 있습니다:

새 튜토리얼 생성
모든 튜토리얼 또는 ID로 특정 튜토리얼 조회
기존 튜토리얼 업데이트
튜토리얼 삭제
제목으로 튜토리얼 검색

Discuss passkeys news and questions in r/passkey.

Join Subreddit

다음은 몇 가지 예시 스크린샷입니다:

1.1 새 튜토리얼 추가#

1.2 모든 튜토리얼 표시#

Are your users passkey-ready?

Test Passkey-Readiness

1.3 튜토리얼 편집#

1.4 제목으로 튜토리얼 검색#

Subscribe to our Passkeys Substack for the latest news.

2. 아키텍처#

애플리케이션은 클라이언트-서버 아키텍처를 따릅니다:

백엔드: Node.js와 Express가 RESTful API를 처리하고 Sequelize ORM을 사용하여 MySQL 데이터베이스와 상호 작용합니다.
프런트엔드: React.js는 HTTP 요청을 위해 Axios를 통해 백엔드와 통신하고 내비게이션을 위해 React Router를 사용합니다.

3. 백엔드 구현#

3.1 Node.js 애플리케이션 설정#

프로젝트 디렉터리 생성:

mkdir react-node-express-mysql-crud
cd react-node-express-mysql-crud

Node.js 앱 초기화:
```
npm init -y
```

의존성 설치:

npm install express sequelize mysql2 cors --save

ESModule 구문 사용 package.json 파일에 다음 줄을 추가합니다:
```
{
    "type": "module"
    // ...
}
```

3.2 MySQL 및 Sequelize 구성#

구성 파일 생성 (app/config/db.config.js):

export default {
    HOST: "localhost",
    USER: "root",
    PASSWORD: "root",
    DB: "db",
    PORT: 8081,
    dialect: "mysql",
    pool: {
        max: 5,
        min: 0,
        acquire: 30000,
        idle: 10000,
    },
};

Sequelize 초기화 (app/models/index.js):

import dbConfig from "../config/db.config.js";
import Sequelize from "sequelize";
import Tutorial from "./tutorial.model.js";
 
const sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {
    host: dbConfig.HOST,
    dialect: dbConfig.dialect,
    pool: dbConfig.pool,
    port: dbConfig.PORT,
});
 
const db = {};
db.Sequelize = Sequelize;
db.sequelize = sequelize;
db.tutorials = Tutorial(sequelize, Sequelize);
 
export default db;

튜토리얼 모델 정의 (app/models/tutorial.model.js):

export default (sequelize, Sequelize) => {
    const Tutorial = sequelize.define("tutorial", {
        title: {
            type: Sequelize.STRING,
        },
        description: {
            type: Sequelize.STRING,
        },
        published: {
            type: Sequelize.BOOLEAN,
        },
    });
    return Tutorial;
};

로컬 개발용 MySQL 데이터베이스가 없는 경우, Docker를 사용하여 임시 MySQL 컨테이너를 생성할 수 있습니다:

docker run --rm -p 3306:3306 \
  -e MYSQL_ROOT_PASSWORD=root \
  -e MYSQL_DATABASE=db \
  mysql:8

3.3 라우트 및 컨트롤러 정의#

컨트롤러 생성 (app/controllers/tutorial.controller.js):

import db from "../models/index.js";
 
const Op = db.Sequelize.Op;
const Tutorial = db.tutorials;
 
// Create and Save a new Tutorial
export const create = (req, res) => {
    // Validate request
    if (!req.body.title) {
        res.status(400).send({
            message: "Content can not be empty!",
        });
        return;
    }
 
    // Create a Tutorial
    const tutorial = {
        title: req.body.title,
        description: req.body.description,
        published: req.body.published ? req.body.published : false,
    };
 
    // Save Tutorial in the database
    Tutorial.create(tutorial)
        .then((data) => {
            res.send(data);
        })
        .catch((err) => {
            res.status(500).send({
                message:
                    err.message || "Some error occurred while creating the Tutorial.",
            });
        });
};
 
// Retrieve all Tutorials
export const findAll = (req, res) => {
    // Allow a filter condition via query parameter
    const title = req.query.title;
    const condition = title ? { title: { [Op.like]: `%${title}%` } } : null;
 
    Tutorial.findAll({ where: condition })
        .then((data) => {
            res.send(data);
        })
        .catch((err) => {
            res.status(500).send({
                message: err.message || "Some error occurred while retrieving tutorials.",
            });
        });
};
 
// Find a single Tutorial by ID
export const findOne = (req, res) => {
    const id = req.params.id;
 
    // Find Tutorial by primary key
    Tutorial.findByPk(id)
        .then((data) => {
            if (data) {
                res.send(data);
            } else {
                res.status(404).send({
                    message: `Cannot find Tutorial with id=${id}.`,
                });
            }
        })
        .catch((err) => {
            res.status(500).send({
                message: "Error retrieving Tutorial with id=" + id,
            });
        });
};
 
// Update a Tutorial by ID
export const update = (req, res) => {
    const id = req.params.id;
 
    // Update the Tutorial with the specified ID
    Tutorial.update(req.body, {
        where: { id: id },
    })
        .then((num) => {
            if (num == 1) {
                res.send({
                    message: "Tutorial was updated successfully.",
                });
            } else {
                res.send({
                    message: `Cannot update Tutorial with id=${id}. Maybe Tutorial was not found or req.body is empty!`,
                });
            }
        })
        .catch((err) => {
            res.status(500).send({
                message: "Error updating Tutorial with id=" + id,
            });
        });
};
 
// Delete a Tutorial by ID
export const deleteOne = (req, res) => {
    const id = req.params.id;
 
    // Delete the Tutorial with the specified ID
    Tutorial.destroy({
        where: { id: id },
    })
        .then((num) => {
            if (num == 1) {
                res.send({
                    message: "Tutorial was deleted successfully!",
                });
            } else {
                res.send({
                    message: `Cannot delete Tutorial with id=${id}. Maybe Tutorial was not found!`,
                });
            }
        })
        .catch((err) => {
            res.status(500).send({
                message: "Could not delete Tutorial with id=" + id,
            });
        });
};
 
// Delete all Tutorials
export const deleteAll = (req, res) => {
    // Delete all Tutorials
    Tutorial.destroy({
        where: {},
        truncate: false,
    })
        .then((nums) => {
            res.send({ message: `${nums} Tutorials were deleted successfully!` });
        })
        .catch((err) => {
            res.status(500).send({
                message:
                    err.message || "Some error occurred while removing all tutorials.",
            });
        });
};
 
// Find all published Tutorials
export const findAllPublished = (req, res) => {
    // Find all Tutorials with published = true
    Tutorial.findAll({ where: { published: true } })
        .then((data) => {
            res.send(data);
        })
        .catch((err) => {
            res.status(500).send({
                message: err.message || "Some error occurred while retrieving tutorials.",
            });
        });
};

라우트 설정 (app/routes/tutorial.routes.js):

import * as tutorials from "../controllers/tutorial.controller.js";
import express from "express";
 
export default (app) => {
    let router = express.Router();
 
    // Create a new Tutorial
    router.post("/", tutorials.create);
 
    // Retrieve all Tutorials
    router.get("/", tutorials.findAll);
 
    // Retrieve a single Tutorial with id
    router.get("/:id", tutorials.findOne);
 
    // Update a Tutorial with id
    router.put("/:id", tutorials.update);
 
    // Delete a Tutorial with id
    router.delete("/:id", tutorials.deleteOne);
 
    // Delete all Tutorials
    router.delete("/", tutorials.deleteAll);
 
    // Find all published Tutorials
    router.get("/published", tutorials.findAllPublished);
 
    app.use("/api/tutorials", router);
};

Want to try passkeys yourself in a passkeys demo?

Try Passkeys

3.4 서버 실행#

서버 파일 생성 (server.js):

import express from "express";
import cors from "cors";
import db from "./app/models.js";
import tutorialRoutes from "./app/routes/tutorial.routes.js";
 
const app = express();
 
const corsOptions = {
    origin: "http://localhost:5173",
};
 
app.use(cors(corsOptions));
app.use(express.json());
app.use(express.urlencoded({ extended: true }));
 
// Simple route
app.get("/", (req, res) => {
    res.json({ message: "Welcome to the Tutorial Application." });
});
 
// Routes
tutorialRoutes(app);
 
// Sync database
db.sequelize.sync().then(() => {
    console.log("Synced db.");
});
 
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}.`);
});

서버 시작:

node server.js

출력:

Server is running on port 8080.
Synced db.

4. 프런트엔드 구현#

아키텍처는 다음과 같습니다:

또는 Redux를 사용할 수도 있습니다:

4.1 파일 구조#

최종 파일 구조는 다음과 같습니다:

frontend/
├─ index.html
├─ package.json
├─ postcss.config.js
├─ tailwind.config.js
├─ vite.config.js
├─ src/
│  ├─ App.jsx
│  ├─ main.jsx
│  ├─ index.css
│  ├─ services/
│  │   └─ tutorial.service.js
│  └─ pages/
│      ├─ AddTutorial.jsx
│      ├─ Tutorial.jsx
│      └─ TutorialsList.jsx

Become part of our Passkeys Community for updates & support.

Join

4.2 React 앱 생성#

다음 명령을 실행하여 Vite를 사용하여 새 React 앱을 설정합니다:

npm create vite@latest frontend -- --template react
cd frontend
npm i
npm i react-router-dom axios
npm install -D tailwindcss autoprefixer
npx tailwindcss init -p

마지막으로, 구성 파일 tailwind.config.js에서 tailwind content 옵션을 설정합니다:

/** @type {import('tailwindcss').Config} */
export default {
    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
    theme: {
        extend: {},
    },
    plugins: [],
};

그런 다음 src/index.css(Vite가 이 파일을 생성했습니다)를 열고 Tailwind 지시문을 추가합니다:

@tailwind base;
@tailwind components;
@tailwind utilities;

4.3 앱 레이아웃 초기화#

App.jsx 컴포넌트는 React Router 라우트를 구성하고 기본적인 Tailwind 네비게이션 바를 설정합니다. 다음 경로 사이를 탐색하게 됩니다:

/tutorials – 튜토리얼 목록
/add – 새 튜토리얼 생성을 위한 폼
/tutorials/:id – 단일 튜토리얼 편집

import { Routes, Route, Link } from "react-router-dom";
import TutorialsList from "./pages/TutorialsList";
import AddTutorial from "./pages/AddTutorial";
import Tutorial from "./pages/Tutorial";
 
function App() {
    return (
        <BrowserRouter>
            <div>
                {/* NAVBAR */}
                <nav className="bg-blue-600 p-4 text-white">
                    <div className="flex space-x-4">
                        <Link to="/tutorials" className="hover:text-gray-300 font-bold">
                            Tutorials
                        </Link>
                        <Link to="/add" className="hover:text-gray-300">
                            Add
                        </Link>
                    </div>
                </nav>
 
                {/* ROUTES */}
                <div className="container mx-auto mt-8 px-4">
                    <Routes>
                        <Route path="/" element={<TutorialsList />} />
                        <Route path="/tutorials" element={<TutorialsList />} />
                        <Route path="/add" element={<AddTutorial />} />
                        <Route path="/tutorials/:id" element={<Tutorial />} />
                    </Routes>
                </div>
            </div>
        </BrowserRouter>
    );
}
 
export default App;

4.4 데이터 서비스 생성#

이 서비스는 Node/Express 백엔드(http://localhost:8080/api)로의 Axios HTTP 요청을 처리합니다. 서버가 다른 주소나 포트에서 실행되는 경우 baseURL을 업데이트하세요.

import axios from "axios";
 
const http = axios.create({
    baseURL: "http://localhost:8080/api",
    headers: {
        "Content-Type": "application/json",
    },
});
 
const getAll = () => {
    return http.get("/tutorials");
};
 
const get = (id) => {
    return http.get(`/tutorials/${id}`);
};
 
const create = (data) => {
    return http.post("/tutorials", data);
};
 
const update = (id, data) => {
    return http.put(`/tutorials/${id}`, data);
};
 
const remove = (id) => {
    return http.delete(`/tutorials/${id}`);
};
 
const removeAll = () => {
    return http.delete("/tutorials");
};
 
const findByTitle = (title) => {
    return http.get(`/tutorials?title=${title}`);
};
 
export default {
    getAll,
    get,
    create,
    update,
    remove,
    removeAll,
    findByTitle,
};

4.5 항목 추가 컴포넌트#

src/pages/AddTutorial.jsx 아래에 새 튜토리얼을 생성하기 위한 컴포넌트입니다. 제목과 설명을 입력하고 TutorialService.create()를 호출할 수 있습니다.

import React, { useState } from "react";
import TutorialService from "../services/tutorial.service";
 
function AddTutorial() {
    const [title, setTitle] = useState("");
    const [description, setDescription] = useState("");
    const [submitted, setSubmitted] = useState(false);
 
    const saveTutorial = () => {
        const data = { title, description };
        TutorialService.create(data)
            .then((response) => {
                console.log(response.data);
                setSubmitted(true);
            })
            .catch((e) => {
                console.log(e);
            });
    };
 
    const newTutorial = () => {
        setTitle("");
        setDescription("");
        setSubmitted(false);
    };
 
    return (
        <div className="max-w-sm mx-auto p-4 bg-white rounded shadow">
            {submitted ? (
                <div>
                    <h4 className="font-bold text-green-600 mb-4">
                        Tutorial submitted successfully!
                    </h4>
                    <button
                        className="bg-blue-500 text-white px-3 py-1 rounded"
                        onClick={newTutorial}
                    >
                        Add Another
                    </button>
                </div>
            ) : (
                <div>
                    <h4 className="font-bold text-xl mb-2">Add Tutorial</h4>
 
                    <div className="mb-2">
                        <label className="block mb-1 font-medium">Title</label>
                        <input
                            type="text"
                            className="border border-gray-300 rounded w-full px-2 py-1"
                            value={title}
                            onChange={(e) => setTitle(e.target.value)}
                        />
                    </div>
 
                    <div className="mb-2">
                        <label className="block mb-1 font-medium">Description</label>
                        <input
                            type="text"
                            className="border border-gray-300 rounded w-full px-2 py-1"
                            value={description}
                            onChange={(e) => setDescription(e.target.value)}
                        />
                    </div>
 
                    <button
                        className="bg-green-500 text-white px-3 py-1 rounded mt-2"
                        onClick={saveTutorial}
                    >
                        Submit
                    </button>
                </div>
            )}
        </div>
    );
}
 
export default AddTutorial;

Are your users passkey-ready?

Test Passkey-Readiness

4.6 튜토리얼 목록 컴포넌트#

src/pages/TutorialsList.jsx 아래의 컴포넌트로, 다음 기능을 합니다:

튜토리얼 제목으로 필터링하는 검색창 표시
왼쪽에 튜토리얼 목록 표시
오른쪽에 선택된 튜토리얼 표시
모든 튜토리얼을 제거하는 버튼 제공

import { useState, useEffect } from "react";
import TutorialService from "../services/tutorial.service";
import { Link } from "react-router-dom";
 
function TutorialsList() {
    const [tutorials, setTutorials] = useState([]);
    const [currentTutorial, setCurrentTutorial] = useState(null);
    const [currentIndex, setCurrentIndex] = useState(-1);
    const [searchTitle, setSearchTitle] = useState("");
 
    useEffect(() => {
        retrieveTutorials();
    }, []);
 
    const onChangeSearchTitle = (e) => {
        setSearchTitle(e.target.value);
    };
 
    const retrieveTutorials = () => {
        TutorialService.getAll()
            .then((response) => {
                setTutorials(response.data);
                console.log(response.data);
            })
            .catch((e) => {
                console.log(e);
            });
    };
 
    const refreshList = () => {
        retrieveTutorials();
        setCurrentTutorial(null);
        setCurrentIndex(-1);
    };
 
    const setActiveTutorial = (tutorial, index) => {
        setCurrentTutorial(tutorial);
        setCurrentIndex(index);
    };
 
    const removeAllTutorials = () => {
        TutorialService.removeAll()
            .then((response) => {
                console.log(response.data);
                refreshList();
            })
            .catch((e) => {
                console.log(e);
            });
    };
 
    const findByTitle = () => {
        TutorialService.findByTitle(searchTitle)
            .then((response) => {
                setTutorials(response.data);
                setCurrentTutorial(null);
                setCurrentIndex(-1);
                console.log(response.data);
            })
            .catch((e) => {
                console.log(e);
            });
    };
 
    return (
        <div className="flex flex-col lg:flex-row gap-8">
            {/* LEFT COLUMN: SEARCH + LIST */}
            <div className="flex-1">
                <div className="flex mb-4">
                    <input
                        type="text"
                        className="border border-gray-300 rounded-l px-2 py-1 w-full"
                        placeholder="Search by title"
                        value={searchTitle}
                        onChange={onChangeSearchTitle}
                    />
                    <button
                        className="bg-blue-500 text-white px-4 py-1 rounded-r"
                        onClick={findByTitle}
                    >
                        Search
                    </button>
                </div>
 
                <h4 className="font-bold text-lg mb-2">Tutorials List</h4>
                <ul className="divide-y divide-gray-200 border border-gray-200 rounded">
                    {tutorials &&
                        tutorials.map((tutorial, index) => (
                            <li
                                className={
                                    "px-4 py-2 cursor-pointer " +
                                    (index === currentIndex ? "bg-blue-100" : "")
                                }
                                onClick={() => setActiveTutorial(tutorial, index)}
                                key={index}
                            >
                                {tutorial.title}
                            </li>
                        ))}
                </ul>
 
                <button
                    className="bg-red-500 text-white px-3 py-1 rounded mt-4"
                    onClick={removeAllTutorials}
                >
                    Remove All
                </button>
            </div>
 
            {/* RIGHT COLUMN: DETAILS */}
            <div className="flex-1">
                {currentTutorial ? (
                    <div className="p-4 bg-white rounded shadow">
                        <h4 className="font-bold text-xl mb-2">Tutorial</h4>
                        <div className="mb-2">
                            <strong>Title: </strong>
                            {currentTutorial.title}
                        </div>
                        <div className="mb-2">
                            <strong>Description: </strong>
                            {currentTutorial.description}
                        </div>
                        <div className="mb-2">
                            <strong>Status: </strong>
                            {currentTutorial.published ? "Published" : "Pending"}
                        </div>
 
                        <Link
                            to={`/tutorials/${currentTutorial.id}`}
                            className="inline-block bg-yellow-400 text-black px-3 py-1 rounded"
                        >
                            Edit
                        </Link>
                    </div>
                ) : (
                    <div>
                        <p>Please click on a Tutorial...</p>
                    </div>
                )}
            </div>
        </div>
    );
}
 
export default TutorialsList;

Want to find out how many people use passkeys?

View Adoption Data

4.7 튜토리얼 컴포넌트#

단일 튜토리얼을 보고 편집하기 위한 src/pages/Tutorial.jsx 아래의 함수형 컴포넌트입니다. 다음을 사용합니다:

useParams()를 사용하여 URL에서 :id를 가져옵니다.
useNavigate()를 사용하여 리디렉션합니다.
TutorialService를 사용하여 get, update, delete 작업을 수행합니다.

import { useState, useEffect } from "react";
import { useParams, useNavigate } from "react-router-dom";
import TutorialService from "../services/tutorial.service";
 
function Tutorial() {
    const { id } = useParams();
    const navigate = useNavigate();
 
    const [currentTutorial, setCurrentTutorial] = useState({
        id: null,
        title: "",
        description: "",
        published: false,
    });
    const [message, setMessage] = useState("");
 
    const getTutorial = (id) => {
        TutorialService.get(id)
            .then((response) => {
                setCurrentTutorial(response.data);
                console.log(response.data);
            })
            .catch((e) => {
                console.log(e);
            });
    };
 
    useEffect(() => {
        if (id) getTutorial(id);
    }, [id]);
 
    const handleInputChange = (event) => {
        const { name, value } = event.target;
        setCurrentTutorial({ ...currentTutorial, [name]: value });
    };
 
    const updatePublished = (status) => {
        const data = {
            ...currentTutorial,
            published: status,
        };
 
        TutorialService.update(currentTutorial.id, data)
            .then((response) => {
                setCurrentTutorial({ ...currentTutorial, published: status });
                console.log(response.data);
            })
            .catch((e) => {
                console.log(e);
            });
    };
 
    const updateTutorial = () => {
        TutorialService.update(currentTutorial.id, currentTutorial)
            .then((response) => {
                console.log(response.data);
                setMessage("The tutorial was updated successfully!");
            })
            .catch((e) => {
                console.log(e);
            });
    };
 
    const deleteTutorial = () => {
        TutorialService.remove(currentTutorial.id)
            .then((response) => {
                console.log(response.data);
                navigate("/tutorials");
            })
            .catch((e) => {
                console.log(e);
            });
    };
 
    return (
        <div>
            {currentTutorial ? (
                <div className="max-w-sm mx-auto p-4 bg-white rounded shadow">
                    <h4 className="font-bold text-xl mb-2">Edit Tutorial</h4>
                    <div className="mb-2">
                        <label className="block font-medium" htmlFor="title">
                            Title
                        </label>
                        <input
                            type="text"
                            className="border border-gray-300 rounded w-full px-2 py-1"
                            id="title"
                            name="title"
                            value={currentTutorial.title}
                            onChange={handleInputChange}
                        />
                    </div>
 
                    <div className="mb-2">
                        <label className="block font-medium" htmlFor="description">
                            Description
                        </label>
                        <input
                            type="text"
                            className="border border-gray-300 rounded w-full px-2 py-1"
                            id="description"
                            name="description"
                            value={currentTutorial.description}
                            onChange={handleInputChange}
                        />
                    </div>
 
                    <div className="mb-2">
                        <strong>Status:</strong>{" "}
                        {currentTutorial.published ? "Published" : "Pending"}
                    </div>
 
                    <div className="space-x-2 mt-2">
                        {currentTutorial.published ? (
                            <button
                                className="bg-blue-500 text-white px-3 py-1 rounded"
                                onClick={() => updatePublished(false)}
                            >
                                Unpublish
                            </button>
                        ) : (
                            <button
                                className="bg-blue-500 text-white px-3 py-1 rounded"
                                onClick={() => updatePublished(true)}
                            >
                                Publish
                            </button>
                        )}
 
                        <button
                            className="bg-red-500 text-white px-3 py-1 rounded"
                            onClick={deleteTutorial}
                        >
                            Delete
                        </button>
 
                        <button
                            className="bg-green-500 text-white px-3 py-1 rounded"
                            onClick={updateTutorial}
                        >
                            Update
                        </button>
                    </div>
 
                    {message && <p className="text-green-600 mt-2">{message}</p>}
                </div>
            ) : (
                <div>
                    <p>Loading tutorial...</p>
                </div>
            )}
        </div>
    );
}
 
export default Tutorial;

Want to experiment with passkey flows? Try our Passkeys Debugger.

Try for Free

4.8 애플리케이션 실행#

npm run dev

이제 http://localhost:5173에서 애플리케이션에 액세스할 수 있습니다. 브라우저에서 해당 URL을 여세요. 이제 다음으로 이동할 수 있습니다:

/tutorials – 모든 튜토리얼 보기
/add – 튜토리얼 추가
/tutorials/:id – 특정 튜토리얼 편집

(Node/Express 백엔드가 http://localhost:8080에서 실행 중인지 확인하거나 그에 따라 tutorial.service.js의 baseURL을 업데이트하세요.)

5. 결론#

React, Node.js, Express, MySQL을 사용하여 풀스택 CRUD 애플리케이션을 성공적으로 구축했습니다. 이 프로젝트는 Node.js와 Express로 RESTful API를 설정하고, Sequelize ORM으로 데이터를 관리하며, React와 TailwindCSS로 반응형 프런트엔드를 만드는 방법을 보여줍니다.

즐거운 코딩 되시고 다음 튜토리얼에서 뵙겠습니다!