$$config title: React 나의 시험내용 정리 keywords: - IT - React $$ # node_project > exam_1 > App.js ```js // app.js import express, { query } from "express"; import mysql from "mysql2/promise"; import cors from "cors"; import axios from "axios"; const app = express(); app.use(cors()); app.use(express.json()); const port = 4000; const pool = mysql.createPool({ host: "localhost", user: "sbsst", password: "sbs123414", database: "a9", waitForConnections: true, connectionLimit: 10, queueLimit: 0, }); const getData = async () => { const data = await axios.get("http://localhost:3000/todos"); console.log("async awit", data); }; app.get("/todos/:id/:contentId", async (req, res) => { // params 여러개 받기 const data = { todos: { id: req.params.id, contentId: req.params.contentId, }, }; const { todos: { id, contentId }, } = data; }); app.get("/todos", async (req, res) => { const [rows] = await pool.query("SELECT * FROM todo ORDER BY id DESC"); //getData() res.json(rows); }); app.post("/todos", async (req, res) => { const { body: { text }, } = req; await pool.query( ` INSERT INTO todo SET reg_date = NOW(), perform_date = '2022-05-18 07:00:00', checked = 0, text = ?; `, [text] ); const [[rows]] = await pool.query(` SELECT * FROM todo ORDER BY id DESC LIMIT 1 `); const [newRows] = await pool.query(`SELECT * FROM todo ORDER BY id DESC`); res.json(newRows); }); app.get("/todos/:id/", async (req, res) => { //const id = req.params.id; const { id } = req.params; const { text } = req.body; const [rows] = await pool.query( ` SELECT * FROM todo WHERE id = ? `, [id] ); if (rows.length === 0) { res.status(404).json({ msg: "not found", }); return; } res.json(rows[0]); }); app.patch("/todos/:id", async (req, res) => { const { id } = req.params; const { text } = req.body; const [rows] = await pool.query( ` SELECT * FROM todo WHERE id = ? `, [id] ); if (rows.length === 0) { res.status(404).json({ msg: "not found", }); } if (!text) { res.status(400).json({ msg: "text required", }); return; } const [rs] = await pool.query( ` UPDATE todo SET text = ? WHERE id = ? `, [text, id] ); res.json({ msg: `${id}번 할일이 수정되었습니다.`, }); }); app.patch("/todos/check/:id", async (req, res) => { const { id } = req.params; const [[todoRow]] = await pool.query( ` SELECT * FROM todo WHERE id = ? `, [id] ); if (!todoRow) { res.status(404).json({ msg: "not found", }); return; } await pool.query( ` UPDATE todo SET checked = ? WHERE id = ? `, [!todoRow.checked, id] ); const [updatedTodos] = await pool.query( ` SELECT * FROM todo ORDER BY id DESC `, [id] ); res.json(updatedTodos); }); app.delete("/todos/:id", async (req, res) => { const { id } = req.params; const [[todoRow]] = await pool.query( ` SELECT * FROM todo WHERE id = ?`, [id] ); if (todoRow === undefined) { res.status(404).json({ msg: "not found", }); return; } const [rs] = await pool.query( `DELETE FROM todo WHERE id = ?`, [id] ); res.json({ msg: `${id}번 할일이 삭제되었습니다.`, }); }); app.listen(port, () => { console.log(`Example app listening on port ${port}`); }); ``` --- # react-todolist > src > App.js ```js import axios from "axios"; import React, { useEffect, useState } from "react"; import TodoEdit from "./components/TodoEdit"; import TodoInsert from "./components/TodoInsert"; import TodoList from "./components/TodoList"; import TodoTemplate from "./components/TodoTemplate"; function App() { const [todos, setTodos] = useState([]); const [insertToggle, setInsertToggle] = useState(false); const [selectedTodo, setSelectedTodo] = useState(null); const [isLoading, setIsLoading] = useState(true); const [error, setError] = useState(null); const onInsert = async (text) => { try { const data = await axios({ url: "http://localhost:4000/todos", method: "POST", data: { text }, }); setTodos(data.data); } catch (e) { setError(e); } }; const onInsertToggle = () => { setInsertToggle((prev) => !prev); }; const onRemove = async (id) => { await axios({ url: `http://localhost:4000/todos/${id}`, method: "DELETE", }); setTodos((todos) => todos.filter((todo) => todo.id !== id)); }; const onToggle = async (id) => { await axios({ url: `http://localhost:4000/todos/check/${id}`, method: "PATCH", }); setTodos((todos) => todos.map((todo) => todo.id === id ? { ...todo, checked: !todo.checked } : todo ) ); }; const onUpdate = async (id, text) => { await axios({ url: `http://localhost:4000/todos/${id}`, method: "PATCH", data: { text }, }); setTodos((todos) => todos.map((todo) => (todo.id === id ? { ...todo, text } : todo)) ); onInsertToggle(); }; useEffect(() => { const getData = async () => { try { const data = await axios({ url: "http://localhost:4000/todos", method: "GET", }); console.log(data.data); setTodos(data.data); setIsLoading(false); // throw new Error("조회중 에러발생!!"); // await new Promise((resolve, reject) => { // setTimeout(() => { // resolve() // }, 3000) // }) } catch (e) { setError(e); } }; getData(); }, []); if (error) { return <>에러: {error.message}; } if (isLoading) { return <>Loading...; } return ( {insertToggle && ( )} ); } /* */ // sdsdsdsd export default App; ``` --- # react-todolist > src > components > TodoEdit ```jsx import React, { useEffect, useState } from "react"; import "../styles/TodoEdit.scss"; const TodoEdit = ({ selectedTodo, onUpdate, onInsertToggle }) => { const [value, setValue] = useState(""); const onChange = (e) => { setValue(e.target.value); }; const onSubmit = (e) => { e.preventDefault(); onUpdate(selectedTodo.id, value); setValue(""); }; useEffect(() => { setValue(selectedTodo.text); }, [selectedTodo]); return (

{ if (e.target !== e.currentTarget) return; onInsertToggle(); }} >

); }; export default TodoEdit; ``` --- # react-todolist > src > components > TodoList ```jsx import React from "react"; import TodoListItem from "./TodoListItem"; import "../styles/TodoList.scss"; const TodoList = ({ todos, onRemove, onToggle, onInsertToggle, setSelectedTodo, }) => { return (

); })}

); }; export default TodoList; ``` --- # react-todolist > src > components > TodoListItem ```jsx import React from "react"; import { MdCheckBoxOutlineBlank, MdRemoveCircleOutline, MdCheckBox, MdModeEditOutline, } from "react-icons/md"; import cn from "classnames"; import "../styles/TodoListItem.scss"; const TodoListItem = ({ todo, onRemove, onToggle, onInsertToggle, setSelectedTodo, }) => { const { id, text, checked } = todo; //console.log(`${id}번 todolistItem에서 todo를 출력함`, todo); return (

{ onToggle(id); }} > {checked ? : }

{text}

{ onInsertToggle(); setSelectedTodo((prev) => todo); }} >

{ onRemove(id); }} >

); }; export default TodoListItem; ``` ---

수정하기