$$config title: [제작] 명언 랜덤 앱 제작 (처음~조회수) keywords: - 돌려돌려 돌림판 명언의 랜덤 뽑기! $$ # 명언 코드펜 사이트 모음 [명언1](https://codepen.io/SeonHo-/pen/RwQZVWd?editors=1011) [명언2](https://codepen.io/SeonHo-/pen/xxYPepG) [명언3](https://codepen.io/SeonHo-/pen/rNJpBqy?editors=0111) ----외부데이터---- [명언4](https://codepen.io/SeonHo-/pen/xxYpqpx?editors=0111) [명언5](https://codepen.io/SeonHo-/pen/eYVyvqO?editors=0010) # 조건 및 진행 단계 ## 조건 1 . 번호, 등록날짜, 내용, 작가관련 내용 출력 [ex - 1. 2022-12-12 12:12:12, 내 사전에 불가능이란 없다., 나폴레옹] - codepen 실행할 때 마다, 랜덤하게 명언이 화면에 나오도록 (지금 같은 경우에는 DB하나에 테이블 하나만 있어도 됨) 2 . 명언마다 조회수 나올 수 있도록 출력 3 . 명언마다 좋아요/싫어요 설정 - 미완 ## 진행단계 1 . 명언 DB 만들기! 1 ) SQL을 활용하여 데이터 베이스 제작(데이터베이스 / 테이블 생성 및 내용 추가 - 명언 10개 이상) 2 . VS CODE 이용 1 ) vs 기본 설정 진행 (localhost를 통해 문장 출력이 가능해야함) 2 ) 제작한 DB가 localhost를 통해 출력이 되어야함 3 . CODEPEN 이용 1 ) codepen 기초 설정 입력 (console.clear, import~, function~, ReactDOM ~) 2 ) fetch를 이용하여 localhost 내용 codepen을 통해 출력할 수 있게 해야함 4 . VS CODE 재사용 1 ) cors를 통해 다도메인에서도 localhost가 출력될 수 있도록 설정해야함 [조회수설정] 5 . SQL DB에 조회수관련 테이블 추가 6 . VS CODE 1 ) app.get에 hit 관련 await 문 넣기 2 ) [rows] 변경 ([rows] -> [[rows]]) 7 . 그 외 설정 입력 # 프로그램별 입력 코드 모음(처음~조회수) ## SQL 입력코드 - 테이블 생성 시 제한 걸어두는거 오타안났나 확인하자..^..^ ```sql [MYSQL 활용] SHOW DATABASES; DROP DATABASE IF EXISTS WS; CREATE DATABASE WS; SHOW DATABASES; USE WS; CREATE TABLE sying( id INT UNSIGNED NOT NULL PRIMARY KEY AUTO_INCREMENT, say_D DATETIME NOT NULL, content TEXT NOT NULL, name_s VARCHAR(200) NOT NULL, hit INT NOT NULL ); SELECT*FROM sying; INSERT INTO sying SET say_D = NOW(), content='He makes no friend who never made a foe.', name_s='Alfred, Lord Tennyson'; SELECT*FROM sying; . . 명언 입력 ~ ..^^ . . INSERT INTO sying SET say_D = NOW(), content='A hungry man is not a free man.', name_s='Adlai Stevenson'; SELECT*FROM sying; ``` ## VSCODE 코드 - 조회수 추가하는 부분 자세히...살펴보자.. ```js [VS CODE] import express from "express"; import mysql from "mysql2/promise"; import cors from "cors"; const pool = mysql.createPool({ //DB와의 연결 정보를 입력 host: "localhost", user: "sbsst", password: "sbs123414", database: "WS", waitForConnections: true, connectionLimit: 10, queueLimit: 0, dateStrings: true, }); const app = express(); app.use(express.json()); app.use(cors()); const corsOptions = { origin: "https://cdpn.io", optionsSuccessStatus: 200, }; app.use(cors(corsOptions)); const port = 3000; app.get("/say", async (req, res) => { const [[rows]] = await pool.query( `SELECT * FROM sying ORDER BY RAND() LIMIT 1` ); await pool.query( `UPDATE sying SET hit = hit +1 WHERE id=?`, [rows.id] ); rows.hit++; res.json([rows]); }); app.listen(port); ``` ## CODEPEN 코드 - fetch문 * 한번만 실행해서 연속실행오류(?)를 방지하기 위해 useEffect문을 사용한다. : useEffect - useEffect( async () => {}, []); * fetch문 리액트에서 실행시키기 위한 방법 : ```js

{img.테이블명}

``` ```js [CODEPEN] console.clear(); import React, { useState, useEffect } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; function App() { /* state 선언 공간 */ const [ws, setWs] = useState([]); const [imgs, setImgs] = useState([]); const [page, setPage] = useState(1); const [like, setLike] = useState(0); const [hate, setHate] = useState(0); /* 명언 - 명언 및 page 누르면 랜덤으로 표시 - 완성 */ useEffect(async () => { const data = await fetch("http://localhost:3000/say"); const json = await data.json(); setImgs(json); }, [ws, page]); /* 이전, 명언, 다음 버튼 효과(saying~loadNext) */ const Saying = function () { setWs(ws + 1); }; /* 페이지 - 페이지 표시 - 완성 */ const loadPrev = function () { setPage(page - 1); }; const loadNext = function () { setPage(page + 1); }; /* 좋아요 - 좋아요 누르면 상승 */ const doLike = () => { setLike(like + 1); }; /* 싫어요 - 싫어요 누르면 상승 */ const doHate = () => { setHate(hate + 1); }; /* 좋아요/싫어요 - 좋아요/싫어요 초기화 */ const doReset = () => { setHate(0); setLike(0); }; return ( <>

현재 페이지 : {page}

{img.id}번째 명언 : {img.content} 『{img.name_s}』
현재시각 : [{img.say_D}]

조회수 : {img.hit}

); } ReactDOM.render(, document.getElementById("root")); ``` # 프로그램별 입력 코드 모음(추천수) ## SQL 입력코드 - 추천수용 칼럼 추가 ```sql [MYSQL 활용] ALTER TABLE saying ADD COLUMN likePoint INT UNSIGNED NOT NULL; ``` ## VSCODE 코드 - 추천관련 내용을 입력하고 selet를 통해 조회를 할 수 있도록 한다. ```js [VS CODE] import express from "express"; import mysql from "mysql2/promise"; import cors from "cors"; const pool = mysql.createPool({ host: "localhost", user: "sbsst", password: "sbs123414", database: "WS", waitForConnections: true, connectionLimit: 10, queueLimit: 0, dateStrings: true, }); const app = express(); app.use(cors()); app.use(express.json()); const port = 3000; app.get("/say/random", async (req, res) => { const [[wiseSayingRow]] = await pool.query( ` SELECT * FROM saying ORDER BY RAND() LIMIT 1 ` ); if (wiseSayingRow === undefined) { res.status(404).json({ resultCode: "F-1", msg: "404 not found", }); return; } wiseSayingRow.hit++; await pool.query( ` UPDATE saying SET hit = ? WHERE id = ? `, [wiseSayingRow.hit, wiseSayingRow.id] ); res.json({ resultCode: "S-1", msg: "성공", data: wiseSayingRow, }); }); app.patch("/say/:id", async (req, res) => { const { id } = req.params; const [[wiseSayingRow]] = await pool.query( ` SELECT * FROM saying WHERE id = ? `, [id] ); if (wiseSayingRow === undefined) { res.status(404).json({ resultCode: "F-1", msg: "404 not found", }); return; } const { say_D = wiseSayingRow.say_D, content = wiseSayingRow.content, nam = wiseSayingRow.nam, view_ws = wiseSayingRow.view_ws, hit = wiseSayingRow.hit, likePoint = wiseSayingRow.likePoint + 1, } = req.body; await pool.query( ` UPDATE saying SET say_D = ?, content = ?, nam = ?, hit = ?, likePoint = ? WHERE id = ? `, [say_D, content, nam, hit, likePoint, id] ); wiseSayingRow.likePoint++; const [[justModifiedWiseSayingRow]] = await pool.query( ` SELECT * FROM saying WHERE id = ? `, [id] ); res.json({ resultCode: "S-1", msg: "성공", data: justModifiedWiseSayingRow, }); }); app.listen(port, () => { console.log(`Wise saying app listening on port ${port}`); }); ``` ## CODEPEN 코드 ```js [CODEPEN] console.clear(); import React, { useState, useEffect } from "https://cdn.skypack.dev/react"; import ReactDOM from "https://cdn.skypack.dev/react-dom"; const WISE_SAYINGS_API_HEAD = "http://localhost:3000/say"; function App() { /* state 선언 공간 */ const [ws, setWs] = useState([]); const [wiseSaying, setWiseSaying] = useState(0); const [page, setPage] = useState(1); const [like, setLike] = useState(0); const [hate, setHate] = useState(0); const [likePoint, setLikePoint] = useState(0); /* 명언 - 명언 및 page 누르면 랜덤으로 표시 - 완성 */ const reloadRandomWiseSaying = async () => { const data = await fetch(`${WISE_SAYINGS_API_HEAD}/random`); const dataJson = await data.json(); setWiseSaying(dataJson.data); }; useEffect(reloadRandomWiseSaying, [ws, page]); /* 이전, 명언, 다음 버튼 효과(saying~loadNext) */ const Saying = function () { setWs(ws + 1); }; /* 페이지 - 페이지 표시 - 완성 */ const loadStart = function () { setPage(page - page); }; const loadPrev = function () { setPage(page - 1); }; const loadNext = function () { setPage(page + 1); }; /* 추천 - 추천수 증가 */ const dolikepoint = async () => { await fetch(`${WISE_SAYINGS_API_HEAD}/${wiseSaying.id}`, { method: "PATCH", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ likePoint: wiseSaying.likePoint + 1 }) }); const newWiseSaying = { ...wiseSaying, likePoint: wiseSaying.likePoint + 1 }; setWiseSaying(newWiseSaying); }; /* 좋아요 - 좋아요 누르면 상승 */ const doLike = () => { setLike(like + 1); }; /* 싫어요 - 싫어요 누르면 상승 */ const doHate = () => { setHate(hate + 1); }; /* 좋아요/싫어요 - 좋아요/싫어요 초기화 */ const doReset = () => { setHate(0); setLike(0); }; return ( <>

《현재 페이지_{page}》

{wiseSaying.id}번 명언

『{wiseSaying.content}』
{wiseSaying.nam}

조회수 : {wiseSaying.hit}

현재시각 : [{wiseSaying.say_D}]

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