TIL 오답 페이지 구현(1114)

회고록

게임이 끝난 후에 모든 오답을 데이터베이스에 담아 한번에 보여주는 페이지를 작업하였다

1. 우선 게임이 끝난 후 매판 끝날때마다 끝난 데이터를 슈퍼베이스에 담아준다

2. 슈퍼베이스에 담아진 내용들중 로그인한 유저의 값만 다 들고와서 보여준다

게임이 끝난 후 데이터를 슈퍼베이스에 담아줄때 어떤식으로 넣을까 고민을 하다가 배열안에 객체형식의 데이터를 하나의 스트링으로 변환하여 데이터에 넣어주었다.

데이터를 슈퍼베이스에서 불러오게 된다면 유저가 플레이했던 모든 오답을 불러오게 했다.

들고온 배열에 map을 이용하여 각각의 객체에 접근하여 answer에 있는 값을 변수에 담아 주었다
그 결과 이중 배열로 데이터가 나오는걸 확인 할 수 있었다

const textArray = answer?.map((item) => JSON.parse(item.answer));

여기서 중첩된 부분을 제거해야하는데 제거하는 로직이 제일 어려웠던거 같다

구글링을 통하여 이중배열을 하나로 펼쳐는 flat이라는 메서드를 찾아서 사용하였다
여기서 중복된 부분을 제거하기 위해 text를 하나의 키로 이용하고 new Map을 이용하여 중복 체크를 하였다. 이러한 코드를 최대한 간결하게 작업을 해서 해당 코드가 나오게 되었다

  // 이중 배열로 변경
  const textArray = answer?.map((item) => JSON.parse(item.answer));

  // 중복을 제거하여 배열로 다시 만든 후 변수에 할당
  const wrongAnswerArray = Array.from(
    new Map(textArray?.flat().map((item) => [item.text, { text: item.text, score: item.score }])).values(),
  );

중복 데이터가 잘 나오게 된 걸 확인 할 수 있었다 이제 데이터를 가지고 ui 작업을 하면 될 거 같다