[React] 나만의 블로그 만들기 #1

파트라슈·2024년 12월 13일

사용스택

FE - React, js
BE - node express

1. 아주아주 간단한 설계 작업

글올리는 방식 - 관리자 페이지에서 md파일 업로드
말이 좋아 관리자지만 그냥 숨겨놓은거임

기본 UI - mui blog templete 참고하여 변형하였음
디자인 참고링크

MySQL 사용하였고 테이블 하나만 만듬

2. React

메인페이지 3개 정도
컴포넌트는 5개 정도 만들어놨다.

src
├── components
│ ├── Footer.js
│ ├── MainContent.js <- BlogBody인데 위치 변경예정이다.
│ ├── MainContent.module.css
│ ├── OtherPost.js <- 게시글 상세 하단에 들어갈 컴포넌트
│ └── Pagination.js
├── pages
│ ├── Blog.js <- 메인화면
│ ├── BlogAdd.js <- 게시글 추가
│ ├── BlogView.js <- 게시글 상세
│ └── BlogView.module.css <- 디자인

3. Node

백엔드 쪽은 열심히 공부중인 단계인 만큼 소스 코드 첨부

// 리스트 불러오기
app.get('/posts', async (req, res) => {
    try {
        const [rows] = await pool.query('SELECT * FROM posts ORDER BY created_at DESC');
        res.json(rows);
    } catch (error) {
        console.error('Database Query Error:', error.message);
        res.status(500).send('Server Error');
    }
});

// 글 상세
app.get('/posts/:id', async (req, res) => {
    const { id } = req.params;
    try {
      const [rows] = await pool.query('SELECT * FROM posts WHERE id = ?', [id]);
      if (rows.length === 0) {
        return res.status(404).send('Post not found');
      }
      res.json(rows[0]);
    } catch (error) {
      console.error('Database Query Error:', error.message);
      res.status(500).send('Server Error');
    }
  });

// 글 업로드
app.post('/posts', async (req, res) => {
    const { title, content, mainImg, tag } = req.body;
    try {
        const result = await pool.query(
            'INSERT INTO posts (title, content, mainImg, tag) VALUES (?, ?, ?, ?)',
            [title, content, mainImg, tag]
        );
        res.status(201).send('Post created');
    } catch (error) {
        console.error(error);
        res.status(500).send('Server Error');
    }
});