$$config title: [cdpn.io] 리액트 소스 추출 keywords: - IT - ... $$ # MYSQL 소스 ```sql CREATE DATABASE goodsay; USE goodsay; CREATE TABLE wise_saying ( id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, str TEXT NOT NULL, author VARCHAR(200) NOT NULL ); DESC wise_saying; ALTER TABLE wise_saying ADD COLUMN regDate DATETIME NOT NULL AFTER id; SELECT * FROM wise_saying; SELECT * FROM wise_saying ORDER BY RAND() LIMIT 1; ALTER TABLE wise_saying ADD COLUMN `view` INT NOT NULL; ALTER TABLE wise_saying ADD COLUMN good INT NOT NULL; ALTER TABLE wise_saying ADD COLUMN hate INT NOT NULL; ``` # VSCODE 소스 ```js //app.js import express from "express"; import mysql from "mysql2/promise"; import cors from "cors"; const pool = mysql.createPool({ host: "localhost", user: "sbsst", password: "sbs123414", database: "goodsay", waitForConnections: true, connectionLimit: 10, queueLimit: 0, }); const app = express(); const corsOptions = { origin: 'https://cdpn.io', optionsSuccessStatus: 200, // some legacy browsers (IE11, various SmartTVs) choke on 204 } app.use(express.json()); app.use(cors(corsOptions)); const port = 3000; //수정 app.patch("/says/:id", async(req, res)=>{ const { id }= req.params ; const [rows] = await pool.query(`SELECT * FROM wise_saying WHERE id =?`,[id]); if (rows.length == 0){ res.status(404).json({ msg:"not found", }); return; } const { str, author } = req.body; if(!str){ res.status(400).json({ msg : "str required", }); return; } if(!author){ res.status(400).json({ msg : "auhtor required", }); return; } const [rs] = await pool.query( ` UPDATE wise_saying SET regDate = NOW(), str = ?, author = ? WHERE id = ? `, [str,author, id] ); res.json({ msg : `${id}번 명언이 수정되었습니다.`, }); }); //삭제 app.delete("/says/d/:id", async(req, res)=>{ const {id} = req.params ; const [rows] = await pool.query(`SELECT * FROM wise_saing WHERE id =?`,[id]); if (rows.length == 0){ res.status(404).json({ msg:"not found", }); return; } await pool.query( ` DELETE FROM wise_saying WHERE id=? `, [id] ); res.json(`${id}번 명언이 삭제되었습니다.`); }); //생성 app.post("/says/", async(req, res)=>{ const { str, author } = req.body; if(!str){ res.status(400).json({ msg : "str required", }); return; } if(!author){ res.status(400).json({ msg : "author required", }); return; } const [rows] = await pool.query( ` INSERT INTO wise_saying SET regDate = NOW(), str = ?, author = ? `, [str, author] ); res.json({ msg : `명언이 추가되었습니다.`, }); }); //다건조회 app.get("/says",async (req, res) => { const [rows] = await pool.query("SELECT * FROM wise_saying ORDER BY id DESC"); res.json(rows); }); //랜덤조회 app.get("/says/rand", async (req, res) => { const [[rows]] = await pool.query(`SELECT * FROM wise_saying ORDER BY RAND() LIMIT 1`); await pool.query(`UPDATE wise_saying SET view = view +1 WHERE id=?`,[rows.id]); rows.view++; res.json([rows]); }); //단건조회 app.get("/says/:id",async (req, res) => { const { id }= req.params ; const [rows] = await pool.query(`SELECT * FROM wise_saying WHERE id =?`,[id]); if (rows.length == 0){ res.status(404).json({ msg:"not found", }); return; } res.json(rows[0]); }); app.listen(port); ``` # 코드펜 소스 ```js console.clear(); import React, { useState, useEffect } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; function App() { const [imgs, setimgs] = useState([]); useEffect(async () => { const data = await fetch("http://localhost:3000/says/rand"); const json = await data.json(); setimgs(json); }, []); const addstr = async () => { const data = await fetch("http://localhost:3000/says/rand"); const json = await data.json(); setimgs(json); }; return ( <>

{img.id}번 / {img.author} / {img.str}/ 조회수: {img.view}

); } ReactDOM.render(, document.getElementById("root")); ```