C-log

지난번 포스팅에서 지적했던 문제 제한 관련해 보안한 부분의 코드들을 리뷰하려고 한다. 먼저 문제를 가져오는 useEffect부분을 보면 아래와 같다.(branch/7) useEffect(() => { fetch('http://localhost:3001/sample') .then(res => res.json()) .then((data) => { // 데이터를 가져온 후, 제한된 개수만큼 자르고 섞음 const limitedData = data.slice(0, limit); const shuffledData = shuffleArray(limitedData); setData(shuffledData); }) .catch((error) => { console.error("Error fetching data:", ..

버튼을 눌렀을 때 문제가 섞일 수 있는 기능을 구현하고자 한다. 우선 랜덤으로 문제를 섞기 위해서는 피셔 예이츠 알고리즘을 사용해야 한다. 코드는 아래와 같다. // shuffleArray(Fisher-Yates) 알고리즘을 사용하여 배열을 섞는 함수 function shuffleArray(array) { for (let i = array.length - 1; i > 0; i--) { const j = Math.floor(Math.random() * (i + 1)); [array[i], array[j]] = [array[j], array[i]]; } return array; } 주어진 배열의 길이를 기준으로 역순으로 반복하면서 각 인덱스와 랜덤으로 선택된 인덱스를 교환하여 배열을 섞는다. 이 과정을 통해..

마크다운을 이용해서 시험지의 이미지와 시험 자료들을 불러 올 수 있는 방법들을 모색하다 마크다운 라이브러리를 이용하고자 했다. 예시로 아래와 같은 정렬된 모습을 구현하려고 했다. 왼쪽 해당 정렬된 모습은 리액트에서 마크다운이 아닌 css로 구현한 것이다. 오른쪽은 마크다운과 Html과 혼용해서 css로 구현한 것이다. 이러한 정렬을 마크다운 라이브러를 활용해서 구현하면 좋겠다고 생각했다. 마크다운 라이브러리 중 가장 많이 사용하고 많은 자료를 가지고 있는 react-markdown을 사용했다. 간단한 사용 예시는 아래와 같다. import ReactMarkdown from "react-markdown"; const markdown = ` # Heading 1 This is a **bold** text a..

[FE] json-server를 통해 임시 API를 가지고 문제들을 출력한다. by 4BFC · Pull Request #4 · 4BFC/sample_Capstone 확인 시 json-server 설치 요망 github.com 나만의 시험지를 편집할 수 있는 페이지를 제작 중이다. 백엔드에서 제작한 sample json파일을 가지고 시험지에 들어갈 문제들을 호출해 볼 것이다. API를 불러오기 위해선 우선 fetch와 useEffect를 알아야하고 이를 활용해서 코드를 작성할 것이다. 아직 API가 정식으로 배포가 되지 않았기 때문에 임시로 사용할 수 있는 json-server를 가지고 임시주소로 API를 호출할 것이다. 문제를 불러오는 개수 제한은 다음 이슈에 다루어 볼 것이다. 우선 아래 코드를 살펴..

나만의 시험지는 졸업작품 프로젝트이다. 모든 내용을 담으면 좋겠으나. github에서 발행되는 issue를 기준으로 개발 노트를 기록 할 것이다.