React와 Node.js를 사용한 웹 애플리케이션(게시판) 개발 강좌(12)

React와 Node.js를 사용한 게시판 웹 애플리케이션 개발 강좌

이번 강의에서는 React와 Node.js를 사용하여 게시판 웹 애플리케이션을 개발하는 방법을 배웁니다. 게시판 기능에는 게시글 작성, 조회, 수정, 삭제(CRUD)가 포함되며, React는 프론트엔드, Node.js는 백엔드 역할을 수행합니다. 또한, MySQL을 데이터베이스로 사용하여 게시글 데이터를 저장하고 관리합니다.

React와 Node.js를 사용한 게시판

---

1. 프로젝트 구성

프로젝트는 크게 두 부분으로 나뉩니다:

• 프론트엔드: React로 구성되며, 게시글 리스트, 게시글 작성/수정 폼, 게시글 상세보기 등을 구현합니다.
• 백엔드: Node.js와 Express를 사용하여 API를 만들고, MySQL과 연결해 게시글 데이터를 처리합니다.

프로젝트 구조

my-app/
│
├── client/           # React 프론트엔드
│   ├── src/
│   ├── public/
│   └── ...
├── server/           # Node.js 백엔드
│   ├── db.js         # MySQL 연결 설정
│   ├── server.js     # Express 서버 설정
│   ├── routes/
│   └── ...
└── package.json

---

2. 백엔드 개발: Node.js와 Express로 API 만들기

2.1 MySQL과 Node.js 연결

먼저, MySQL에 연결하기 위한 설정을 db.js 파일에 작성합니다.

// server/db.js
const mysql = require('mysql');

const connection = mysql.createConnection({
  host: 'localhost',
  user: 'root',
  password: 'your_password',
  database: 'my_board'
});

connection.connect((err) => {
  if (err) {
    console.error('Error connecting to MySQL:', err);
    return;
  }
  console.log('Connected to MySQL');
});

module.exports = connection;

2.2 게시판 API 구현

server.js 파일에서 Express 서버와 게시판 API를 설정합니다.

// server/server.js
const express = require('express');
const db = require('./db');
const app = express();
app.use(express.json()); // JSON 요청을 처리하기 위해 필요

// 게시글 목록 조회 API
app.get('/api/posts', (req, res) => {
  const query = 'SELECT * FROM posts';
  db.query(query, (err, results) => {
    if (err) {
      return res.status(500).send('Error fetching posts');
    }
    res.json(results);
  });
});

// 게시글 작성 API
app.post('/api/posts', (req, res) => {
  const { title, content } = req.body;
  const query = 'INSERT INTO posts (title, content) VALUES (?, ?)';
  db.query(query, [title, content], (err, result) => {
    if (err) {
      return res.status(500).send('Error creating post');
    }
    res.status(201).send('Post created successfully');
  });
});

// 게시글 수정 API
app.put('/api/posts/:id', (req, res) => {
  const { id } = req.params;
  const { title, content } = req.body;
  const query = 'UPDATE posts SET title = ?, content = ? WHERE id = ?';
  db.query(query, [title, content, id], (err, result) => {
    if (err) {
      return res.status(500).send('Error updating post');
    }
    res.send('Post updated successfully');
  });
});

// 게시글 삭제 API
app.delete('/api/posts/:id', (req, res) => {
  const { id } = req.params;
  const query = 'DELETE FROM posts WHERE id = ?';
  db.query(query, [id], (err, result) => {
    if (err) {
      return res.status(500).send('Error deleting post');
    }
    res.send('Post deleted successfully');
  });
});

// 서버 실행
const PORT = 5000;
app.listen(PORT, () => {
  console.log(`Server running on http://localhost:${PORT}`);
});

2.3 MySQL 테이블 설정

MySQL에서 사용할 posts 테이블을 생성합니다.

CREATE TABLE posts (
    id INT AUTO_INCREMENT PRIMARY KEY,
    title VARCHAR(255),
    content TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP
);

---

3. 프론트엔드 개발: React로 UI 만들기

3.1 게시글 목록 페이지 구현

게시글 목록을 보여주는 컴포넌트를 작성합니다.

// src/components/PostList.js
import React, { useState, useEffect } from 'react';
import axios from 'axios';

function PostList() {
  const [posts, setPosts] = useState([]);

  useEffect(() => {
    axios.get('/api/posts')
      .then((response) => setPosts(response.data))
      .catch((error) => console.error('Error fetching posts:', error));
  }, []);

  return (
    <div>
      <h1>게시판</h1>
      <ul>
        {posts.map(post => (
          <li key={post.id}>
            <h3>{post.title}</h3>
            <p>{post.content}</p>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default PostList;

3.2 게시글 작성 페이지 구현

게시글을 작성하는 컴포넌트를 작성합니다.

// src/components/PostForm.js
import React, { useState } from 'react';
import axios from 'axios';

function PostForm() {
  const [title, setTitle] = useState('');
  const [content, setContent] = useState('');

  const handleSubmit = (e) => {
    e.preventDefault();
    axios.post('/api/posts', { title, content })
      .then(() => {
        alert('게시글이 작성되었습니다.');
        setTitle('');
        setContent('');
      })
      .catch((error) => console.error('Error creating post:', error));
  };

  return (
    <form onSubmit={handleSubmit}>
      <h2>새 게시글 작성</h2>
      <div>
        <label>제목</label>
        <input
          type="text"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
        />
      </div>
      <div>
        <label>내용</label>
        <textarea
          value={content}
          onChange={(e) => setContent(e.target.value)}
        ></textarea>
      </div>
      <button type="submit">작성</button>
    </form>
  );
}

export default PostForm;

---

4. 클라이언트와 서버 통합

React의 프록시 설정을 이용해 프론트엔드와 백엔드 간 통신을 설정합니다. package.json 파일에 프록시 설정을 추가하여, 개발 중에는 동일한 도메인에서 API 요청을 처리할 수 있도록 합니다.

// client/package.json
"proxy": "http://localhost:5000"

---

5. CRUD 기능 요약

• Create: 사용자가 새 게시글을 작성하고 서버로 전송.
• Read: 모든 게시글을 목록으로 보여주고, 상세 게시글을 조회.
• Update: 게시글의 내용을 수정하고, 서버에 반영.
• Delete: 특정 게시글을 삭제하고, 이를 데이터베이스에서 삭제.

---

결론

이번 강의에서는 React와 Node.js를 사용하여 게시판 웹 애플리케이션을 개발하는 방법을 배웠습니다. 백엔드에서는 MySQL을 통해 데이터를 저장하고 관리했으며, 프론트엔드에서는 React를 사용해 사용자 인터페이스를 구성하고, 백엔드 API와 통신했습니다.