Sequelize와 React를 이용해 간단한 웹 애플리케이션을 만드는 방법

by

Sequelize와 React를 이용해 간단한 웹 애플리케이션을 만드는 방법을 단계별로 설명해드리겠습니다. 이 예제에서는 Node.js와 Express를 백엔드로 사용하고, Sequelize를 ORM으로 사용하며, React를 프론트엔드로 사용합니다. 기본적인 CRUD(Create, Read, Update, Delete) 기능을 포함합니다.

1. 프로젝트 초기화

먼저 프로젝트 구조를 설정합니다.

mkdir nextjs-sequelize-app
cd nextjs-sequelize-app

2. Next.js 설정

2.1. Next.js 프로젝트 생성 및 패키지 설치

Next.js 프로젝트를 생성하고 필요한 패키지를 설치합니다.

npx create-next-app@latest .
npm install sqlite3 sequelize

3. Sequelize 및 SQLite3 설정

3.1. Sequelize 설정

SQLite3을 사용하도록 Sequelize를 설정합니다.

lib/db.js

const { Sequelize } = require("sequelize");
const path = require("path");

// SQLite 데이터베이스 파일 경로 설정
const sequelize = new Sequelize({
  dialect: "sqlite",
  storage: path.join(process.cwd(), "database.sqlite"),
});

module.exports = sequelize;

3.2. 모델 정의

간단한 User 모델을 정의합니다.

models/User.js

const { DataTypes } = require("sequelize");
const sequelize = require("../lib/db");

const User = sequelize.define("User", {
  name: {
    type: DataTypes.STRING,
    allowNull: false,
  },
  email: {
    type: DataTypes.STRING,
    allowNull: false,
    unique: true,
  },
});

module.exports = User;

3.3. 데이터베이스 초기화

Next.js의 API 라우트에서 데이터베이스를 초기화합니다.

pages/api/init.js

import sequelize from "../../lib/db";
import User from "../../models/User";

export default async function handler(req, res) {
  try {
    await sequelize.sync({ force: true }); // 데이터베이스 초기화
    await User.create({ name: "John Doe", email: "john@example.com" }); // 예제 데이터 추가
    res.status(200).json({ message: "Database initialized!" });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
}

4. API 라우트 설정

CRUD 기능을 구현하는 API 라우트를 만듭니다.

pages/api/users/index.js

import User from "../../../models/User";

export default async function handler(req, res) {
  if (req.method === "GET") {
    // GET: 모든 사용자 가져오기
    const users = await User.findAll();
    res.status(200).json(users);
  } else if (req.method === "POST") {
    // POST: 사용자 생성
    const { name, email } = req.body;
    try {
      const user = await User.create({ name, email });
      res.status(201).json(user);
    } catch (error) {
      res.status(400).json({ error: error.message });
    }
  }
}

pages/api/users/[id].js

import User from "../../../models/User";

export default async function handler(req, res) {
  const { id } = req.query;

  if (req.method === "PUT") {
    // PUT: 사용자 업데이트
    const { name, email } = req.body;
    try {
      await User.update({ name, email }, { where: { id } });
      res.status(200).json({ success: true });
    } catch (error) {
      res.status(400).json({ error: error.message });
    }
  } else if (req.method === "DELETE") {
    // DELETE: 사용자 삭제
    try {
      await User.destroy({ where: { id } });
      res.status(200).json({ success: true });
    } catch (error) {
      res.status(400).json({ error: error.message });
    }
  }
}

5. 프론트엔드 설정

Next.js의 페이지에서 API를 호출하여 사용자 데이터를 처리합니다.

pages/index.js

import { useState, useEffect } from "react";
import axios from "axios";

export default function Home() {
  const [users, setUsers] = useState([]);
  const [name, setName] = useState("");
  const [email, setEmail] = useState("");

  useEffect(() => {
    axios.get("/api/users").then((response) => {
      setUsers(response.data);
    });
  }, []);

  const addUser = () => {
    axios.post("/api/users", { name, email }).then((response) => {
      setUsers([...users, response.data]);
      setName("");
      setEmail("");
    });
  };

  const deleteUser = (id) => {
    axios.delete(/api/users/${id}).then(() => {
      setUsers(users.filter((user) => user.id !== id));
    });
  };

  return (
    <div>
      <h1>User List</h1>
      <input
        type="text"
        placeholder="Name"
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <input
        type="email"
        placeholder="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
      />
      <button onClick={addUser}>Add User</button>
      <ul>
        {users.map((user) => (
          <li key={user.id}>
            {user.name} ({user.email})
            <button onClick={() => deleteUser(user.id)}>Delete</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

6. 애플리케이션 실행

  1. 데이터베이스 초기화: http://localhost:3000/api/init으로 접속하여 데이터베이스를 초기화합니다.
  2. Next.js 앱 실행: 프로젝트 루트에서 다음 명령어로 앱을 실행합니다.
npm run dev

이제 브라우저에서 http://localhost:3000으로 이동하면 간단한 사용자 관리 애플리케이션이 실행됩니다. 이 애플리케이션은 SQLite3를 사용하여 데이터를 저장하며, Next.js API 라우트를 통해 CRUD 작업을 수행합니다.

Leave a Comment