서버에서 이미지 데이터를 랜덤으로 가져와 낱말 게임 기능을 구현
-백엔드-
controller - <gameController.js> : 랜덤 이미지를 클라이언트로 보내기
-aggregate: 주어진 조건으로 데이터를 검색하는 쿼리
-$sample: 지정한 개수 만큼 랜덤으로 가져옴
(...)
//Get random Image, /image
const getImage = asynchHandler(async (req, res) => {
const game = await Game.aggregate([{ $sample: { size: 1 } }]); //데이터 하나만 가져옴
res.status(200).send(game);
});
(...)
module.exports = { postCanvas, getImage, postImage };
router - <gameRoute.js> : get 라우터 설정
const express = require("express");
const router = express.Router();
const {
postCanvas,
getImage,
postImage,
} = require("../controller/gameController");
const { upload } = require("../config/multer");
router.route("/canvas").post(postCanvas);
router.route("/image").get(getImage).post(upload.single("image"), postImage); //get 추가
module.exports = router;
-프론트엔드-
page - Game - <ImageGame.js>
import axios from "axios";
import React, { useEffect, useState } from "react";
function ImageGame() {
const [imageData, setImagaData] = useState([]); //이미지 데이터
const [quiz, setQuiz] = useState(""); //퀴즈 이미지
const [answer, setAnswer] = useState(""); //정답 입력
const [correctAnswer, setCorrectAnswer] = useState(false); //정답 유무 확인
const changeAnswer = (e) => setAnswer(e.target.value);
const checkAnswer = () => { //정답 유무 확인 함수
if (answer === quiz) {
alert("정답입니다.");
setCorrectAnswer(true);
} else {
alert("오답입니다.");
}
};
useEffect(() => { //이미지 데이터 가져오기
axios.get("http://localhost:5000/image").then((res) => {
setImagaData(res.data[0].image);
setQuiz(res.data[0].title);
});
}, []);
useEffect(() => {
if (correctAnswer) { //정답을 맞췄을 경우, 다음 퀴즈로 넘어감
axios.get("http://localhost:5000/image").then((res) => {
setImagaData(res.data[0].image);
setQuiz(res.data[0].title);
setAnswer("");
setCorrectAnswer(false);
});
}
}, [correctAnswer]);
return (
<div>
<div>
<img alt="이미지" src={`http://localhost:5000/file/${imageData}`} />
</div>
<input type="text" value={answer} onChange={changeAnswer} />
<button onClick={checkAnswer}>제출</button>
</div>
);
}
export default ImageGame;
'프로젝트 > 한글 게임' 카테고리의 다른 글
12. 캔버스, 이미지 데이터 병합 (0) | 2024.04.22 |
---|---|
11. 이미지 중복 방지, 횟수 제한 (0) | 2024.04.20 |
9. 이미지, 낱말 데이터 등록 (0) | 2024.04.17 |
8. multer (0) | 2024.04.15 |
7. 이미지 텍스트 인식 (0) | 2024.04.14 |