팀프로젝트 트러블슈팅 기록!

지난 팀프로젝트를 진행하면서 일정에 치여 기록을 제대로 남기지 못했다 ㅠㅠ

지금도 바로 타입스크립트 + next.js 주차에 들어가면서 해야할 것들이 잔뜩 생겼지만.. 더 지나기전에 간단하게나마 기록해보려한다!

 

dev-note

가장 난감했던.. 아무런 에러 메세지도 없던 오류!!!!!!!! 그래서 원인 파악에만 시간이 아주 오래걸렸다.. 결국 발표전까지 해결을 못하고 튜터님들의 도움을 받아도 원인을 파악하기 어려워서 포기할까 싶기도했지만 사소한 오류도 아니고 아예 프로젝트를 사용할 수 없는 문제가 남아있다는게 너무 싫었다 🥹.. 

괜한 오기인가 싶기도했지만 프로젝트가 실행되게 하는 것은 너무 당연한 책임인 것 같아 다음 과제 시작을 딱 하루만 미루고 그 날만 이 오류 해결에 투자해보기로 했다. 다행히 성공!!!!

 

상황

- supabase 관련 모든 동작이 제대로 동작하지 않는 상황이 발견됨

- 에러메세지, 네트워크 오류 등 아무런 로그가 남지 않아 상황 파악이 어려웠음 (네트워크 요청 자체가 전송되지 않음)

 

시도한 것

- 어떤 상황에서 발생하는 문제인지를 먼저 파악하기위해 supabase와 연결을 담당하는 컴포넌트들에서 컴포넌트 최상단, useEffect 상단, useEffect 클린업, supabase auth의 상태변화 감지 리스너들에 모두 로그를 찍으며 테스트함

- 인증상태 변경을 감지하는 리스너의 콜백함수에서 로그가 찍히고, 그 이후로 모든 네트워크 동작이 진행되지 않는 것을 확인

- 에러를 발생시키기 위해 여러가지 동작을 했고, 브라우저 내 탭 이동시 같은 상황이 발생하는 것을 확인

- 콜백함수에서 인자로 받는 이벤트가 어떤 상태인지 확인하고 (SIGN-IN) 탭 이동에서 로그인 이벤트가 발생하는 것에 의문을 가져 이 키워드로 구글링

- supabase 깃허브에서 같은 문제를 질문한 글을 참고하여 해결

 

해결

 

 감격하며 찍어둔 gif..

supabase 쪽에서는 브라우저 환경을 고려해 발생하는 이벤트라고 하던데 사실 아직은 잘 모르겠다 왜 저 때 로그인이..?

아무튼 이미 session이 존재하는데 또 로그인 이벤트가 발생하는 경우를 따로 처리해주었다.

const setUserProfile = async () => { ...생략 }

if (session?.user) {
 switch (event) {
  case 'SIGNED_IN':
   setUserProfile();
   return;
  case 'SIGNED_OUT':
   setUser(null);
   return;
  }
} else {
  setUser(null);
}});

 

 

Walka Holic

위 상황처럼 해결하기 너무너무 어려웠던 상황은 없었던 것 같다.. 저 때 이후로 메세지를 나에게 남겨주는 에러들에 감사하게됨 ^-ㅠ

 

상황 1

- 기존 테스트하던 환경인 url 로 페이지 접속하는 방식 -> react-router-dom의 navigate를 이용해 페이지 이동하는 방식으로 변경하자 카카오맵 api의 마커가 표시되지 않음

 

시도한 것

- 마커만 표시되지 않고 지도는 잘 표시되고 있었으므로 api 요청 문제보다는 렌더링 순서 문제일 것이라 생각하고 접근함

- 위 에러에서 힌트를 얻어 컴포넌트 상단, useEffect 최상단, 클린업 등 렌더링에 영향을 미치는 단계들에 로그를 찍었고 두 상황에서 마커와 지도가 렌더링 되는 순서가 다르다는 것을 발견함

 

해결

- 마커 렌더링에 필요한 데이터 get 요청, 지도 렌더링에 필요한 #map 의 마운트가 모두 보장된 후에 맵과 마커를 렌더링할 수 있도록 useEffect의 의존성배열을 활용해 렌더링 순서를 변경함

const { data: posts, isSuccess, isError } = useGetPostsByLikes();

useEffect(() => {
  if (isSuccess) {
    const container = document.getElementById('map');
    mapRef.current = new kakao.maps.Map(container, INITIAL_MAP_OPTIONS);
    setMarkers();
  }
}, [isSuccess]);

 

 

상황 2

- 라우트가드 구현 후 로그인이 필요한 페이지에 url로 접근하는 경우 화면이 깜빡이며 마이페이지로 이동하는 현상 발생

 

시도한 것

- 기존 방식은 처음 로드될 때 access Token이 유효한지 확인하고, 유효하다면 유저 정보를 받아오는 것이었는데 이로인해 url로 접속하여 새로고침되는 때에 로그인이 안된 상태가 됨 -> 로그인 필요한 페이지에 접속하며 sign-in 페이지로 이동 -> 그 사이에 인증 정보가 업데이트되며 마이페이지로 이동되는 것이라고 파악함

 

해결

- 우선 인증정보가 false일 때, null일때를 나눠 각각 처리해두고 로그인, 회원가입 로직을 담당한 분과 논의하여 zustand의 persist를 활용해 인증정보가 유지될 수 있도록 함

 

로그인 담당팀원분과 원인도 잘 파악했고, 대책도 알맞게 세워 빠르게 해결할 수 있었다!