github page를 이용해서 배포하면 빈 화면이 보이는 경우가 있습니다.
이는, 배포할 때 경로설정으로 인한 문제인데,
GitHub Pages와 같은 정적 사이트 호스팅 서비스를 사용하여 React 앱을 배포할 때, 루트 경로가 항상 도메인의 루트(
/)가 아닐 수 있습니다. 예를 들어, GitHub Pages에서는 프로젝트의 URL이
https://<username>.github.io/<repository-name>/ 형태로 제공됩니다. 이 경우, 앱 내의 라우팅 경로는
/가 아닌 /repository-name/을 기준으로 해야 올바르게 작동합니다.React Router는 SPA(Single Page Application)에서 클라이언트 사이드 라우팅을 관리해 주는 라이브러리입니다. React Router v6에서는
<Route> 컴포넌트의 path 속성을 사용하여 특정 경로에 컴포넌트를 매핑합니다.process.env.PUBLIC_URL은 Create React App(CRA)을 사용할 때, package.json 파일에 있는 homepage 필드의 값을 참조하는 환경 변수입니다. 
이 변수는 앱이 배포될 기본 URL을 제공합니다.
예를 들어, GitHub Pages를 위해
package.json에 "homepage":"https://<username>.github.io/<repository-name>/"을 설정한 경우, process.env.PUBLIC_URL은 /repository-name/의 값을 갖게 됩니다.따라서, GitHub Pages와 같이 앱의 루트 경로가 도메인의 루트(
/)가 아닌 경우, React Router v6에서
<Route> 컴포넌트의 path에 process.env.PUBLIC_URL을 추가하여 경로를 설정하면, 앱의 라우팅이 올바르게 작동하게 할 수 있습니다.jsx<Route path={`${process.env.PUBLIC_URL}/`} element={<Home />} />
위 코드 예시에서,
path 속성에 ${process.env.PUBLIC_URL}/을 추가함으로써, Home 컴포넌트가 앱의 기본 경로(/ 또는 /repository-name/)에서 렌더링되도록 설정합니다. 이렇게 함으로써, GitHub Pages에서 앱을 배포했을 때 빈 화면이 나오지 않고, 의도한 대로
Home 컴포넌트가 정상적으로 표시됩니다.