1. 문제 발생
- 프로젝트 목록, 세부 페이지에서 로그아웃 후 브라우저 뒤로가기를 클릭하는 경우 프로젝트 화면 진입 및 무한 로딩 화면 발생
2. 원인
- 뒤로가기에 대해 생각하지 못하고 진입을 막지 않음
3. 해결방안
- 라우트 가드로 layout을 활용하여 로그인 사용자만 진입하는 페이지의 라우트만 묶어서 member-only-layout 컴포넌트를 적용하여 user 정보 여부를 확인하여 없는 경우 홈화면으로 이외에는 해당 페이지 진입하도록 설정
import { useAuth } from "@/hooks/useAuth";
import { Navigate, Outlet } from "react-router";
import GlobalLoader from "../GlobalLoader";
export default function MemberOnlyLayout() {
const { user, loading } = useAuth();
if (loading) return <GlobalLoader />;
if (!user) return <Navigate to={"/"} replace={true} />;
return <Outlet />;
}4. 해결방안 도입 후 추가 문제 발생
- 레이아웃을 적용하면서 리팩토링으로 라우트를 컴포넌트로 분리하고 글로벌 로딩화면을 만들어 적용한 후 배포했는데 아래와 같이 2가지 문제가 발생
1) 리다이렉트 로그인이 안됨
- 개발 당시의 문제처럼 로그인 한 후 돌아왔을 때 로그인 안된 상태로 돌아옴
- 유저 정보를 받아오지 못하고 null 상태인 것으로 추측됨
2) 리다이렉트 로그인 후 홈화면으로 넘어올 때 글로벌 로딩화면의 UI가 이상해짐
- 글로벌 로더의 높이 설정이 다른 컴포넌트와 충돌하여 발생한 것으로 추측됨
5. 추가 문제 해결
아래와 같이 단계적으로 문제를 해결하기 위해 시도함
1) 정상동작을 위해 롤백
- 로그인이 안되면 사이트를 사용할 수 없기때문에 머지 이전으로 롤백
2) 리다이렉트 로그인 문제점 파악
원인 추측
- 바뀐 부분을 생각했을 때, useAuth를 App.tsx에서도 요청하고 새로 만든 MemberOnlyLayout 컴포넌트에서도 요청해서 2개 충돌일 것이라 추측
디버깅 시도
- 디버깅을 위해 리다이렉트를 테스트하려고 했으나 이전 트러블슈팅에서 확인한 바와 같이 dev, 빌드 후 preview 모드는 안된다고 생각을 했지만 배포 전 테스트에서는 작동할 것이라 생각한 것과 달리 해당 url에서도 리다이렉트 테스트가 불가했음
참고
[트러블슈팅] Firebase Authentication 리다이렉트 로그인 시 로그인되지 않고 초기 화면으로 돌아가는 문제 해결
결과
- 리다이렉트 로그인은 실제 배포 환경에서만 작동해서 디버깅을 하려면 배포해서 디버깅을 해야하므로 그렇다면 로그인 부분을 리팩토링을 통해 코드를 정리하고 해결한 후 배포하여 테스트 해보는 것으로 판단했음
- 그렇다면 현재 문제 발생한 부분을 해결하기 위해서 어떤 방안이 있을까 생각함
3) App.tsx에 join 진입시 사용자 로그인 여부 판단과 동일하게 project 관련 path도 예외처리 진행
- 임시 조치로 해당 페이지에 진입하지 못하도록 예외처리하여 배포
- /projects 진입 여부 모두 테스트한 후 배포(dev, preview, test 사이트)
- 배포 후 리다이렉트 로그인 환경에서도 동작하는지 확인 완료
const isProjectPath = location.pathname.startsWith("/projects");
if (!user && isProjectPath) {
return <Navigate to="/" replace />;6. 결과 및 느낀점
- user 정보 여부에 따른 예외처리로 projects 페이지 진입을 막아 뒤로가기 이슈 해결
- 이번 트러블슈팅을 통해 '중요 로직 수정 시 리팩토링 범위를 어디까지 가져갈 것인가'에 대해 깊이 고민하게 되었음. 로그인 등 민감한 영역을 수정함과 동시에 리팩토링을 진행하다 보니 예상치 못한 부작용이 발생했을 때 원인 파악이 어려웠음. 앞으로는 현재 코드에서 최소한으로 수정 작업하여 문제를 해결한 이후에 리팩토링으로 근본적으로 작업을 해야겠다고 생각함
- 현재 리다이렉트의 불안정성에 대해 인지하고 배포한 경우에만 테스트할 수 있는 치명적인 약점을 어떻게 풀어낼지에 대해서도 고민하고 내가 다음 서비스를 만든다면 Firebase Auth 대신 다른 것을 도입해야겠다고 생각함
7. 다음 작업할 것
- 로그인 코드 리팩토링
https://github.com/meldyssey