[TIL] 항해99 78일차

트러블 슈팅 22.03.26~28

(실제 고민시간은 몇시간 안되지만 시도 ~ 완성 기간)

다반수 투표로 인해 죽었을 경우 나타낼 모달 화면

스파이 투표창(모달)이 죽은 사람에게 노출되지 않도록 기능 구현

폴더 구조

React-src

• page -> ingame.js
• component -> Modal.js

내가 생각한 방법

• 모달창이 노출 되면 안되기 때문에 모달 컴포넌트에서 진행
• 룸 안에 유저 리스트 중에 죽었는지 살았는지 확인 후 필터링
• 필터링 한 목록을 조건문에 넣어 시도

 const user_list = useSelector((state) => state.vote.userList);


const deadPerson = user_list.filter((user) => user.isEliminated === 'Y');

console.log(deadPerson, '죽은 사람들 리스트');

=> 필터링한 값은 배열로 [{a, b, c}] 생겨서 필터링을 하고 조건문을 붙여도 적용되지 않은점 발견
너무 멍청했다

팀원이 생각한 방법

• 똑같이 룸 안에 유저 리스트 중 죽은 사람만 필터링
• 필터링 된 값에서 userId만 뽑아 추출
• 해당 값을 반복문 돌려 value 값만 추출 후 새로운배열에 삽입(push)
• 마지막 변수에 해당 반복문으로 나온 값(userId)와 로컬스토로지에 등록된 ID값이 같은지 includes 확인 후 참이면 다른 모달이 노출되도록 진행

 const user_list = useSelector((state) => state.vote.userList);


const isFired = user_list.filter((user) => user.isEliminated === 'Y');

console.log(isFired, '죽은 사람들 리스트');

//빈배열
const isFireds = [];

//해고 명단 반복문 돌려서 ID값 isFireds에 넣기
isFired.forEach((id) => {
  isFireds.push(Object.values(id));
});

//해고 명단 ID 리스트에 본인 ID가 있다면 true반환
const _isFired = isFireds[0].includes(parseInt(userId));

=> 방법도 이해됐고 성공할거라 확신했으나 리액트에서 오류 발생
원인은 랜더링 됐을 때는 죽은 유저가 없기때문에 undefined 값이 들어가지고 그 값으로 비교문을 하게 되니 읽을수 없다는 메시지오류 반환

위 방법에 조건문 추가

• 만약 새로 만들 배열의 길이가 0 이면 '아무 내용'을 추가

  => 이렇게 만들어진 변수로 각 모달에 넣어주니 성공 하게 됐다.

// 처음 시작할 때 isFireds는 빈배열이기에 오류가 나서 밑에 코드 작성
// 빈배열일때 undefined ID넣기
if (isFireds.length === 0) isFireds.push('undefined Id');

리팩토링

• forEach문을 map으로 변경 후 동일하게 includes로 비교

const isFired = roomUserList.filter((user) => user.isEliminated === 'Y'); // 해고당한 명단

const isFireds = isFired.map((user) => {
    return user.userId;
  });
  console.log(isFireds); // 리스트 중 userId만 반환 [1, 2...]


  const _isFired = isFireds.includes(parseInt(userId));
  console.log(_isFired, '불린형');

나에게 나름 고전한 문제였던 기능이었다.
이번에도 나혼자 생각 할때는 어렵게 생각했는데 다른이들이 도움을 주고 들어보니 이렇게 간단하게 해결할 수 있는 문제를 혼자 끙끙 앓는데 시간을 너무 많이 썼다.

도움을 주신분들에게 감사.