$$config title: [프로젝트] 명언 게시판 만들기 keywords: - IT - 리엑트 - express $$ # 1. VScode(js) ```js import express from "express"; import mysql from "mysql2/promise"; import cors from "cors"; const pool = mysql.createPool({ host: "localhost", user: "", password: "", database: "a10", waitForConnections: true, connectionLimit: 10, queueLimit: 0, }); const app = express(); const port = 3000; app.use(express.json()); const corsOptions = { origin: "https://cdpn.io", optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204 }; app.use(cors(corsOptions)); app.get("/todos", async (req, res) => { const [[rows]] = await pool.query( `SELECT * FROM todo ORDER BY RAND() LIMIT 1` ); await pool.query(`UPDATE todo SET hit = hit + 1 WHERE id = ?`, [rows.id]); rows.hit++; res.json([rows]); }); app.patch("/todos", async (req, res) => { const { id, like, dislike } = req.body; const [rs] = await pool.query( `UPDATE todo SET \`like\` = \`like\`+ ?, dislike = dislike + ? WHERE id = ?`, [like, dislike, id] ); res.json(); }); app.listen(port); ``` - get : 데이터를 조회한다. 조회시 조회수를 1 증가시킨다. - patch : 리엑트에서 받아온 좋아요/싫어요 값을 기존 값과 더해서 저장한다 (리액트 특성상 새로만든다고 해도 DB에 저장해서 좋아요/싫어요 수는 문제 없다.) git : https://to2.kr/dIZ # 2. 리액트 ```js console.clear(); import React, { useState, useEffect } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; import axios from "https://cdn.skypack.dev/axios"; function App() { const [imgs, setImgs] = useState([]); const [page, setPage] = useState(1); const [like, setLike] = useState(0); const [dislike, setDislike] = useState(0); let row_id; useEffect(async () => { await axios.patch(`http://localhost:3000/todos`, { id: row_id, like: like, dislike: dislike }); const data = await fetch(`http://localhost:3000/todos`); const json = await data.json(); setLike(0); setDislike(0); setImgs(json); }, [page]); for (const row of imgs) { row_id = row.id; } const loadNew = function () { setPage(page + 1); }; const loadLike = function () { setLike(like + 1); }; const loadDislike = function () { setDislike(dislike + 1); }; return ( <> {imgs.map((img, index) => (

{img.id} , {img.regDate} / {img.talk} [{img.name}]

조회수 : {img.hit}

{img.like + like} {img.dislike + dislike}

))} ); } ReactDOM.render(, document.getElementById("root")); ``` - axio 사용 : 실무에서는 fetch 보다는 axio를 더 많이 사용한다. 또한 axio가 쓰기 더욱 편하기 때문에 axio를 사용하였다. - for (const row of imgs) : 이미지의 값을 row에 저장한다 -> 받은 값은 객체지만 key, value 나눠서 받을라고 했더니 오류가 발생해서 사용함. - useEffect() : 리액트 컴포넌트가 렌더링 될 때 마다 특정 작업을 실행 할 수 있도록 함. -> \[page] 배열을 수행 할 수 있도록 함. - axio.patch(주소){body} : id, like, dislike 값을 전송함 -> vscode에서 patch의 쿼리가 실행됨 -> 좋아요 싫어요 수 반영 - imgs.map((img, index)) : 어디서든 키값으로 value를 받을 수 있도록 전체를 묶어줬음 (UI를 쉽게 정리 가능함) - img.like + like / img.dislike + dislike : 버튼을 눌렀으나 아직 반영은 안되었음 그러나 시각적으로는 올라가도록 설정함. (새로고침을 누르면 DB에 적용됨.) code pen : https://codepen.io/denist2322/pen/LYQzzXX # 추가 axios 가 아닌 petch로도 실행이 가능하다. ```js await fetch(`http://localhost:3000/todos`, { method: "PATCH", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: row_id, like: like, dislike: dislike }), }); ``` 다음 소스를 이용하면 axios를 이용하지 않아도 fetch를 통해서 사용이 가능하다. # 구현영상 $$youtube sJTaZJ5CZCA $$