[React/express/MySQL]명언 게시판

1. VScode(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. 리액트

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 [view, setView] = 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) => (
        <div key={index}>
          <div>
            <button onClick={loadNew}>새로고침</button>
            &nbsp;
          </div>
          <hr />
          <ul>
            <li>
              {img.id} , {img.regDate} / {img.talk} [{img.name}]
            </li>
          </ul>
          <hr />
          <div> 조회수 : {img.hit} </div>
          <button onClick={loadLike}>좋아요</button> {img.like + like} &nbsp;
          <button onClick={loadDislike}>싫어요</button> {img.dislike + dislike}
        </div>
      ))}
    </>
  );
}

ReactDOM.render(<App />, 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에 적용됨.)

---

구현영상

https://youtu.be/sJTaZJ5CZCA