11.19 항해 68일차 TIL

pathName 가져오기

• 다른 사람이 채팅을 보냈을 때 채팅 미리보기 창의 메시지를 바꾸기 위해 알람을 감지 했을 때 loadTalkRoomListToAxios() 를 dispatch 했다.

// chat 보냈을 때 채팅방에 둘다 있을 때 타입 0
// chat 보냈을 때 채팅방에 한명만 있고 상대방은 로그인 했을 때 타입 1
// chat 보냈을 때 상대방이 로그아웃 타입 2
// tap 요청 받았을 때 타입 3
// tap 요청 거절한게 타입 4
// tap 요청 수락한게 타입 5
if (newNoti.type === 1) {
  console.log('채팅알람!');
  console.log('디패 로드 톡룸');
  await dispatch(loadTalkRoomListToAxios());
  dispatch(setChatNoti(true));
}

• user A 가 메시지를 보내면

• user B 의 채팅방 목록에 미리보기로 표기 된다.

user B가 /grabtalk 페이지에 있을 때만 dispatch를 하면 될 것 같아서 코드를 수정 했다.

const pageCheck = window.location.pathname;

if (newNoti.type === 1) {
  if (pageCheck === '/grabtalk') {
    console.log('디패 로드 톡룸');
    await dispatch(loadTalkRoomListToAxios());
  }
  dispatch(setChatNoti(true));
}

• consol에 찍힌 값

정상적으로 동작 하길래 이것저것 더 테스트를 해보던 중 메인페이지로 돌아갔다가 채팅페이지로 오게 되면 pathname이 날아가서 미리보기가 갱신 되지 않는 문제점을 발견 했다.

그래서 url을 가지고 오는 몇가지 방법을 더 시도해 보았다.

import { useHistory, useLocation } from 'react-router-dom';

const history = useHistory();
const location = useLocation();

const pageCheck = window.location.href.split('/');
const nowPage = pageCheck[pageCheck.length - 1];
const nowPageE = window.location.pathname;

if (newNoti.type === 1) {
  console.log(
  'nowPageE = window.location.pathname ===>',
  nowPageE,
);
console.log('location ====>', location);
console.log('history ====>', history);
console.log('nowPage ====>', nowPage);
console.log(
  'pageCheck = window.location.href.split("/") ====>',
  pageCheck,
);
  if (nowPage  === '/grabtalk') {
    console.log('디패 로드 톡룸');
    await dispatch(loadTalkRoomListToAxios());
  }
  dispatch(setChatNoti(true));
}

• 이렇게 해서 콘솔을 확인 해보니 history.location.pathname 빼고는 전부 root 경로로 바뀐 것을 확인 할 수 있었다.
• 명확한 이유를 아직 알지 못했다.... 차차 찾아봐야지...

• 이제 해결이 된 줄 알고 다시 콘솔을 찍어 보았는데 동일한 증상이 발생 하였다..

const nowPage = history.location.pathname;

if (newNoti.type === 1) {
  console.log('history.location.pathname ====>', nowPage);
  console.log('history ====>', history);
  if (nowPage === '/grabtalk') {
    console.log('디패 로드 톡룸');
    await dispatch(loadTalkRoomListToAxios());
  }
  dispatch(setChatNoti(true));
}

• 분명 history 안에는 들어있는데 nowPage라는 변수에 담은 history.location.pathname은 root경로를 출력했다.

• 결국 최종적으로 해결 한 방법은 따로 변수에 담지 않고 바로 history를 가져오니 해결 되기 했는데 너무 찝찝하다.. 정확한 원인이 무었인지 어떻게 찾아야 할지 감이 오질 않는다....
• 그래도 일단 해결은 되어서 다행이다 ㅜㅜ 진짜 이거때문에 몇시간을 삽질 했는지.. 오늘은 진짜 다섯시에는 자려고 했는데 결국 7시가 다 되어버렸다.

if (newNoti.type === 1) {
  if (history.location.pathname === '/grabtalk') {
    console.log('디패 로드 톡룸');
    await dispatch(loadTalkRoomListToAxios());
  }
  dispatch(setChatNoti(true));
}