Github Pages 배포 시 빈 페이지만 나온 이유

---

분명 배포는 됐다, 근데 빈 페이지만 나온다.

package.json 에 Github Pages 배포를 위한 모든 것을 올바르게 적었지만 계속해서 빈 페이지만 나왔다.

설마 내 프로젝트가 망가진건가? 하는 생각에 npm start 를 통해 localhost 로 접속해봤지만 여기선 멀쩡했다.

설마 라우팅이 안되서인가?

나는 해당 프로젝트에서 React-Router-Dom의 BrowserRouter 기능을 사용하고 있었기에 기본이 될 컴포넌트인 Home 컴포넌트가 마운팅되지 않았을 수도 있다는 의심이 들기 시작했다.

그리고 스택오버플로우에 검색한 결과 다음의 답변이 눈에 띄었다.

You need to add your root path to the basename prop of BrowserRouter.

import BrowserRouter from 'react-router-dom/BrowserRouter'

ReactDOM.render((
   <BrowserRouter basename={process.env.PUBLIC_URL}>
     <App />
   </BrowserRouter>
), ...)  

브라우저라우터 기능을 사용한다면 root path 가 될 basename prop 을 줘야 한다는 것이었다.
아.. 왠지 라우팅에 뭔가 문제가 있을 거라곤 예상했지만 root path 를 따로 지정해 줘야 한다는 것은 몰랐다.

그렇다면 process.env.PUBLIC_URL 은 뭐하는 놈일까? 그 밑에 달린 답변을 한국어로 번역해보겠다.

process.env.PUBLIC_URL 은 Node.js 라이브러리의 일부이며 당신의 개발모드가 로컬에서 작동하냐 아니면 Github Pages와 같이 실제 서버에서 작동하냐에 따라 동적으로 생성되는 URL 입니다.

필자와 같은 문제가 생겼다면 BrowserRouter 태그의 basename prop에 {process.env.PUBLIC_URL} 을 넣어주면 해결될 것이다.