240806 새로고침 하지 않으면 작동하지 않는 문제

오늘은 프로젝트 프론트엔드에서 발생한 버그들을 해결하고자 했다.

 

일단 발견한 문제는 2가지가 우선 있었다.

 

1. 로그아웃 시 직접 새로 고침을 해야 로그인이 가능한 버그 수정

 

일단 기본적으로 인증된 사용자(localStorage에 유효한 토큰이 있는 사람)이면

로그아웃 버튼이 보이고

인증이 되어 있지 않은 사용자(localStorage에 유효한 토큰이 없는 사람)이면

로그인, 회원가입 버튼이 보인다.

 

위 사진을 보면 로그아웃 버튼이 보이고 로그인 된 사용자라는걸 알 수 있다.

 

문제가 무엇이냐면

 

먼저 로그아웃 버튼을 누르면

 

]

화면상으로 로그인과 회원가입 보이는 걸 확인할 수 있고

 

localStorage도 잘 비워진걸 볼 수 있다. 그런데 로그인 버튼을 누르면 아무 반응이 없는 버그가 있었다.

 

새로고침으로 해결할 수도 있고 다시 화면을 렌더링하게 fetch 관련 함수를 트리거 할 수도 있었지만

 

UX적인 부분에서도 로그아웃 시 로그인이 필요한거기 때문에 로그아웃 시

 

로그인 페이지로 리다이렉트 하게 만들었다.

 

 

const handleLogout = () => {
    logout();
    navigate('/login');
  };

 

로그아웃 버튼에 onClick={handleLogout} 붙였고

 

로그아웃 버튼 클릭 시 로그인 페이지로 이동한 모습

 

2. 매치 삭제했을 시 직접 새로 고침을 해야 반영이 되던 버그 수정

 

매치를 생성하면

 

아래와 같이 우리팀이 등록한 내역을 볼 수있게 하였는데

 

 

여기서 삭제를 진행할 시

 

alert은 잘 출력되지만

 

화면에 그대로 남아있다.

 

물론 새로고침을 하면

 

아래와 같이 바로 사라지긴하고

 

 

해당 날짜에도 잘 지워졌긴 했지만

 

결론적으로 삭제 버튼을 눌렀는데 화면에 그대로 남아있는것은 큰 문제 였기에 

바로 버그 수정을 시작했다.

 

일단 삭제를 할 때

delete api를 잘 활용은 하고 있지만

 

delete 가 진행 되었을 때 다시 fetch를 해주는 작업이 필요하다고 판단했고

 

const handleDelete = async (matchId) => {
    try {
      await deleteMatch(matchId);
      alert('매치가 삭제되었습니다.');
      fetchMyTeamMatches(page, matchStatus);
    } catch (error) {
      alert('매치를 삭제할 수 있는 권한이 없습니다.');
    }
  };

handleDelete 함수를

Container 부분으로 옮기고

 fetchMyTeamMatches를 추가 하였고

 

<MyTeamMatchList matches={matches} onDelete={handleDelete} />

onDelete형태로 handleDelete를 넘겨주고

<Button onClick={() => onDelete(match.id)} variant="gradient"
              gradient={{ from: 'red', to: 'pink', deg: 131 }} style={{ marginLeft: '10px' }}>
              삭제하기
            </Button>

삭제하기 버튼 onClick에 받는 형태로 구성했고

 

삭제를 진행하면 바로 다시 렌더링 잘 되었다.

 

느낀점

새로고침 없이 앱같은 웹을 만들려고 하는 만큼

새로고침이 없는 것을 고려하여 여러 상황에 대비해야 한다는것을 깨달았다.