게시판 - CRUD

Preview

•

BackEnd

◦

Spring Boot

◦

CRUD 작업

▪

board 테이블 생성

▪

Board.java DTO 생성

▪

BoardMapper.xml

▪

BoardMapper.java

▪

BoardService.java

▪

BoardServiceImpl.java

▪

BoardController.java

•

FrontEnd

◦

React

◦

apis

▪

boards.js

◦

components

▪

board

•

List

•

Read

•

InsertForm

•

UpdateForm

◦

containers

▪

게시글 목록 - ListContainer

▪

게시글 등록 - InsertContainer

▪

게시글 조회 - ReadContainer

▪

게시글 수정 - UpdateContainer

◦

pages

▪

board

•

List

•

Read

•

Insert

•

Update

▪

Home

axios 라이브러리

axios 라이브러리 설치

npm install axios
Bash
복사

axios 사용 방법

◦

import

◦

GET

◦

POST

◦

PUT

◦

DELETE

import

import axios from 'axios';
JavaScript
복사

GET

axios.get("경로")
JavaScript
복사

POST

axios.post("경로", {데이터})
JavaScript
복사

PUT

axios.put("경로", {데이터})
JavaScript
복사

DELETE

axios.delete("경로")
JavaScript
복사

•

BackEnd

◦

Spring Boot

◦

CRUD 작업

▪

board 테이블 생성

▪

Board.java DTO 생성

▪

BoardMapper.xml

▪

BoardMapper.java

▪

BoardService.java

▪

BoardServiceImpl.java

▪

BoardController.java

•

FrontEnd

◦

React

◦

apis

▪

boards.js

◦

components

▪

board

•

List

•

Read

•

InsertForm

•

UpdateForm

◦

containers

▪

게시글 목록 - ListContainer

▪

게시글 등록 - InsertContainer

▪

게시글 조회 - ReadContainer

▪

게시글 수정 - UpdateContainer

◦

pages

▪

board

•

List

•

Read

•

Insert

•

Update

▪

Home

apis

boards.js

// 💻 npm install axios
import axios from 'axios';

// 목록
export const list = () => axios.get("/boards")

// 조회
export const select = (no) => axios.get(`/boards/${no}`)

// 등록
export const insert = (title, writer, content) => axios.post("/boards", {title, writer, content})

// 수정
export const update = (no, title, writer, content) => axios.put("/boards", {no,title,writer,content})

// 삭제
export const remove = (no) => axios.delete(`/boards/${no}`)
JavaScript
복사

components

•

board

◦

List

◦

Read

◦

InsertForm

◦

UpdateForm

List

import React from 'react'
import {Link} from 'react-router-dom'

const List = ({ boardList }) => {
  console.log(boardList);
  return (
    <div className='container'>
      <h1>게시글 목록</h1>
      <Link to="/boards/insert">글쓰기</Link>
      <table border={1}>
        <thead>
          <tr>
            <th>번호</th>
            <th>제목</th>
            <th>작성자</th>
            <th>등록일자</th>
          </tr>
        </thead>
        <tbody>
          {boardList.map((board) => 
            (
              <tr key={board.no}>
                <td>{board.no}</td>
                <td>
                  <Link to={`/boards/${board.no}`}>
                    {board.title}
                  </Link>
                </td>
                <td>{board.writer}</td>
                <td>{board.regDate}</td>
              </tr>
            )
          )}
        </tbody>
      </table>
    </div>
  )
}

export default List
JavaScript
복사

Read

import React from 'react'
import { Link } from 'react-router-dom'

const Read = ({ no, board }) => {
  return (
    <div className='container'>
      <h1 className="title">게시글 조회</h1>
      <h3>번호 : {no}</h3>
      <hr />
      <table>
        <tbody>
          <tr>
            <td>번호</td>
            <td>
              <input type="text" value={no} readOnly />
            </td>
          </tr>
          <tr>
            <td>등록일자</td>
            <td>
              <input type="text" value={board.regDate} readOnly />
            </td>
          </tr>
          <tr>
            <td>제목</td>
            <td>
              <input type="text" value={board.title} readOnly />
            </td>
          </tr>
          <tr>
            <td>작성자</td>
            <td>
              <input type="text" value={board.writer} readOnly />
            </td>
          </tr>
          <tr>
            <td colSpan={2}>내용</td>
          </tr>
          <tr>
            <td colSpan={2}>
              <textarea cols="40" rows="10" value={board.content} readOnly></textarea>
            </td>
          </tr>
        </tbody>
      </table>
      <hr />
      <div className="btn-box">
        <Link to="/boards" className='btn'>목록</Link>
        <Link to={`/boards/update/${no}`} className='btn'>수정</Link>
      </div>
    </div>
  )
}

export default Read
JavaScript
복사

InsertForm

import React, { useState } from 'react'
import { Link } from 'react-router-dom'

const InsertForm = ({ onInsert }) => {

  // 🧊 state
  const [title, setTitle] = useState('')
  const [writer, setWriter] = useState('')
  const [content, setContent] = useState('')

  // 🌞 함수
  const handleChangeTitle = (e) => {
    setTitle(e.target.value)
  }
  const handleChangeWriter = (e) => {
    setWriter(e.target.value)
  }
  const handleChangeContent = (e) => {
    setContent(e.target.value)
  }

  const onSubmit = () => {
    // 유효성 검사 ✅
    // ...
    onInsert(title, writer, content)
  }

  return (
    <div className='container'>
      <h1 className='title'>게시글 등록</h1>
      <table>
        <tbody>
          <tr>
            <td>제목</td>
            <td>
              <input type="text"
                     value={title}
                     onChange={handleChangeTitle} />
            </td>
          </tr>
          <tr>
            <td>작성자</td>
            <td>
              <input type="text"
                     value={writer}
                     onChange={handleChangeWriter} />
            </td>
          </tr>
          <tr>
            <td colSpan={2}>내용</td>
          </tr>
          <tr>
            <td colSpan={2}>
              <textarea cols="40" rows="10"
                        value={content}
                        onChange={handleChangeContent}></textarea>
            </td>
          </tr>
        </tbody>
      </table>
      <div className="btn-box">
        <Link to="/boards" className='btn'>목록</Link>
        <button className='btn' onClick={ onSubmit }>등록</button>
      </div>
    </div>
  )
}

export default InsertForm
JavaScript
복사

UpdateForm

import React, { useEffect } from 'react'
import { useState } from 'react'
import { Link } from 'react-router-dom'

const UpdateForm = ({ no, board, onUpdate, onDelete }) => {
  // 🧊 state
  const [title, setTitle] = useState('')
  const [writer, setWriter] = useState('')
  const [content, setContent] = useState('')
 
  // 🌞 함수
  const handleChangeTitle = (e) => {
    setTitle(e.target.value)
  }
  const handleChangeWriter = (e) => {
    setWriter(e.target.value)
  }
  const handleChangeContent = (e) => {
    setContent(e.target.value)
  }

  const onSubmit = () => {
    onUpdate(no, title, writer, content)
  }

  const handleDelete = () => {
    const check = window.confirm("정말로 삭제하시겠습니까?")
    if( check ) {
      onDelete(no)
    }
  }

  useEffect( () => {
    if( board ) {
      setTitle(board.title)
      setWriter(board.writer)
      setContent(board.content)
    }
  }, [board])
  // [의존하는 객체] (⭐의존성 배열)
  // : 지정한 객체가 변화했을때, 다시 useEffect 를 실행한다.


  return (
    <div className='container'>
      <h1 className='title'>게시글 수정</h1>
      <table>
        <tbody>
          <tr>
            <td>번호</td>
            <td>
              <input type="text" value={no} readOnly />
            </td>
          </tr>
          <tr>
            <td>제목</td>
            <td>
              <input type="text" 
                     value={title}
                     onChange={handleChangeTitle} />
            </td>
          </tr>
          <tr>
            <td>작성자</td>
            <td>
              <input type="text" 
                     value={writer}
                     onChange={handleChangeWriter} />
            </td>
          </tr>
          <tr>
            <td colSpan={2}>내용</td>
          </tr>
          <tr>
            <td colSpan={2}>
              <textarea cols="40" rows="10" 
                        value={content}
                        onChange={handleChangeContent}></textarea>
            </td>
          </tr>
        </tbody>
      </table>
      <div className="btn-box">
        <Link to="/boards" className='btn'>목록</Link>
        <button className='btn' onClick={handleDelete}>삭제</button>
        <button className='btn' onClick={onSubmit}>수정</button>
      </div>
    </div>
  )
}

export default UpdateForm
JavaScript
복사

containers

•

게시글 목록 - ListContainer

•

게시글 등록 - InsertContainer

•

게시글 조회 - ReadContainer

•

게시글 수정 - UpdateContainer

게시글 목록 - ListContainer

import React, { useEffect, useState } from 'react'
import List from '../components/board/List'
import * as boards from '../apis/boards'

const ListContainer = () => {
  // 🧊 state
  const [boardList, setBoardList] = useState([])

  // 🌞 함수
  const getBoardList = async () => {
    const response = await boards.list()
    const data = await response.data      // ⭐boardList
    setBoardList(data)
  }

  // ❓ hook
  useEffect( ()=> {
    getBoardList()
  }, [])

  return (
    <>
      {/* 게시글 목록 */}
      <List boardList={boardList} />
    </>
  )
}

export default ListContainer
JavaScript
복사

게시글 등록 - InsertContainer

import React from 'react'
import InsertForm from '../components/board/InsertForm'
import * as boards from '../apis/boards'
import { useNavigate } from 'react-router-dom'

const InsertContainer = () => {
  const navigate = useNavigate()
  // 🧊 state
  // 🌞 함수
  const onInsert = async (title, writer, content) => {
    try {
      const response = await boards.insert(title, writer, content)
      const status = await response.status
      console.log(`게시글 등록 요청 결과 : ${status}`);
      alert("게시글 등록 완료!")

      // ➡ 게시글 목록으로 이동
      navigate("/boards")
    } catch (error) {
      console.log(error);
    }
  }
  return (
    <>
      <InsertForm onInsert={onInsert} />
    </>
  )
}

export default InsertContainer
JavaScript
복사

게시글 조회 - ReadContainer

import React, { useEffect } from 'react'
import Read from '../components/board/Read'
import { useState } from 'react'
import * as boards from '../apis/boards'

const ReadContainer = ({ no }) => {
  // 🧊 state
  const [board, setBoard] = useState({})

  // 🌞 함수
  const getBoard = async () => {
    const response = await boards.select(no)
    const data = await response.data        // ⭐ board
    console.log(data);
    setBoard(data)
  }

  // ❓ hook
  useEffect( () => {
    getBoard()
  }, [])

  return (
    <>
      <Read no={no} board={board} />
    </>
  )
}

export default ReadContainer
JavaScript
복사

게시글 수정 - UpdateContainer

import React, { useEffect, useState } from 'react'
import UpdateForm from '../components/board/UpdateForm'
import * as boards from '../apis/boards'
import { useNavigate } from 'react-router-dom'


const UpdateContainer = ({ no }) => {
  // 🧊 state
  const [board, setBoard] = useState({})

  // 🌞 함수
  const navigate = useNavigate()

  const getBoard = async () => {
    const response = await boards.select(no)
    const data = await response.data        // ⭐ board
    console.log(data);
    setBoard(data)
  }

  
  const onUpdate = async (no, title, writer, content) => {
    try {
      const response = await boards.update(no, title, writer, content)
      const status = await response.status
      console.log(`게시글 수정 요청 결과 : ${status}`);
      alert("게시글 수정 완료!")

      // ➡ 게시글 목록으로 이동
      navigate("/boards")

    } catch (error) {
      console.log(error);
    }
  }

  const onDelete = async (no) => {
    const response = await boards.remove(no)
    const status = await response.status
    console.log(`게시글 삭제 요청 결과 : ${status}`);
    alert("삭제 완료!")

    // ➡ 게시글 목록으로 이동
    navigate("/boards")
  }

  // ❓ hook
  useEffect( () => {
    getBoard()
  }, [])

  return (
    <>
      <UpdateForm no={no} 
                  board={board} 
                  onUpdate={onUpdate}
                  onDelete={onDelete} />
    </>
  )
}

export default UpdateContainer
JavaScript
복사

pages

•

board

◦

List

◦

Read

◦

Insert

◦

Update

•

Home

board

List

import React from 'react'
import ListContainer from '../../containers/ListContainer'

const List = () => {
  return (
    <>
      {/* Header */}
      <ListContainer />
      {/* Footer */}
    </>
  )
}

export default List
JavaScript
복사

Read

import React from 'react'
import ReadContainer from '../../containers/ReadContainer'
import { useParams } from 'react-router-dom'

const Read = () => {
  // 🔗❓ 파라미터 가져오기
  const { no } = useParams()
  console.log(`no : ${no}`);
  return (
    <>
      {/* Header */}
      <ReadContainer no={no} />
      {/* Footer */}
    </>
  )
}

export default Read
JavaScript
복사

Insert

import React from 'react'
import InsertContainer from '../../containers/InsertContainer'

const Insert = () => {
  return (
    <>
      {/* Header */}
      <InsertContainer/>
      {/* Footer */}
    </>
  )
}

export default Insert
JavaScript
복사

Update

import React from 'react'
import UpdateContainer from '../../containers/UpdateContainer'
import { useParams } from 'react-router-dom'

const Update = () => {
  const { no } = useParams()
  return (
    <>
      {/* Header */}
      <UpdateContainer no={no} />
      {/* Footer */}
    </>
  )
}

export default Update
JavaScript
복사

Home

import React from 'react'
import {Link} from 'react-router-dom'
const Home = () => {
  return (
    <div className='container'>
      <h1 className='title'>메인 화면</h1>
      <h3>게시판 프로젝트</h3>
      <Link to="/boards">게시판</Link>
    </div>
  )
}

export default Home
JavaScript
복사