$$config title: 명언 만들기 keywords: - IT - 조회 - 좋아요, 싫어요 구현 - 랜덤보기 - API 연동 $$ # 구상 순서 - 1. 랜덤단건조회 API - 2. 수정 API - 3. 랜덤단건조회 리액트 - 4. 다른 명언보기 버튼 - 5. 좋아요, 싫어요 버튼 - 6. 좋아요, 싫어요 버튼 API 연동 # 1. 랜덤단건조회 API - 데이터베이스 구현 ```sql DROP DATABASE IF EXISTS Fam; CREATE DATABASE Fam; USE Fam; SHOW DATABASES; DROP TABLE IF EXISTS saying; CREATE TABLE saying( id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, reg_date DATETIME NOT NULL, content VARCHAR(200) NOT NULL, auter VARCHAR(50) NOT NULL, view_count INT UNSIGNED NOT NULL DEFAULT 0, good_count INT UNSIGNED NOT NULL DEFAULT 0, bads_count INT UNSIGNED NOT NULL DEFAULT 0 ); INSERT INTO saying SET reg_date = NOW(), content = '삶이 있는 한 희망은 있다', auter = '키케로'; INSERT INTO saying SET reg_date = NOW(), content = '산다는것 그것은 치열한 전투이다.', auter = '로망로랑'; INSERT INTO saying SET reg_date = NOW(), content = '하루에 3시간을 걸으면 7년 후에 지구를 한바퀴 돌 수 있다.', auter = '사무엘존슨'; INSERT INTO saying SET reg_date = NOW(), content = '언제나 현재에 집중할수 있다면 행복할것이다.', auter = '파울로 코엘료'; INSERT INTO saying SET reg_date = NOW(), content = '진정으로 웃으려면 고통을 참아야하며 , 나아가 고통을 즐길 줄 알아야 해', auter = '찰리 채플린'; INSERT INTO saying SET reg_date = NOW(), content = '직업에서 행복을 찾아라. 아니면 행복이 무엇인지 절대 모를 것이다', auter = '엘버트 허버드'; INSERT INTO saying SET reg_date = NOW(), content = '신은 용기있는자를 결코 버리지 않는다', auter = '켄러'; INSERT INTO saying SET reg_date = NOW(), content = '우리를 향해 열린 문을 보지 못하게 된다', auter = '헬렌켈러'; INSERT INTO saying SET reg_date = NOW(), content = '피할수 없으면 즐겨라', auter = '로버트 엘리엇'; INSERT INTO saying SET reg_date = NOW(), content = '단순하게 살아라. 현대인은 쓸데없는 절차와 일 때문에 얼마나 복잡한 삶을 살아가는가?', auter = '이드리스 샤흐'; SELECT * FROM saying; ``` - vs code 작성 ```js { "dependencies": { "cors": "^2.8.5", "express": "^4.18.1", "mysql2": "^2.3.3" }, "type": "module" } ``` ```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: "Fam", waitForConnections: true, connectionLimit: 10, queueLimit: 0, dateStrings: true, }); const app = express(); app.use(cors()); app.use(express.json()); const port = 3000; app.get("/saying/random", async (req, res) => { const [[sayingRow]] = await pool.query( ` SELECT * FROM saying ORDER BY RAND() LIMIT 1 ` ); if (sayingRow === undefined) { res.status(404).json({ resultCode: "F-1", msg: "404 not found", }); return; } sayingRow.view_count++; await pool.query( ` UPDATE saying SET view_count = ? WHERE id = ? `, [sayingRow.view_count, sayingRow.id] ); res.json({ resultCode: "S-1", msg: "성공", data: sayingRow, }); }); app.listen(port, () => { console.log(`saying app listening on port ${port}`); }); ``` # 2. 수정 API ```js app.patch("/saying/:id", async (req, res) => { const { id } = req.params; const [[sayingRow]] = await pool.query( ` SELECT * FROM saying WHERE id = ? `, [id] ); if (sayingRow === undefined) { res.status(404).json({ resultCode: "F-1", msg: "404 not Found", }); return; } const { content = sayingRow.content, auter = sayingRow.auter, good_count = sayingRow.good_count, bads_count = sayingRow.bads_count, } = req.body; await pool.query( ` UPDATE saying SET content = ?, auter = ?, good_count = ?, bads_count = ? WHERE id = ? `, [content, auter, good_count, bads_count, id] ); const [[justsayingRow]] = await pool.query( ` SELECT * FROM saying WHERE id = ? `, [id] ); res.json({ resultCode: "S-1", msg: "성공", date: justsayingRow, }); }); app.listen(port, () => { console.log(`saying app listening on port ${port}`); }); ``` # 3. 랜덤단건조회 리액트 ```html

``` ```css @font-face { font-family: "GmarketSansMedium"; src: url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff") format("woff"); font-weight: normal; font-style: normal; } html, body, #root { height: 100%; margin: 0; } html > body, html > body input, html > body select, html > body textarea, html > body pre, html > body button { font-family: "GmarketSansMedium"; color: #333; text-underline-position: under; line-height: 1.3; } #root { display: flex; flex-direction: column; } ``` ```js console.clear(); import React, { useState, useEffect } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; const SAYING_API_HEAD = "http://localhost:3000/saying"; function App() { const [saying, setSaying] = useState(null); const reloadRandomSaying = async () => { const data = await fetch(`${SAYING_API_HEAD}/random`); const dateJson = await data.json(); setSaying(dateJson.data); }; useEffect(reloadRandomSaying, []); if (saying === null) { return <>로딩중...; } return ( <>

{saying.content}
- {saying.auter} -
조회 : {saying.view_count}
좋아요 : {saying.good_count}
싫어요 : {saying.bads_count}

); } ReactDOM.render(, document.getElementById("root")); ``` # 4. 다른 명언보기 버튼 - 위에 return 수정(다른 명언 버튼 수정) ```js return ( <>

{saying.content}
- {saying.auter} -
조회 : {saying.view_count}
좋아요 : {saying.good_count}
싫어요 : {saying.bads_count}

); } ReactDOM.render(, document.getElementById("root")); ``` # 5. 좋아요, 싫어요 버튼 - return에 버튼 추가 ```js return ( <>

{saying.content}
- {saying.auter} -
조회 : {saying.view_count}
좋아요 : {saying.good_count}
싫어요 : {saying.bads_count}

); } ReactDOM.render(, document.getElementById("root")); ``` # 6. 좋아요, 싫어요 버튼 API 연동 - API에 연동시켜서 조회 ```js if(..... ↓ const doGoodcount = async () => { await fetch(`${SAYING_API_HEAD}/${saying.id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ good_count: saying.good_count + 1 }) }); const newSaying = { ...saying, good_count: saying.good_count + 1 }; setSaying(newSaying); }; const doBadscount = async () => { await fetch(`${SAYING_API_HEAD}/${saying.id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ bads_count: saying.bads_count + 1 }) }); const newSaying = { ...saying, bads_count: saying.bads_count + 1 }; setSaying(newSaying); }; return (.... ↓ ```