gh-pages 배포 시 빈 화면 나오는 문제 수정 [React]

1. 문제 배경

사실 이번이 두번째 발생한 문제인건 안비밀

• 문제 발생 상황: gh-pages를 활용해 git hub page에 바로 배포를 하게 되면 빈 화면이 뜨는 문제
• 기술 스택:
  •  
  •         "react": "^18.3.1",
            "react-dom": "^18.3.1",
            "react-router-dom": "^6.25.1",
            "gh-pages": "^6.1.1",

 

배경 이야기를 간단히 하자면, 이미 2번째 겪은 문제로 처음부터 create-react-app을 통해서 생성한 폴더에서 작업을 시작하지 않을 때마다 겪은 문제인데. 1번째 문제를 겪은 시점에서는 깔끔하게 프로젝트를 처음부터 새로 만드는 것으로 해결하고 넘어갈 수 있었지만, 이번에는 기존에 만들어둔 포트폴리오 프로젝트를 통째로 react 환경으로 리팩토링 하는 과정에서 생긴 문제이라 그냥 넘어갈 수가 없었다.

 

2. 문제 분석

예상 : build 하는 과정에서 컴파일이 제대로 되지 않았을 것

로컬에서 'npm start'를 통해 띄웠을 때는 아무런 문제가 없었기 때문에, build 하는 과정에서 오류가 발생했을 거라고 추론했다.

 

build된 폴더에서 보이는 js파일

 

home과 resume 두가지로 라우터를 나눠둔 상황이었기 때문에 main이라는 네이밍의 js파일 목록만 있었기 때문에 build 하는 과정에서 내가 만들어 둔 파일들이 제대로 컴파일 되지 않았을 거라는 의심이었지만...  css나 이미지 파일들을 비교해 봤을 때 나머지 파일들은 정상적으로 들어있는 것을 확인했기 때문에 안타깝게도 이 문제는 아닌 것으로 보였다.

 

 

인터넷 폭풍 검색 결과

'리액트 배포 후 빈화면' 이라는 키워드를 통해 검색해 본 결과 확인해 볼 수 있을 만한 문제점들은 다음과 같았다.

 

1. package.json에서 "homepage"가 명시되지 않은 경우

2. react-router 설정을 잘못한 경우

 

1번은 이미 입력을 해둔 상태였고, 순서를 조정해 봤지만 그런 문제는 아닌 것으로 확인되었다.

2번은 router 설정 시 PUBLIC_URL을 제대로 써뒀는지 확인하라는 것들이었는데, 여러 가지 양식을 시도해 보았지만 역시 해결에는 도움이 되질 않았다. 하지만 아래와 같이 작성해 두는 것이 편리하다는 것을 발견해서 공유해 본다.

 

---

//App.js 파일

import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
import Home from "./routes/Home";
import Resume from "./routes/Resume";

function App() {
    return (
        <Router basename={`${process.env.PUBLIC_URL}`}>
            <Routes>
                <Route path={`/`} element={<Home />}></Route>
                <Route path={`/resume`} element={<Resume />}></Route>
            </Routes>
        </Router>
    );
}

export default App;

 

Router에 basename을 설정해 두면 아래 Route에서 path에 일일이 ${process.env.PUBLIC_URL}를 입력하지 않아도 되고, 해당하는 라우터 파일 내에서도 Link를 통한 라우터 이동을 시킬 때도 ${process.env.PUBLIC_URL}를 생략가능했다.

---

진짜 문제점은 github의 page 설정이었다

git hub에서 page 설정으로 이동해서 보면 반영해야 하는 branch를 설정하는 곳이 있는데

이걸 반드시 'gh-pages'를 바라보도록 설정해주어야 한다.

난 기존 프로젝트에서 시작하면서 이미 page를 세팅해 둔 상태였는데, 처음부터 gh-pages를 사용해서 시작하지 않았기 때문에 바라보고 있는 브랜치들이 'develop'이나 'master' 였기 때문에 제대로 출력이 되지 않았던 것이다.

 

3. 해결 방법

브랜치를 'gh-pages'로 바꾸고 save를 눌러준 뒤 일정 시간이 흐른 뒤에 새로고침을 해주면 깔끔하게 반영이 된다.

 

---

이제 실질적으로 최종 배포 브랜치가 'gh-pages'가 되다 보니, master 브랜치의 용도가 다소 퇴색된 감이 있는데, 어떤 식으로 관리를 해야 할지는 조금 고민이 필요해 보인다. 

아무래도 npm 명령어 만으로 딸깍하고 배포가 되어버리다 보니, 실질적인 git 커밋 관리는 또 따로 노는 느낌이 있긴 하다. 현재로서는 master 브랜치는 빌드 배포 진행 후 이상 없는 최종본을 커밋하는 용도로 관리를 해봐야겠다.

 

FE 해결 완료된 이슈

 

모바일 웹에서 주소창 높이 만큼 화면이 가려지는 이슈