[DevLog] 서외구 / 2022-03-04 / 메타인지테스트 기능 구현

### 오늘은 어떻게 프로젝트에 기여했나요?

- 메타인지 테스트의 60초 동안 단어카드가 랜더링 되는 기능 구현

### 오늘의 프로젝트에서 힘든 점은 무엇인가요?

- setInterval, setTimeout, clearInterval 함수 사용법을 알아내는데 힘들었음
- Math.random()를 사용해서 배열의 무작위 값을 가져오는데 반복되는 숫자가 만들어져서 생성된 인덱스를 지우는데 힘들었음
- 위 문제를 splice()를 사용해서 해당 인덱스의 값을 지우고 나서 상태변경을 해줌

```js
function MetaTestModal ({MetaTestHandlerClose}) {
/* TODO : 메타인지 테스트에 랜덤으로 2초마다 60초동안 카드가 랜더링되게 하기 */
const [metaData, setMetaData] = useState(data);
const [second, setsecond] = useState('')

const [timerNum, setTimerNum] = useState(60)

const handleRandom = () => {
let newMeta = metaData.slice()
let randomNum = Math.floor(Math.random() * newMeta.length)
newMeta.splice(randomNum,1)
setMetaData(newMeta)
// 선택된 번호는 지우기 구현
// setMetaData(metaData.splice())
// 더미데이터를 항상 랜덤하게 정렬해서 순서대로 보여주는게 나은지 / 아니면 특정인덱스를 제거해야할지
return setTimerNum(randomNum)
}
let card = metaData[timerNum]
// 더미데이터를 1초마다 갱신시킨다. 근데 함수 시작하고 6초후에 멈춘다.
const handleTimerNum = () => {
countingSecond()
let timer = setInterval(()=> handleRandom(), 2000)
setTimeout(() => clearInterval(timer),62000)
setTimeout(() => setTimerNum(null) ,62000)
}

const countingSecond = () => {
let num = 60;
let timer = setInterval(() => setsecond(num--), 1000)
setTimeout(() => clearInterval(timer),61000)
}

const handleModalClose = () => {
MetaTestHandlerClose()
}

return (
<>

export default MetaTestModal;
```

### 내일은 프로젝트에 기여하기 위해 무엇을 해야 하나요?

- [ ] 메타인지테스트 결과 입력창 구현예정 (예상갯수, 정답입력, 결과)