본문 바로가기

분류 전체보기82

14. 재도전 기회 한번 오답했을 시 다시 한번 더 기회를 제공  -checkQuiz, setCheckQuiz를 파일로 수정  -, 파일에 checkQuiz, setCheckQuiz 상위 컴포넌트로 넘기기  -newFetch 함수 삭제, fetchData 함수로 대체 page - Game - import React, { useEffect, useRef, useState } from "react";import axios from "axios";import "../../css/game.css";function Canvas({ checkAnswer, fetchData, quiz, checkQuiz, setCheckQuiz, setAnswerObjButton,}) { const canvasRef = useRef(n.. 2024. 4. 26.
13. 캔버스/타이핑 변환 답 제출 수단을 캔버스 또는 타이핑으로 선택할 수 있도록 수정  - 파일 추가  -CSS로 페이지 구성  -정답 맞췄을 시 캔버스-타이핑 변환 버튼 비활성화  -다음 레벨로 넘어갈 시 캔버스-타이핑 변환 버튼 활성화 page - Game - : 타이핑 기능import React, { useState } from "react";function Typing({ checkAnswer, quiz, newFetch, setAnswerObjButton }) { const [typing, setTyping] = useState(""); const [checkQuiz, setCheckQuiz] = useState(false); const changeTyping = (e) => setTyping(e.target... 2024. 4. 26.
12. 캔버스, 이미지 데이터 병합 서버에서 가져온 이미지의 단어를 캔버스로 적어서 정답 유무 판별  -정답을 맞췄을 시 다음 레벨로 넘어가기 버튼 추가 page - Game - import React, { useEffect, useRef, useState } from "react";import axios from "axios";import "../../css/game.css";function Canvas({ checkAnswer, newFetch, quiz }) { const canvasRef = useRef(null); const [isDrawing, setIsDrawing] = useState(false); const [checkQuiz, setCheckQuiz] = useState(false); co.. 2024. 4. 22.
11. 이미지 중복 방지, 횟수 제한 ※데이터베이스에서 랜덤으로 가져오는 데이터 중복 출력 방지 ※출력 횟수를 5회로 제한, 횟수를 화면에 표시 ※단어 맞추기 페이지로 접속 시 imageID 배열 초기화 -백엔드- controller - ※ $match: 특정 조건에 일치하는 값만 반환 ※$nin: 조건이 아닌 값만 찾아서 반환 (...) //Get random Image, /image let imageID = []; //데이터 id 저장 배열 const getImage = asynchHandler(async (req, res) => { if (imageID.length >= 5) { //배열 크기가 5일 시 imageID = []; //배열 초기화 res.send({ message: "게임이 종료되었습니다." }); } else { con.. 2024. 4. 20.

티스토리툴바