게시판 - 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
복사