231120_React.js 개론

Notice

Recent Posts

Recent Comments

Link

« 2025/01 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

Tags more

Archives

Today

Total

관리 메뉴

거니의 velog

231120_React.js 개론 본문

대덕인재개발원/대덕인재개발원_파이썬 프로그래밍

231120_React.js 개론

Unlimited00 2023. 11. 20. 08:28

- yarn으로 package.json에 걸린 의존성 모듈을 모두 설치한다.

[index.js]

const express = require('express');
const app = express();
const mysql = require('mysql');
const cors = require('cors');
const bodyParser = require('body-parser');
const { urlencoded } = require('body-parser');
const PORT = process.env.port || 8000;

const db = mysql.createPool({
    host: "localhost",
    user: "root",
	port: 3305,
    password: "python",
    database: "python"
});

app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get("/api/get", (req, res)=>{
	console.log("/api/get");
    const sqlQuery = "SELECT * FROM simpleboard;";
    db.query(sqlQuery, (err, result)=>{
		console.log("err",err);
		console.log("result",result);
        res.send(result);
    })
})

app.post("/api/insert", (req, res) => {
	console.log("/api/insert");
    const title = req.body.title;
    const content = req.body.content;
    const sqlQuery = "INSERT INTO simpleboard (title, content) VALUES (?,?)";
    db.query(sqlQuery, [title, content], (err, result) => {
		console.log("result",result);
        res.send('success!');
    });
});

app.listen(PORT, () => {
    console.log(`running on port ${PORT}`);
});

- http://localhost:8000/api/get

{
  "name": "simple-react-board",
  "version": "0.1.0",
  "type": "module",
  "private": true,
  "dependencies": {
    "@ckeditor/ckeditor5-build-classic": "^23.1.0",
    "@ckeditor/ckeditor5-react": "^3.0.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "axios": "^0.21.0",
    "node-html-parser": "^1.4.5",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-html-parser": "^2.0.2",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.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"
    ]
  }
}

https://nodejs.org/en/about/previous-releases

Previous Releases | Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

-14, 16로 다운그레이드

[App.js]

import { useState, useEffect } from 'react';
import './App.css';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import ReactHtmlParser from 'react-html-parser';
import Axios from 'axios';

function App() {
	const [vo, setEmp] = useState({
		title: '',
		content: ''
	})

	const [list, setList] = useState([]);

	//useEffect(() => {
	//	Axios.get('http://localhost:8000/api/get').then((response) => {
	//		console.log("useEffect response",response);
	//		setList(response.data);
	//	})
	//	console.log("useEffect");
	//}, [list])

	const insertEmp = () => {
		Axios.post('http://localhost:8000/api/insert', {
			title: vo.title,
			content: vo.content
		}).then(() => {
			alert('등록 완료!');
		})
	};
	
	const refreshEmp = () => {
		Axios.get('http://localhost:8000/api/get').then((response) => {
			console.log("useEffect response",response);
			setList(response.data);
		})
	};
	
	const updateEmp = () => {
		console.log("updateEmp");
	};
	const deleteEmp = () => {
		console.log("deleteEmp");
	};
	const selectEmp = () => {
		console.log("selectEmp");
	};
	
	const getValue = e => {
		const { name, value } = e.target;
		setEmp({
			...vo,
			[name]: value
		})
	};


	return (
		<div className="App">
			<table border="1px">
				<thead>
					<tr>
						<td onClick={selectEmp}  >사번</td>
						<td>이름</td>
					</tr>
				</thead>
			
				<tbody>
				{list.map(vo =>
					<tr key="{vo.title}">
						<td>{vo.title}</td>
						<td>{ReactHtmlParser(vo.content)}</td>
					</tr>
				)}
				</tbody>
			</table>
			
			<table border="1px">
				<tbody>
					<tr>
						<td>사번</td>
						<td>
							<input type='text' onChange={getValue} name='title' />
						</td>
					</tr>
					<tr>
						<td>이름</td>
						<td>
							<input type='text' onChange={getValue} name='content' />
						</td>
					</tr>
					<tr>
						<td colSpan="2">
							<input type="button" value="추가" onClick={insertEmp} />
							<input type="button" value="수정" onClick={updateEmp} />
							<input type="button" value="삭제" onClick={deleteEmp} />
							<input type="button" value="갱신" onClick={refreshEmp} />
						</td>
					</tr>
					
				</tbody>
			</table>

		</div>
	);
}

export default App;

- http://localhost:3000/

import { useState, useEffect } from 'react';
import './App.css';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import ReactHtmlParser from 'react-html-parser';
import Axios from 'axios';

function App() {
	// Binding.
	// Flex - AS3. 처음으로 바인더블이라는 개념이 나옴.
	
	// [Bindable]
	// String a = '3';
	// 실시간으로 값이 바뀜. 
	const [vo, setEmp] = useState({
		title: '',
		content: ''
	})

	const [list, setList] = useState([]);

	//useEffect(() => {
	//	Axios.get('http://localhost:8000/api/get').then((response) => {
	//		console.log("useEffect response",response);
	//		setList(response.data);
	//	})
	//	console.log("useEffect");
	//}, [list])

	const insertEmp = () => {
		Axios.post('http://localhost:8000/api/insert', {
			title: vo.title,
			content: vo.content
		}).then(() => {
			alert('등록 완료!');
		})
	};
	
	const refreshEmp = () => {
		/*Axios.get('http://localhost:8000/api/get').then((response) => {
			console.log("useEffect response",response);
			setList(response.data);
		})*/
		
		var mylist = [
			{ title: '5', content: '5' },
			{ title: '6', content: '6' }
		];
		setList(mylist);
	};
	
	const updateEmp = () => {
		console.log("updateEmp");
	};
	const deleteEmp = () => {
		console.log("deleteEmp");
	};
	const selectEmp = () => {
		console.log("selectEmp");
	};
	
	const getValue = e => {
		const { name, value } = e.target;
		setEmp({
			...vo,
			[name]: value
		})
	};


	return (
		<div className="App">
			<table border="1px">
				<thead>
					<tr>
						<td onClick={selectEmp}  >사번</td>
						<td>이름</td>
					</tr>
				</thead>
			
				<tbody>
				{list.map(vo =>
					<tr key="{vo.title}">
						<td>{vo.title}</td>
						<td>{ReactHtmlParser(vo.content)}</td>
					</tr>
				)}
				</tbody>
			</table>
			
			<table border="1px">
				<tbody>
					<tr>
						<td>사번</td>
						<td>
							<input type='text' onChange={getValue} name='title' />
						</td>
					</tr>
					<tr>
						<td>이름</td>
						<td>
							<input type='text' onChange={getValue} name='content' />
						</td>
					</tr>
					<tr>
						<td colSpan="2">
							<input type="button" value="추가" onClick={insertEmp} />
							<input type="button" value="수정" onClick={updateEmp} />
							<input type="button" value="삭제" onClick={deleteEmp} />
							<input type="button" value="갱신" onClick={refreshEmp} />
						</td>
					</tr>
					
				</tbody>
			</table>

		</div>
	);
}

export default App;

import { useState, useEffect } from 'react';
import './App.css';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import ReactHtmlParser from 'react-html-parser';
import Axios from 'axios';

function App() {
	// Binding.
	// Flex - AS3. 처음으로 바인더블이라는 개념이 나옴.
	
	// [Bindable]
	// String a = '3';
	// 실시간으로 값이 바뀜. 
	const [vo, setEmp] = useState({
		title: '',
		content: ''
	})

	const [list, setList] = useState([]);

	//useEffect(() => {
	//	Axios.get('http://localhost:8000/api/get').then((response) => {
	//		console.log("useEffect response",response);
	//		setList(response.data);
	//	})
	//	console.log("useEffect");
	//}, [list])

	const insertEmp = () => {
		Axios.post('http://localhost:8000/api/insert', {
			title: vo.title,
			content: vo.content
		}).then(() => {
			alert('등록 완료!');
		})
	};
	
	const refreshEmp = () => {
		/*Axios.get('http://localhost:8000/api/get').then((response) => {
			console.log("useEffect response",response);
			setList(response.data);
		})*/
		
		var mylist = [
			{ title: '5', content: '5' },
			{ title: '6', content: '6' }
		];
		setList(mylist);
	};
	
	const updateEmp = () => {
		console.log("updateEmp");
	};
	const deleteEmp = () => {
		console.log("deleteEmp");
	};
	const selectEmp = () => {
		console.log("selectEmp");
	};
	
	const getValue = e => {
		const { name, value } = e.target;
		console.log("name : " + name);
		console.log("value : " + value);
		console.log("before vo : ", vo);
		setEmp({
			...vo,
			[name]: value
		})
		console.log("after vo : ", vo);
	};


	return (
		<div className="App">
			<table border="1px">
				<thead>
					<tr>
						<td onClick={selectEmp}  >사번</td>
						<td>이름</td>
					</tr>
				</thead>
			
				<tbody>
				{list.map(vo =>
					<tr key="{vo.title}">
						<td>{vo.title}</td>
						<td>{ReactHtmlParser(vo.content)}</td>
					</tr>
				)}
				</tbody>
			</table>
			
			<table border="1px">
				<tbody>
					<tr>
						<td>사번</td>
						<td>
							<input type='text' onChange={getValue} name='title' />
						</td>
					</tr>
					<tr>
						<td>이름</td>
						<td>
							<input type='text' onChange={getValue} name='content' />
						</td>
					</tr>
					<tr>
						<td colSpan="2">
							<input type="button" value="추가" onClick={insertEmp} />
							<input type="button" value="수정" onClick={updateEmp} />
							<input type="button" value="삭제" onClick={deleteEmp} />
							<input type="button" value="갱신" onClick={refreshEmp} />
						</td>
					</tr>
					
				</tbody>
			</table>

		</div>
	);
}

export default App;

const express = require('express');
const app = express();
const mysql = require('mysql');
const cors = require('cors');
const bodyParser = require('body-parser');
const { urlencoded } = require('body-parser');
const PORT = process.env.port || 8000;

const db = mysql.createPool({
    host: "localhost",
    user: "root",
	port: 3305,
    password: "python",
    database: "python"
});

app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get("/api/get", (req, res)=>{
	console.log("/api/get");
    const sqlQuery = "SELECT * FROM simpleboard";
    db.query(sqlQuery, (err, result)=>{
		console.log("err",err);
		console.log("result",result);
        res.send(result);
    })
})

app.post("/api/insert", (req, res) => {
	console.log("/api/insert");
    const title = req.body.title;
    const content = req.body.content;
    const sqlQuery = "INSERT INTO simpleboard (title, content) VALUES (?,?)";
    db.query(sqlQuery, [title, content], (err, result) => {
		console.log("err", err);
		console.log("result", result);
        res.send('success!');
    });
});

app.get("/emp/select_list", (req, res)=>{
	console.log("/emp/select_list");
    const sqlQuery = "SELECT * FROM emp";
    db.query(sqlQuery, (err, result)=>{
		console.log("err", err);
		console.log("result", result);
        res.send(result);
    })
})

app.post("/emp/insert", (req, res) => {
	console.log("/emp/insert");
    const e_id = req.body.e_id;
    const e_name = req.body.e_name;
    const gen = req.body.gen;
    const addr = req.body.addr;
    const sqlQuery = "INSERT INTO emp (e_id, e_name, gen, addr) VALUES (?,?,?,?)";
    db.query(sqlQuery, [e_id, e_name, gen, addr], (err, result) => {
		console.log("err", err);
		console.log("result", result);
        res.send('success!');
    });
});

app.listen(PORT, () => {
    console.log(`running on port ${PORT}`);
});

import { useState, useEffect } from 'react';
import './App.css';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import ReactHtmlParser from 'react-html-parser';
import Axios from 'axios';

function App() {
	// Binding.
	// Flex - AS3. 처음으로 바인더블이라는 개념이 나옴.
	
	// [Bindable]
	// String a = '3';
	// 실시간으로 값이 바뀜. 
	const [vo, setEmp] = useState({
		e_id: '',
		e_name: '',
		gen: '',
		addr: ''
	})

	const [list, setList] = useState([]);

	//useEffect(() => {
	//	Axios.get('http://localhost:8000/api/get').then((response) => {
	//		console.log("useEffect response",response);
	//		setList(response.data);
	//	})
	//	console.log("useEffect");
	//}, [list])

	const insertEmp = () => {
		Axios.post('http://localhost:8000/api/insert', {
			e_id: vo.e_id,
			e_name: vo.e_name,
			gen: vo.gen,
			addr: vo.addr,
		}).then(() => {
			alert('등록 완료!');
		})
	};
	
	const refreshEmp = () => {
		Axios.get('http://localhost:8000/emp/select_list').then((response) => {
			console.log("useEffect response",response);
			setList(response.data);
		})
	};
	
	const updateEmp = () => {
		console.log("updateEmp");
	};
	
	const deleteEmp = () => {
		console.log("deleteEmp");
	};
	
	const selectEmp = () => {
		console.log("selectEmp");
	};
	
	const getValue = e => {
		const { name, value } = e.target;
		setEmp({
			...vo,
			[name]: value
		})
	};


	return (
		<div className="App">
			<table border="1px">
				<thead>
					<tr>
						<td>사번</td>
						<td>이름</td>
						<td>성별</td>
						<td>주소</td>
					</tr>
				</thead>
			
				<tbody>
				{list.map(vo =>
					<tr key="{vo.e_id}">
						<td onClick={selectEmp}>{vo.e_id}</td>
						<td>{vo.e_name}</td>
						<td>{vo.gen}</td>
						<td>{vo.addr}</td>
					</tr>
				)}
				</tbody>
			</table>
			
			<table border="1px">
				<tbody>
					<tr>
						<td>사번</td>
						<td>
							<input type='text' onChange={getValue} name='e_id' />
						</td>
					</tr>
					<tr>
						<td>이름</td>
						<td>
							<input type='text' onChange={getValue} name='e_name' />
						</td>
					</tr>
					<tr>
						<td>성별</td>
						<td>
							<input type='text' onChange={getValue} name='gen' />
						</td>
					</tr>
					<tr>
						<td>주소</td>
						<td>
							<input type='text' onChange={getValue} name='addr' />
						</td>
					</tr>
					<tr>
						<td colSpan="2">
							<input type="button" value="추가" onClick={insertEmp} />
							<input type="button" value="수정" onClick={updateEmp} />
							<input type="button" value="삭제" onClick={deleteEmp} />
							<input type="button" value="갱신" onClick={refreshEmp} />
						</td>
					</tr>
					
				</tbody>
			</table>

		</div>
	);
}

export default App;

- http://localhost:3000/

const express = require('express');
const app = express();
const mysql = require('mysql');
const cors = require('cors');
const bodyParser = require('body-parser');
const { urlencoded } = require('body-parser');
const PORT = process.env.port || 8000;

const db = mysql.createPool({
    host: "localhost",
    user: "root",
	port: 3305,
    password: "python",
    database: "python"
});

app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get("/api/get", (req, res)=>{
	console.log("/api/get");
    const sqlQuery = "SELECT * FROM simpleboard";
    db.query(sqlQuery, (err, result)=>{
		console.log("err",err);
		console.log("result",result);
        res.send(result);
    })
})

app.post("/api/insert", (req, res) => {
	console.log("/api/insert");
    const title = req.body.title;
    const content = req.body.content;
    const sqlQuery = "INSERT INTO simpleboard (title, content) VALUES (?,?)";
    db.query(sqlQuery, [title, content], (err, result) => {
		console.log("err", err);
		console.log("result", result);
        res.send('success!');
    });
});

app.get("/emp/select_list", (req, res)=>{
	console.log("/emp/select_list");
    const sqlQuery = "SELECT * FROM emp";
    db.query(sqlQuery, (err, result)=>{
		console.log("err", err);
		console.log("result", result);
        res.send(result);
    })
});

app.post("/emp/select_one", (req, res)=>{
	console.log("/emp/select_one");
	const e_id = req.body.e_id;
    const sqlQuery = "SELECT * FROM emp WHERE e_id = ?";
    db.query(sqlQuery, [e_id], (err, result)=>{
		console.log("err", err);
		console.log("result", result);
        res.send(result);
    })
});

app.listen(PORT, () => {
    console.log(`running on port ${PORT}`);
});

import { useState, useEffect } from 'react';
import './App.css';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import ReactHtmlParser from 'react-html-parser';
import Axios from 'axios';

function App() {
	// Binding.
	// Flex - AS3. 처음으로 바인더블이라는 개념이 나옴.
	
	// [Bindable]
	// String a = '3';
	// 실시간으로 값이 바뀜. 
	const [vo, setEmp] = useState({
		e_id: '',
		e_name: '',
		gen: '',
		addr: ''
	})

	const [list, setList] = useState([]);

	//useEffect(() => {
	//	Axios.get('http://localhost:8000/api/get').then((response) => {
	//		console.log("useEffect response",response);
	//		setList(response.data);
	//	})
	//	console.log("useEffect");
	//}, [list])

	const insertEmp = () => {
		Axios.post('http://localhost:8000/api/insert', {
			e_id: vo.e_id,
			e_name: vo.e_name,
			gen: vo.gen,
			addr: vo.addr,
		}).then(() => {
			alert('등록 완료!');
		})
	};
	
	const refreshEmp = () => {
		Axios.get('http://localhost:8000/emp/select_list').then((response) => {
			console.log("useEffect response",response);
			setList(response.data);
		})
	};
	
	const updateEmp = () => {
		console.log("updateEmp");
		
	};
	
	const deleteEmp = () => {
		console.log("deleteEmp");
		
	};
	
	const selectEmp = e => {
		var e_id = e.target.innerHTML;
		
		Axios.post('http://localhost:8000/emp/select_one', {
			e_id: e_id
		}).then((response) => {
			console.log(response);
		})
	};
	
	const getValue = e => {
		const { name, value } = e.target;
		setEmp({
			...vo,
			[name]: value
		})
	};


	return (
		<div className="App">
			<table border="1px">
				<thead>
					<tr>
						<td>사번</td>
						<td>이름</td>
						<td>성별</td>
						<td>주소</td>
					</tr>
				</thead>
			
				<tbody>
				{list.map(vo =>
					<tr key="{vo.e_id}">
						<td onClick={selectEmp}>{vo.e_id}</td>
						<td>{vo.e_name}</td>
						<td>{vo.gen}</td>
						<td>{vo.addr}</td>
					</tr>
				)}
				</tbody>
			</table>
			
			<table border="1px">
				<tbody>
					<tr>
						<td>사번</td>
						<td>
							<input type='text' onChange={getValue} name='e_id' />
						</td>
					</tr>
					<tr>
						<td>이름</td>
						<td>
							<input type='text' onChange={getValue} name='e_name' />
						</td>
					</tr>
					<tr>
						<td>성별</td>
						<td>
							<input type='text' onChange={getValue} name='gen' />
						</td>
					</tr>
					<tr>
						<td>주소</td>
						<td>
							<input type='text' onChange={getValue} name='addr' />
						</td>
					</tr>
					<tr>
						<td colSpan="2">
							<input type="button" value="추가" onClick={insertEmp} />
							<input type="button" value="수정" onClick={updateEmp} />
							<input type="button" value="삭제" onClick={deleteEmp} />
							<input type="button" value="갱신" onClick={refreshEmp} />
						</td>
					</tr>
					
				</tbody>
			</table>

		</div>
	);
}

export default App;

const express = require('express');
const app = express();
const mysql = require('mysql');
const cors = require('cors');
const bodyParser = require('body-parser');
const { urlencoded } = require('body-parser');
const PORT = process.env.port || 8000;

const db = mysql.createPool({
    host: "localhost",
    user: "root",
	port: 3305,
    password: "python",
    database: "python"
});

app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get("/api/get", (req, res)=>{
	console.log("/api/get");
    const sqlQuery = "SELECT * FROM simpleboard";
    db.query(sqlQuery, (err, result)=>{
		console.log("err",err);
		console.log("result",result);
        res.send(result);
    })
})

app.post("/api/insert", (req, res) => {
	console.log("/api/insert");
    const title = req.body.title;
    const content = req.body.content;
    const sqlQuery = "INSERT INTO simpleboard (title, content) VALUES (?,?)";
    db.query(sqlQuery, [title, content], (err, result) => {
		console.log("err", err);
		console.log("result", result);
        res.send('success!');
    });
});

app.get("/emp/select_list", (req, res)=>{
	console.log("/emp/select_list");
    const sqlQuery = "SELECT * FROM emp";
    db.query(sqlQuery, (err, result)=>{
		console.log("err", err);
		console.log("result", result);
        res.send(result);
    })
});

app.post("/emp/select_one", (req, res)=>{
	console.log("/emp/select_one");
	const e_id = req.body.e_id;
    const sqlQuery = "SELECT * FROM emp WHERE e_id = ?";
    db.query(sqlQuery, [e_id], (err, result)=>{
		console.log("err", err);
		console.log("result", result);
        res.send(result);
    })
});

app.listen(PORT, () => {
    console.log(`running on port ${PORT}`);
});

import { useState, useEffect } from 'react';
import './App.css';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import ReactHtmlParser from 'react-html-parser';
import Axios from 'axios';

function App() {
	// Binding.
	// Flex - AS3. 처음으로 바인더블이라는 개념이 나옴.
	
	// [Bindable]
	// String a = '3';
	// 실시간으로 값이 바뀜. 
	const [vo, setEmp] = useState({
		e_id: '',
		e_name: '',
		gen: '',
		addr: ''
	})

	const [list, setList] = useState([]);
	const [data, setData] = useState([]);

	//useEffect(() => {
	//	Axios.get('http://localhost:8000/api/get').then((response) => {
	//		console.log("useEffect response",response);
	//		setList(response.data);
	//	})
	//	console.log("useEffect");
	//}, [list])

	const insertEmp = () => {
		Axios.post('http://localhost:8000/api/insert', {
			e_id: vo.e_id,
			e_name: vo.e_name,
			gen: vo.gen,
			addr: vo.addr,
		}).then(() => {
			alert('등록 완료!');
		})
	};
	
	const refreshEmp = () => {
		Axios.get('http://localhost:8000/emp/select_list').then((response) => {
			console.log("useEffect response",response);
			setList(response.data);
		})
	};
	
	const updateEmp = () => {
		console.log("updateEmp");
		
	};
	
	const deleteEmp = () => {
		console.log("deleteEmp");
		
	};
	
	const selectEmp = e => {
		var e_id = e.target.innerHTML;
		
		Axios.post('http://localhost:8000/emp/select_one', {
			e_id: e_id
		}).then((response) => {
			console.log(response);
			console.log(response.data[0]);
			setData(response.data[0]);
		})
	};
	
	const getValue = e => {
		const { name, value } = e.target;
		setEmp({
			...vo,
			[name]: value
		})
	};


	return (
		<div className="App">
			<table border="1px">
				<thead>
					<tr>
						<td>사번</td>
						<td>이름</td>
						<td>성별</td>
						<td>주소</td>
					</tr>
				</thead>
			
				<tbody>
				{list.map(vo =>
					<tr key="{vo.e_id}">
						<td onClick={selectEmp}>{vo.e_id}</td>
						<td>{vo.e_name}</td>
						<td>{vo.gen}</td>
						<td>{vo.addr}</td>
					</tr>
				)}
				</tbody>
			</table>
			
			<table border="1px">
				<tbody>
					<tr>
						<td>사번</td>
						<td>
							<input type='text' onChange={getValue} name='e_id' value={data.e_id} />
						</td>
					</tr>
					<tr>
						<td>이름</td>
						<td>
							<input type='text' onChange={getValue} name='e_name' value={data.e_name} />
						</td>
					</tr>
					<tr>
						<td>성별</td>
						<td>
							<input type='text' onChange={getValue} name='gen' value={data.gen} />
						</td>
					</tr>
					<tr>
						<td>주소</td>
						<td>
							<input type='text' onChange={getValue} name='addr' value={data.addr} />
						</td>
					</tr>
					<tr>
						<td colSpan="2">
							<input type="button" value="추가" onClick={insertEmp} />
							<input type="button" value="수정" onClick={updateEmp} />
							<input type="button" value="삭제" onClick={deleteEmp} />
							<input type="button" value="갱신" onClick={refreshEmp} />
						</td>
					</tr>
					
				</tbody>
			</table>

		</div>
	);
}

export default App;

import { useState, useEffect } from 'react';
import './App.css';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import ReactHtmlParser from 'react-html-parser';
import Axios from 'axios';

function App() {
	// Binding.
	// Flex - AS3. 처음으로 바인더블이라는 개념이 나옴.
	
	// [Bindable]
	// String a = '3';
	// 실시간으로 값이 바뀜. 
	const [vo, setEmp] = useState({
		e_id: '',
		e_name: '',
		gen: '',
		addr: ''
	})

	const [list, setList] = useState([]);
	const [data, setData] = useState([]);

	//useEffect(() => {
	//	Axios.get('http://localhost:8000/api/get').then((response) => {
	//		console.log("useEffect response",response);
	//		setList(response.data);
	//	})
	//	console.log("useEffect");
	//}, [list])

	const insertEmp = () => {
		Axios.post('http://localhost:8000/emp/insert', {
			e_id: vo.e_id,
			e_name: vo.e_name,
			gen: vo.gen,
			addr: vo.addr,
		}).then(() => {
			alert('등록 완료!');
		})
	};
	
	const refreshEmp = () => {
		Axios.get('http://localhost:8000/emp/select_list').then((response) => {
			console.log("useEffect response",response);
			setList(response.data);
		})
	};
	
	const updateEmp = () => {
		console.log("updateEmp");
		
	};
	
	const deleteEmp = () => {
		console.log("deleteEmp");
		
	};
	
	const selectEmp = e => {
		var e_id = e.target.innerHTML;
		
		Axios.post('http://localhost:8000/emp/select_one', {
			e_id: e_id
		}).then((response) => {
			console.log(response.data);
			var vo = response.data[0];
			document.querySelector("input[name='e_id']").value = vo.e_id;
			document.querySelector("input[name='e_name']").value = vo.e_name;
			document.querySelector("input[name='gen']").value = vo.gen;
			document.querySelector("input[name='addr']").value = vo.addr;
		})
	};
	
	const getValue = e => {
		const { name, value } = e.target;
		setEmp({
			...vo,
			[name]: value
		})
	};


	return (
		<div className="App">
			<table border="1px">
				<thead>
					<tr>
						<td>사번</td>
						<td>이름</td>
						<td>성별</td>
						<td>주소</td>
					</tr>
				</thead>
			
				<tbody>
				{list.map(vo =>
					<tr key="{vo.e_id}">
						<td onClick={selectEmp}>{vo.e_id}</td>
						<td>{vo.e_name}</td>
						<td>{vo.gen}</td>
						<td>{vo.addr}</td>
					</tr>
				)}
				</tbody>
			</table>
			
			<table border="1px">
				<tbody>
					<tr>
						<td>사번</td>
						<td>
							<input type='text' onChange={getValue} name='e_id' />
						</td>
					</tr>
					<tr>
						<td>이름</td>
						<td>
							<input type='text' onChange={getValue} name='e_name' />
						</td>
					</tr>
					<tr>
						<td>성별</td>
						<td>
							<input type='text' onChange={getValue} name='gen' />
						</td>
					</tr>
					<tr>
						<td>주소</td>
						<td>
							<input type='text' onChange={getValue} name='addr' />
						</td>
					</tr>
					<tr>
						<td colSpan="2">
							<input type="button" value="추가" onClick={insertEmp} />
							<input type="button" value="수정" onClick={updateEmp} />
							<input type="button" value="삭제" onClick={deleteEmp} />
							<input type="button" value="갱신" onClick={refreshEmp} />
						</td>
					</tr>
					
				</tbody>
			</table>

		</div>
	);
}

export default App;

- 이런 방법도 있다...

const express = require('express');
const app = express();
const mysql = require('mysql');
const cors = require('cors');
const bodyParser = require('body-parser');
const { urlencoded } = require('body-parser');
const PORT = process.env.port || 8000;

const db = mysql.createPool({
    host: "localhost",
    user: "root",
	port: 3305,
    password: "python",
    database: "python"
});

app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get("/api/get", (req, res)=>{
	console.log("/api/get");
    const sqlQuery = "SELECT * FROM simpleboard";
    db.query(sqlQuery, (err, result)=>{
		console.log("err",err);
		console.log("result",result);
        res.send(result);
    })
})

app.post("/emp/insert", (req, res) => {
	console.log("/emp/insert");
    const e_id = req.body.e_id;
    const e_name = req.body.e_name;
    const gen = req.body.gen;
    const addr = req.body.addr;
    const sqlQuery = "INSERT INTO emp (e_id, e_name, gen, addr) VALUES (?,?,?,?)";
    db.query(sqlQuery, [e_id, e_name, gen, addr], (err, result) => {
		console.log(result.affectedRows);
        res.send(result.affectedRows);
    });
});

app.get("/emp/select_list", (req, res)=>{
	console.log("/emp/select_list");
    const sqlQuery = "SELECT * FROM emp";
    db.query(sqlQuery, (err, result)=>{
		console.log("err", err);
		console.log("result", result);
        res.send(result);
    })
});

app.post("/emp/select_one", (req, res)=>{
	console.log("/emp/select_one");
	const e_id = req.body.e_id;
    const sqlQuery = "SELECT * FROM emp WHERE e_id = ?";
    db.query(sqlQuery, [e_id], (err, result)=>{
		console.log("err", err);
		console.log("result", result);
        res.send(result);
    })
});

app.listen(PORT, () => {
    console.log(`running on port ${PORT}`);
});

import { useState, useEffect } from 'react';
import './App.css';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import ReactHtmlParser from 'react-html-parser';
import Axios from 'axios';

function App() {
	// Binding.
	// Flex - AS3. 처음으로 바인더블이라는 개념이 나옴.
	
	// [Bindable]
	// String a = '3';
	// 실시간으로 값이 바뀜. 
	const [vo, setEmp] = useState({
		e_id: '',
		e_name: '',
		gen: '',
		addr: ''
	})

	const [list, setList] = useState([]);

	//useEffect(() => {
	//	Axios.get('http://localhost:8000/api/get').then((response) => {
	//		console.log("useEffect response",response);
	//		setList(response.data);
	//	})
	//	console.log("useEffect");
	//}, [list])

	const insertEmp = () => {
		var e_id = document.querySelector("input[name='e_id']").value;
		var e_name = document.querySelector("input[name='e_name']").value;
		var gen = document.querySelector("input[name='gen']").value;
		var addr = document.querySelector("input[name='addr']").value;
		
		Axios.post('http://localhost:8000/emp/select_one', {
			e_id: e_id,
			e_name: e_name,
			gen: gen,
			addr: addr
		}).then((response) => {
			console.log(response.data);
			var vo = response.data[0];
			document.querySelector("input[name='e_id']").value = vo.e_id;
			document.querySelector("input[name='e_name']").value = vo.e_name;
			document.querySelector("input[name='gen']").value = vo.gen;
			document.querySelector("input[name='addr']").value = vo.addr;
		})
	};
	
	const refreshEmp = () => {
		Axios.get('http://localhost:8000/emp/select_list').then((response) => {
			console.log("useEffect response",response);
			setList(response.data);
		})
	};
	
	const updateEmp = () => {
		console.log("updateEmp");
		
	};
	
	const deleteEmp = () => {
		console.log("deleteEmp");
		
	};
	
	const selectEmp = e => {
		var e_id = e.target.innerHTML;
		
		Axios.post('http://localhost:8000/emp/select_one', {
			e_id: e_id
		}).then((response) => {
			console.log(response.data);
			var vo = response.data[0];
			document.querySelector("input[name='e_id']").value = vo.e_id;
			document.querySelector("input[name='e_name']").value = vo.e_name;
			document.querySelector("input[name='gen']").value = vo.gen;
			document.querySelector("input[name='addr']").value = vo.addr;
		})
	};
	
	const getValue = e => {
		const { name, value } = e.target;
		setEmp({
			...vo,
			[name]: value
		})
	};


	return (
		<div className="App">
			<table border="1px">
				<thead>
					<tr>
						<td>사번</td>
						<td>이름</td>
						<td>성별</td>
						<td>주소</td>
					</tr>
				</thead>
			
				<tbody>
				{list.map(vo =>
					<tr key="{vo.e_id}">
						<td onClick={selectEmp}>{vo.e_id}</td>
						<td>{vo.e_name}</td>
						<td>{vo.gen}</td>
						<td>{vo.addr}</td>
					</tr>
				)}
				</tbody>
			</table>
			
			<table border="1px">
				<tbody>
					<tr>
						<td>사번</td>
						<td>
							<input type='text' onChange={getValue} name='e_id' />
						</td>
					</tr>
					<tr>
						<td>이름</td>
						<td>
							<input type='text' onChange={getValue} name='e_name' />
						</td>
					</tr>
					<tr>
						<td>성별</td>
						<td>
							<input type='text' onChange={getValue} name='gen' />
						</td>
					</tr>
					<tr>
						<td>주소</td>
						<td>
							<input type='text' onChange={getValue} name='addr' />
						</td>
					</tr>
					<tr>
						<td colSpan="2">
							<input type="button" value="추가" onClick={insertEmp} />
							<input type="button" value="수정" onClick={updateEmp} />
							<input type="button" value="삭제" onClick={deleteEmp} />
							<input type="button" value="갱신" onClick={refreshEmp} />
						</td>
					</tr>
					
				</tbody>
			</table>

		</div>
	);
}

export default App;

const express = require('express');
const app = express();
const mysql = require('mysql');
const cors = require('cors');
const bodyParser = require('body-parser');
const { urlencoded } = require('body-parser');
const PORT = process.env.port || 8000;

const db = mysql.createPool({
    host: "localhost",
    user: "root",
	port: 3305,
    password: "python",
    database: "python"
});

app.use(cors());
app.use(express.json());
app.use(bodyParser.urlencoded({ extended: true }));

app.get("/api/get", (req, res)=>{
	console.log("/api/get");
    const sqlQuery = "SELECT * FROM simpleboard";
    db.query(sqlQuery, (err, result)=>{
		console.log("err",err);
		console.log("result",result);
        res.send(result);
    })
})

app.post("/emp/insert", (req, res)=>{
	console.log("/emp/insert");
	const e_id = req.body.e_id;
	const e_name = req.body.e_name;
	const gen = req.body.gen;
	const addr = req.body.addr;
	console.log(e_id);
	
    const sqlQuery = `
		insert into emp
		(e_id,e_name,gen,addr)
		values
		('${e_id}','${e_name}','${gen}','${addr}')
	`;
	db.query(sqlQuery, (err, result) => {
		var cnt = result.affectedRows;
        res.send(cnt+"");
    });

})

app.get("/emp/select_list", (req, res)=>{
	console.log("/emp/select_list");
    const sqlQuery = "SELECT * FROM emp";
    db.query(sqlQuery, (err, result)=>{
		console.log("result",result);
        res.send(result);
    })
});

app.post("/emp/select_one", (req, res)=>{
	console.log("/emp/select_one");
	const e_id = req.body.e_id;
    const sqlQuery = "SELECT * FROM emp WHERE e_id = ?";
    db.query(sqlQuery, [e_id], (err, result)=>{
		console.log("err", err);
		console.log("result", result);
        res.send(result);
    })
});

app.post("/emp/delete", (req, res) => {
	console.log("/emp/delete");
    const e_id = req.body.e_id;
    const sqlQuery = "DELETE FROM emp WHERE e_id = ?";
    db.query(sqlQuery, [e_id], (err, result) => {
		console.log(result.affectedRows);
		var cnt = result.affectedRows;
        res.send(cnt+"");
    });
});

app.listen(PORT, () => {
    console.log(`running on port ${PORT}`);
});

import { useState, useEffect } from 'react';
import './App.css';
import { CKEditor } from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';
import ReactHtmlParser from 'react-html-parser';
import Axios from 'axios';

function App() {
	// Binding.
	// Flex - AS3. 처음으로 바인더블이라는 개념이 나옴.
	
	// [Bindable]
	// String a = '3';
	// 실시간으로 값이 바뀜. 
	const [vo, setEmp] = useState({
		e_id: '',
		e_name: '',
		gen: '',
		addr: ''
	})

	const [list, setList] = useState([]);

	//useEffect(() => {
	//	Axios.get('http://localhost:8000/api/get').then((response) => {
	//		console.log("useEffect response",response);
	//		setList(response.data);
	//	})
	//	console.log("useEffect");
	//}, [list])

	const insertEmp = () => {
		var e_id = document.querySelector("input[name='e_id']").value;
		var e_name = document.querySelector("input[name='e_name']").value;
		var gen = document.querySelector("input[name='gen']").value;
		var addr = document.querySelector("input[name='addr']").value;
		
		Axios.post('http://localhost:8000/emp/insert',{
			e_id: e_id,
			e_name: e_name,
			gen: gen,
			addr: addr
		}).then((response) => {
			var cnt = response.data;
			if(cnt == 1){
				refreshEmp();
				document.querySelector("input[name='e_id']").value="";
				document.querySelector("input[name='e_name']").value="";
				document.querySelector("input[name='gen']").value="";
				document.querySelector("input[name='addr']").value="";
			}
		})
	};
	
	const refreshEmp = () => {
		Axios.get('http://localhost:8000/emp/select_list').then((response) => {
			console.log("useEffect response",response);
			setList(response.data);
		})
	};
	
	const updateEmp = () => {
		console.log("updateEmp");
		
	};
	
	const deleteEmp = () => {
		var e_id = document.querySelector("input[name='e_id']").value;
		
		Axios.post('http://localhost:8000/emp/delete', {
			e_id: e_id
		}).then((response) => {
			console.log(response);
			var cnt = response.data;
			if(cnt == 1){
				refreshEmp();
				document.querySelector("input[name='e_id']").value = "";
				document.querySelector("input[name='e_name']").value = "";
				document.querySelector("input[name='gen']").value = "";
				document.querySelector("input[name='addr']").value = "";
			}
		})
	};
	
	const selectEmp = e => {
		var e_id = e.target.innerHTML;
		
		Axios.post('http://localhost:8000/emp/select_one', {
			e_id: e_id
		}).then((response) => {
			console.log(response.data);
			var vo = response.data[0];
			document.querySelector("input[name='e_id']").value = vo.e_id;
			document.querySelector("input[name='e_name']").value = vo.e_name;
			document.querySelector("input[name='gen']").value = vo.gen;
			document.querySelector("input[name='addr']").value = vo.addr;
		})
	};
	
	const getValue = e => {
		const { name, value } = e.target;
		setEmp({
			...vo,
			[name]: value
		})
	};


	return (
		<div className="App">
			<table border="1px">
				<thead>
					<tr>
						<td>사번</td>
						<td>이름</td>
						<td>성별</td>
						<td>주소</td>
					</tr>
				</thead>
			
				<tbody>
				{list.map(vo =>
					<tr key="{vo.e_id}">
						<td onClick={selectEmp}>{vo.e_id}</td>
						<td>{vo.e_name}</td>
						<td>{vo.gen}</td>
						<td>{vo.addr}</td>
					</tr>
				)}
				</tbody>
			</table>
			
			<table border="1px">
				<tbody>
					<tr>
						<td>사번</td>
						<td>
							<input type='text' onChange={getValue} name='e_id' />
						</td>
					</tr>
					<tr>
						<td>이름</td>
						<td>
							<input type='text' onChange={getValue} name='e_name' />
						</td>
					</tr>
					<tr>
						<td>성별</td>
						<td>
							<input type='text' onChange={getValue} name='gen' />
						</td>
					</tr>
					<tr>
						<td>주소</td>
						<td>
							<input type='text' onChange={getValue} name='addr' />
						</td>
					</tr>
					<tr>
						<td colSpan="2">
							<input type="button" value="추가" onClick={insertEmp} />
							<input type="button" value="수정" onClick={updateEmp} />
							<input type="button" value="삭제" onClick={deleteEmp} />
							<input type="button" value="갱신" onClick={refreshEmp} />
						</td>
					</tr>
					
				</tbody>
			</table>

		</div>
	);
}

export default App;

'대덕인재개발원 > 대덕인재개발원_파이썬 프로그래밍' 카테고리의 다른 글

231117_Node.js 개론 3 (0)	2023.11.17
00_기타 자료실 (0)	2023.11.16
231116_Node.js 개론 2 (0)	2023.11.16
231115_Node.js 개론 1 (0)	2023.11.15
231114_Django 개론 5 (0)	2023.11.14

'대덕인재개발원/대덕인재개발원_파이썬 프로그래밍' Related Articles

거니의 velog

231120_React.js 개론 본문

231120_React.js 개론

'대덕인재개발원 > 대덕인재개발원_파이썬 프로그래밍' 카테고리의 다른 글

티스토리툴바