[FE]문제 랜덤 구현(1)

버튼을 눌렀을 때 문제가 섞일 수 있는 기능을 구현하고자 한다. 우선 랜덤으로 문제를 섞기 위해서는 피셔 예이츠 알고리즘을 사용해야 한다. 코드는 아래와 같다.

 

// 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;

}

 

주어진 배열의 길이를 기준으로 역순으로 반복하면서 각 인덱스와 랜덤으로 선택된 인덱스를 교환하여 배열을 섞는다. 이 과정을 통해 제한된 문제 배열의 순서를 랜덤하게 섞을 수 있다. 

왜 역순으로 반복해야하냐면 문제를 섞을 때 고르게 섞이게 하기 위해서 그렇다. 만약 정뱡향으로 섞는다면 문제가 고르게 섞이지 않을 수도 있기 때문이다. 즉, 순차적으로 섞이게 했을 경우에 길이기 증가가 되기 때문에 섞이게 되는 인덱스 범위가 늘어난다. 그렇게 결과적으로 이전에 이미 섞인 요소들이 다시 한번 더 섞이게 되거나 중복될 수 있기 때문에 역순으로 반복하게 해야한다. 다음으로 넘어가서 해당 알고리즘이 적용되어야할 부분의 코드를 살펴 보자.

 

useEffect(() => {

    fetch('http://localhost:3001/sample')

      .then(res => res.json())

      .then((data) => {

        const shuffledData = shuffleArray(data); // 데이터 배열을 랜덤하게 섞음

        setData(shuffledData.slice(0, limit)); // limit에 맞게 잘라서 사용

      })

      .catch((error) => {

        console.error("Error fetching data:", error);

      });

  }, [limit]);

 

데이터를 받아오는 부분에서 문제를 미리 섞에서 원하는 길이만큼 추출 할 수 있게 코드를 작성 했다. 하지마 여기에 아주 큰 단점이 있다. 바로 받아온 문제 전체를 섞는 다는 단점이 있다. 즉, 데이터 전체를 섞은 다음 원하는 길이만큼 추출 하면 사용자가 원하는 문제들만 섞는 것이 아니라는 단점이 있다. 코드를 직접 언급하면서 설명하자면 shffeldData는 문제가 섞인 data들을 담고 있다. 이 변수를 가지고 setData에서 원하는 길이만큼 slice문으로 잘라내는데 data 모두를 섞어내는 과정에서 내가 말한 문제들이 발생하는 것이다. 따라서 문제를 먼저 slice해서 변수에 담아 두고 해당 변수를 가지고 섞어네는 과정을 거쳐야 할 것 같다. 이렇게 코드를 작성하게 되면 앞서 말한 제한된 문제 안에서 문제를 섞어 내기가 어렵고 버튼 구현의 어려움이 있다. 따라서 다음 포스팅 때 이를 수정 보완 할 예정이다. 전체 코드는 아래와 같다.

import React, { useState, useEffect } from "react";

import { Link } from "react-router-dom";

// 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;

}

export default function LabExam() {

  const [data, setData] = useState([]);

  const [limit, setLimit] = useState(5);

  useEffect(() => {

    fetch('http://localhost:3001/sample')

      .then(res => res.json())

      .then((data) => {

        const shuffledData = shuffleArray(data); // 데이터 배열을 랜덤하게 섞음

        setData(shuffledData.slice(0, limit)); // limit에 맞게 잘라서 사용

      })

      .catch((error) => {

        console.error("Error fetching data:", error);

      });

  }, [limit]);

  return (

    <div>

      <h2>Test</h2>

      <select onChange={(e) => { setLimit(e.target.value); }}>

        <option value={5}>5</option>

        <option value={10}>10</option>

        <option value={15}>15</option>

        <option value={20}>20</option>

      </select>

      <Link to="/">back</Link>

      <ol>

        {data.map((item) => (

          <li key={item.id}><p>{item.question}</p>{item.options}</li>

        ))}

      </ol>

    </div >

  );

}

다음 포스팅에서는 버튼을 생성해서 문제를 섞어내는 부분을 구현해 볼 것이다.

 

Shuffle Algorithm : 무작위로 섞기 알고리즘 - Fisher-Yates Shuffle & Knuth Shuffle