[트러블슈팅] 새로고침 시 특정페이지로 이동 되는 이슈 : 배포문제

배포된 페이지에 대해, 새로고침 시 특정 페이지 (페이지 A로 지칭) 로 이동되는 이슈가 발생했다.

 

프론트를 로컬에서 실행했을 때는 새로고침해도 페이지가 유지되고 있었고 ..

프론트 코드에서 페이지 A로 라우팅 되는 모든 코드들을 살펴보았지만 원인을 찾을 수 없었다. (location.href, router.replace 등등 ...)

 

네트워크 속도를 천천히 하고 네트워크 탭에서 요청들을 살펴보다

다른 페이지에서 새로고침을 실행했을 때 페이지 A로 이동하기 전에 '로그인' 페이지를 아주 빠르게 거쳤다가 페이지 A로 이동한다는 것을 발견하게 되었다.

 

해당 프로젝트는 next.js를 사용하는 프로젝트이고, 

pages 바로 아래 있는 index.tsx가 로그인페이지이며 처음 접속되는 페이지였다.

 

이를 발견하고, 감을 잡게 되었다. 

클라이언트 측 코드에서, 페이지 A로 강제로 이동시키는 유일한 코드는 아래와 같다.

useEffect(() => {
	const getAccessToken = async () => {
    	const accessTokenByCookies = await Promise.resolve(reactCookies.load('accessToken'));
        if (accessTokenByCookie) {
        	router.replace('/pagea');
        }
    }
    getAccessToken();
}, []);

 

 

그리고 로그인페이지로 이동될 때 애플리케이션 탭에서 쿠키를 확인하니 여전히 유효한 쿠키를 저장하고 있었다. 

 

이에 따라 내가 내린 결론은 아래와 같다. 

1. 배포 시 설정으로 새로고침 시 메인페이지인 로그인 페이지로 이동

2. 브라우저 쿠키에 아직 토큰을 저장중이고, 클라이언트에서 토큰이 유효할 때 특정페이지 A로 라우팅

 

 

배포는 사수님께서 해주셨고, 아쉽게도 회사에서는 인턴이 접근할 수 있는 영역이 한정되어있어서

내가 파악한 원인들에 대해서 문서화하여 전달드렸다.

 

끝까지 해결하지 못해서 아쉽지만,

배포 라우팅 관련해 이런 이슈가 있다는 것을 기억해두고

나중에 필요할 일이 생길 수 있다면 '배포 문제' 일 수도 있다고 파악하고 잘 찾아보길 !

 

검색 키워드 : '배포 메인페이지 새로고침' 등등