[React]git으로 배포했을 때 빈 페이지 나오는 오류(with. react route)
오늘은 포트폴리오를 github으로 배포했을 때 화면이 빈 페이지로 나왔을 때 오류에 대해 적어보려고 한다.
이 오류는 react router를 도입하고 생겨난 새로운 오류..
로컬 상에서는 렌더링이 잘 된 상태라 깃헙에 배포를 했는데 빈 페이지가 나오고 콘솔에 경고 문구가 하나 떴다.
이런 경고 문구..
error with Permissions-Policy header: Origin trial controlled feature not enabled: 'interest-cohort'.
몇 번을 이것 저것 수정해서 다시 배포해보고 stackover flow에도 검색해보고 했지만 정확한 해결이 나지 않았다.
1. route exact 를 적는 방법 => typescript 오류가 있었다
2. 기본 페이지의 경로를 '/'이 아닌 다른 경로로 주는 방법 (ex.'/home') => 해결 안됨
3. header에 <meta http-equiv="Permissions-Policy" content="interest-cohort=()"></meta> 추가하기 => 역시나 안됨..
챗 gpt에게도 오류가 나는 이유를 물어봤지만.. 이해가 되지 않았다.
해결
이렇게 한 두시간 해메다가 찾게된 해결책은 Router 혹은 BrowserRouter에 basement를 지정해주는 것이다.
basement를 지정해주는 것은 모든 Route의 root URL을 지정해주는 과정이다.
프로젝트를 깃헙으로 배포하게 되면 package.json 파일 "deploy"에 "gh-page -d build"가 추가되게 되는데, 우리가 route를 지정할 떄 보내는 기본 페이지는 '/'이기 때문에 오류가 난다.
그래서 기본적으로 route될 주소를 미리 적어주는 과정을 거치는 것이다.
basement props에 깃헙 배포 주소를 추가해줬다.
index.tsx에 이렇게 basename을 지정해 주면 homepage의 url로 지정된 주소로 라우팅이 된다.
(.env 파일에 homepage와 같은 url 주소를 동일하게 적어줬다)
코드가 많이 바뀐것도 아닌데 발생한 오류 때문에 많이 당황했지만..
이번 경험으로 github 배포와 router에 대해 더 잘 알 수 있는 기회가 되었다.
또, 찾아보다가 github 공식 문서도 봤는데 그 곳에도 같은 방식이 적혀있었다.
역시... 공식문서가 중요하다는 것도 다시 한 번 깨닫게 되었다
참고