[TIL] 항해99 78일차 실전프로젝트 트러블 슈팅

돼지·2022년 3월 28일

항해99

목록 보기

83/104

🛠 트러블 슈팅 22.03.26~28

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

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

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

폴더 구조

React-src

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

😏 내가 생각한 방법

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

//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 확인 후 참이면 다른 모달이 노출되도록 진행

//Ingame.js
 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 이면 '아무 내용'을 추가

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

//Ingame.js

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

리팩토링

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

//Ingame.js
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, '불린형');