10. 이미지 데이터 가져오기

서버에서 이미지 데이터를 랜덤으로 가져와 낱말 게임 기능을 구현

 

-백엔드-

 

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;