본문 바로가기

프로젝트27

15. 초성/중성/종성 분리 유니코드를 이용해서 서버에서 가져온 텍스트 데이터의 초성/종성/중성을 분리 ※유니코드: 전 세계의 모든 문자를 컴퓨터에서 일관되게 표현하고 다룰 수 있도록 하는 표준 문자 전산 방식    -한글 유니코드에서 자음(ㄱ~ㅎ)은 12593 ~ 12622로 총 27개, 모음(ㅏ~ㅣ)은 12623 ~ 12643로 총 21개    -종성은 숫자 1마다, 중성은 29 (ㅏ -> ㅐ) 마다, 초성은 589(ㄱ -> ㄲ)마다 값이 변함[참고] [자바스크립트] 한글 자음 모음 분리 / 초성 * 중성 * 종성|작성자 Scripter page - Game - ※charCodeAt(): index에 해당하는 문자의 unicode 값을 리턴  -choIndex: 초성은 589(ㄱ -> ㄲ)마다 변하므로 588로 나눔(시작 인덱스.. 2024. 4. 29.
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.

티스토리툴바