server.js
// 설치한 라이브러리를 가져온다
const express = require('express');
const app = express(); // 기본적으로 express를 사용할 수 있는 변수를 생성
// express포트 설정
const PORT = process.env.PORT || 5000;
const bodyParser = require('body-parser');
const cors = require('cors');
// config body-parser
app.use(bodyParser.json());
app.use(cors());
// mysql 데이터베이스 사용
const mysql = require('mysql');
// db 접속 정보
const db = mysql.createConnection({
host: "127.0.0.1",
user: "user_icia",
password: "1111",
port: "3306",
database: "db_icia"
});
//db접속
db.connect((err)=>{
if(!err){
console.log('db접속 성공!');
} else {
console.log('db접속 실패!');
}
});
// 서버 접속
app.listen(PORT, () => {
console.log(`Server On : http://localhost:${PORT}`);
});
// 처음 express에 접속 했을 경우
app.get('/', (req, res) => {
console.log('root!');
});
// 게시글 목록 불러오기
app.get('/list', (req, res) => {
console.log(`app.get('/list')`);
const sql = "select * from board order by id desc";
db.query(sql, (err, data) => {
if(!err){
// console.log(data);
res.send(data);
} else {
console.log(err);
}
});
});
// 게시글 상세보기
app.get('/view/:id', (req, res) => {
const id = req.params.id;
console.log(`app.get('/view/${id}')`);
const sql = "select * from board where id=?";
db.query(sql, [id], function(err, data) {
if(!err){
console.log(data);
res.send(data);
} else {
console.log(err);
}
});
});
//게시글 등록
app.post('/insert', function(req, res) {
const title=req.body.title;
const contents=req.body.contents;
const writer=req.body.writer;
console.log(title, contents, writer);
const sql='insert into board(title, contents, writer) values(?,?,?)';
db.query(sql, [title, contents, writer], function(err, data){
if(!err){
console.log(data);
res.sendStatus(200);
} else {
console.log(err);
}
});
});
//게시글 수정
app.post("/update/:id", function(req, res) {
console.log(`수정 확인!`);
const id = req.params.id;
const title=req.body.title;
const contents=req.body.contents;
const writer=req.body.writer;
console.log(id, title, contents, writer);
const sql='update board set title=?, contents=?, writer=? where id=?';
db.query(sql, [title, contents, writer, id], function(err, data){
if(!err){
console.log(data);
res.sendStatus(200);
} else {
console.log(err);
}
});
});
// 게시글 삭제
app.post('/delete/:id', (req, res) => {
});
App.js
import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import BoardMain from './component/BoardMain';
function App() {
return (
<div className="App">
<BoardMain />
</div>
);
}
export default App;BoardMain.jsx
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import BoardMain from './BoardMain';
import BoardWrite from './BoardWrite';
import BoardView from './BoardView';
import BoardList from './BoardList';
import BoardModify from './BoardModify';
const BoardMain = () => {
return (
<div id="board-main">
<BrowserRouter>
<Routes>
<Route path="/" element={<BoardList />} />
<Route path="/list" element={<BoardList />} />
<Route path="/write" element={<BoardWrite />} />
<Route path="/view/:id" element={<BoardView />} />
<Route path="/modify/:id" element={<BoardModify />} />
</Routes>
</BrowserRouter>
</div>
)
}
export default BoardMain;BoardList.jsx
import { Table, Button} from 'react-bootstrap'
import { useEffect , useState } from 'react';
import axios from 'axios';
import {Link} from 'react-router-dom'
const BoardList = () => {
const [boardList, setBoardList] = useState({});
// hook의 일종
// 마운트와 업데이트 사이
// 컴포넌트가 랜더링 될 때 , 업데이트 될 때 실행
const getBoardData = async () => {
const boards = await axios('/list');
console.log(boards);
setBoardList(boards.data);
}
useEffect(() => {
getBoardData()
}, []); //
if(boardList.length>0){
return(
<div className='board-list'>
<h1>게시글 목록</h1>
<Table striped bordered hover>
<thead>
<tr>
<th>번호</th>
<th>제목</th>
<th>작성자</th>
<th>작성일</th>
</tr>
</thead>
<tbody>
{boardList.map(boards=>(
<tr >
<td>{boards.id}</td>
<td><Link to={`/view/${boards.id}`}>{boards.title}</Link></td>
<td>{boards.writer}</td>
<td>{boards.reg_date}</td>
</tr>)
)}
</tbody>
</Table>
<Link to={`/write`} >
<Button className='mx-2 btnWrite'>작성하기</Button>
</Link>
</div>
);
}
}
export default BoardList;BoardWrite.jsx
import axios from 'axios';
import React, { useState } from 'react'
import { Row, Col, Form, Button } from 'react-bootstrap'
const BoardWrite = () => {
const [form, setForm] = useState({
title: '',
contents: '',
writer: ''
});
const { title, contents, writer } = form;
const onChange = (e) => {
setForm({
...form,
[e.target.name] : e.target.value
})
}
const onSubmit = async () => {
if (title === '') {
alert('제목을 입력하세요!');
} else if (contents === '') {
alert('내용을 입력하세요!');
} else {
if (window.confirm('게시글을 등록하시겠습니까?')) {
await axios.post('/insert', form);
window.location.href = "/list";
}
}
}
const onReset = () => {
setForm({
...form,
title: '',
contents: '',
writer: ''
});
}
return (
<Row className='my-5'>
<Col className='p-5'>
<h1 className='text-center my-5'>게시글 작성</h1>
<Form>
<h4>제목</h4><Form.Control placeholder='제목을 입력하세요.'
className='my-3' name='title' value={title} onChange={onChange} />
<h4>작성자</h4><Form.Control placeholder='작성자를 입력하세요.'
className='my-3' name='writer' value={writer} onChange={onChange} />
<h4>내용</h4><Form.Control as='textarea' rows={10} placeholder='내용을 입력하세요.'
className='my-3' name='contents' value={contents} onChange={onChange} />
<div className='text-center'>
<Button className='mx-2 px-3 btn-sm' onClick={onSubmit}>저장</Button>
<Button className='mx-2 px-3 btn-sm' onClick={onReset} variant='secondary'>초기화</Button>
</div>
</Form>
</Col>
</Row>
)
}
export default BoardWrite;
BoardView.jsx
import React, { useEffect, useState } from 'react';
import { useParams , Link } from 'react-router-dom';
import axios from 'axios';
import {Row, Col, Button, Card} from 'react-bootstrap'
const BoardView = () => {
const { id } = useParams(); // /board/:id와 동일한 변수명으로 데이터를 꺼낼 수 있습니다.
const [board, setBoard] = useState({});
const getBoard = async () => {
const board = await axios.get(`/view/${id}`);
console.log(`/view/${id}`);
setBoard(board.data[0]);
}
useEffect(() => {
getBoard();
},[]);
const onDelete = async() => {
if(window.confirm(id + '번 게시글을 삭제하시겠습니까?')) {
}
}
return (
<div className="board-view">
<Row className='my-5'>
<Col className='px-5'>
<h1 className='my-5 text-center'>{board.id}번 게시글 정보</h1>
<div className='text-end my-2'>
<Link to={`/modify/${id}`}>
<Button className='btn-sm mx-2'>수정</Button>
</Link>
<Button className='btn-sm' variant='danger'
onClick={onDelete}>삭제</Button>
</div>
<Card>
<Card.Body>
<h5>[{board.id}] {board.title}</h5>
<hr/>
<div className='cArea'>{board.contents}</div>
</Card.Body>
<Card.Footer>
Created on {board.reg_date} by {board.writer}
</Card.Footer>
</Card>
</Col>
</Row>
</div>
);
};
export default BoardView;BoardModify.jsx
import React, { useEffect, useState } from 'react';
import { useParams } from 'react-router-dom';
import axios from 'axios';
import { Row, Col, Form, Button } from 'react-bootstrap'
const BoardModify = () => {
const { id } = useParams();
const [board, setBoard] = useState({});
const getBoard = async () => {
const board = await (await axios.get(`/view/${id}`));
setBoard(board.data[0]);
};
useEffect(() => {
getBoard();
},[]);
const [form, setForm] = useState({
title: '',
contents: '',
writer: ''
});
const { title, contents, writer } = form;
const onChange = (e) => {
setForm({
...form,
[e.target.name]: e.target.value
})
}
const onReset = () => {
setForm({
...form,
title: '',
contents: '',
writer: ''
});
}
const onSubmit = async () => {
if (title === '') {
alert('제목을 입력하세요!');
} else if (contents === '') {
alert('내용을 입력하세요!');
} else {
if (window.confirm('게시글을 수정하시겠습니까?')) {
await axios.post(`/update/${id}`, form);
window.location.href = "/list";
}
}
}
return (
<Row className='my-5'>
<Col className='p-5'>
<h1 className='text-center my-5'>게시글 수정</h1>
<Form>
<h4>제목</h4> <Form.Control placeholder={board.title}
className='my-3' name='title' value={title} onChange={onChange} />
<h4>작성자</h4><Form.Control placeholder={board.writer}
className='my-3' name='writer' value={writer} onChange={onChange} />
<h4>내용</h4><Form.Control as='textarea' rows={10} placeholder={board.contents}
className='my-3' name='contents' value={contents} onChange={onChange} />
<div className='text-center'>
<Button className='mx-2 px-3 btn-sm'
onClick={onSubmit}>저장</Button>
<Button className='mx-2 px-3 btn-sm'
onClick={onReset} variant='secondary'>초기화</Button>
</div>
</Form>
</Col>
</Row>
);
};
export default BoardModify;
package.json
{
"name": "board-test",
"version": "0.1.0",
"private": true,
"proxy": "http://localhost:5000/",
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"axios": "^1.5.1",
"body-parser": "^1.20.2",
"bootstrap": "^5.3.2",
"cors": "^2.8.5",
"express": "^4.18.2",
"json": "^11.0.0",
"mysql": "^2.18.1",
"nodemon": "^3.0.1",
"react": "^18.2.0",
"react-bootstrap": "^2.9.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.16.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}'React' 카테고리의 다른 글
| 보수교육 1일차 (1) | 2024.04.27 |
|---|---|
| [React] Quick Start (0) | 2024.01.23 |
| [React] React와 express.js를 활용한 게시판 만들기(2) (0) | 2024.01.21 |
| [React] React와 express.js를 활용한 게시판 만들기(1) (0) | 2024.01.20 |
| [React] Props에 대한 설명과 예시 (0) | 2024.01.19 |
