랜덤 뽑기

Overview

• 목적: CS스터디를 진행 중, 발표 주제, 순서처럼 랜덤으로 뽑을 경우가 많았는데 매번 사다리타기에 하나씩 입력하는 게 불편했고, 이를 해소하기 위해 구현했습니다.

• 특징: javascript 웹 컴포넌트 패턴으로 구현

• 배운 점
• 구현하고 싶은 기능에서 필요한 상태 값을 뽑아서, 상태 값으로 UI를 바꾸는 흐름을 경험했습니다.
• 불편함을 해결하기 위한 개발을 경험했습니다. 불편함을 느끼는 문제를 정의하고, 해결 방법을 생각하는 과정에서 많은 고민을 할 수 있었습니다.

고민했던 부분

• 이름과 당첨항목을 적는 작업을 단순화해야겠다 생각했습니다.

• 그래서, 이름을 한 줄에 적고, 인원수만큼 랜덤 숫자를 매칭해서 보여주는 거로 구현했습니다.
• 이름을 한 줄에 적을 때, 각 이름을 스페이스로 구분

• 이름을 적지 않으면, CS스터디원으로 랜덤 결과를 보여줍니다.

• 사용예시
• 참여자 : 수화 민수 지혜 오순
• 당첨항목 : 스레드, 프로세스, PCB, 뮤텍스/세마포어
• 당첨항목을 1, 2, 3, 4로 정하고, 랜덤 결과를 돌립니다.
• 각자 당첨 주제를 가져가서, 학습 후 스터디 시간에 발표합니다.
 

랜덤뽑기 시나리오

• 랜덤으로 뽑을 참여자를 입력
• 참여자는 스페이스로 구분

• 랜덤 시작버튼을 클릭하거나 엔터를 누르면 랜덤뽑기가 시작됩니다.

• 이후, 참여자와 숫자로 1:1 매칭된 결과를 보여줍니다.

추가로 해볼 것들

• 랜덤로직 개선

// 현재코드 
const getRandomIndex = (numberArray) => {
  if (numberArray.length === 1) return 0;

  const maxIndex = numberArray.length;
  return Math.floor(Math.random() * maxIndex);
};

현재 랜덤로직은 무작위성이 높진 않은데, 이를 높이는 로직으로 개선하고 싶음.
참고할 자료