[ReactJS] React + MySQL 게시판 만들기

1. React + MySQL 

MySQL과 React를 사용하여 게시판(Bulletin Board) 애플리케이션을 만드는 기본적인 방법은 데이터베이스에서 게시물 데이터를 저장하고, React를 사용하여 사용자 인터페이스를 구축하는 방식입니다. 먼저 아래 필요한 Node.js와 MySQL과 React 프로젝트 생성부터 해야합니다.

• Node.js: Node.js 공식 웹 사이트에서 설치
• MySQL: MySQL 공식 웹 사이트에서 설치
• React 앱 생성: Create React App을 사용하여 React 프로젝트 생성

npx create-react-app react-board
cd react-board

 

다음 mysql과 react를 나눌 수 있도록 폴더를 구조화 합니다.

mkdir backend - MySQL 
mkdir frontend - React Project

 

backend 폴더에 database.sql 파일 생성후 아래 sql 코드를 입력합니다.

CREATE DATABASE board;

USE board;

CREATE TABLE posts (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255) NOT NULL,
    content TEXT NOT NULL,
    create_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
)

---

2. 백엔드 API 구축

먼저 백엔드 API를 구축하기 위해 backend 폴더에 nodejs 프로젝트를 세팅합니다.

cd backend 
npm init -y
npm install express mysql2 cors

 

server.js 파일을 생성하고 다음 코드를 추가해줍니다.

require("dotenv").config();
const express = require("express");
const mysql = require("mysql2");
const cors = require("cors");

const app = express();
const PORT = process.env.PORT || 4000; // 포트 변경

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

// MySQL 연결 설정
const db = mysql.createConnection({
  host: "localhost",
  user: process.env.DB_USER, // 환경 변수에서 사용자 이름 가져오기
  password: process.env.DB_PASSWORD, // 환경 변수에서 비밀번호 가져오기
  database: "board", // 데이터베이스 이름
});

db.connect((err) => {
  if (err) {
    console.error("MySQL connection error:", err);
    return;
  }
  console.log("MySQL connected...");
});

// 게시물 가져오기
app.get("/posts", (req, res) => {
  db.query("SELECT * FROM posts", (err, results) => {
    if (err) {
      console.error("Error fetching posts:", err);
      return res.status(500).send(err);
    }
    res.json(results);
  });
});

// 게시물 추가하기
app.post("/posts", (req, res) => {
  const { title, content } = req.body;
  db.query(
    "INSERT INTO posts (title, content) VALUES (?, ?)",
    [title, content],
    (err, result) => {
      if (err) {
        console.error("Error inserting post:", err);
        return res.status(500).send(err);
      }
      res.status(201).json({ id: result.insertId, title, content });
    }
  );
});

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

node server.js

---

3. 프론트엔드 설정

frontend 폴더에 React 디렉토리에 들어가 Axios 라이브러리를 설치합니다.

cd .. 
cd frontend && npm install axios

 

src 디렉토리 내에 Board.js 파일을 생성하고 아래 코드를 추가합니다.

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

const Board = () => {
  const [title, setTitle] = useState("");
  const [posts, setPosts] = useState([]);
  const [content, setContent] = useState("");

  useEffect(() => {
    const fetchPosts = async () => {
      const res = await axios.get("http://localhost:4000/posts");
      setPosts(res.data);
    };
    fetchPosts();
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    const res = await axios.post("http://localhost:4000/posts", {
      title,
      content,
    });
    setPosts([...posts, res.data]);
    setTitle("");
    setContent("");
  };

  return (
    <div>
      <h1>게시판</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="제목"
          required
        />
        <textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
          placeholder="내용"
          required
        />
        <button type="submit">게시글 작성</button>
      </form>
      <ul>
        {posts.map((post) => (
          <li key={post.id}>
            <h2>{post.title}</h2>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
};

export default Board;

 

src/App.js 파일을 열고 Board 컴포넌트를 사용하도록 수정합니다.

import logo from "./logo.svg";
import "./App.css";
import Board from "./board";

function App() {
  return (
    <div className="App">
      <Board />
    </div>
  );
}

export default App;

---

 

GitHub - Koras02/react-mysql