React | 리액트 프로젝트 Github 배포

📍 리액트 환경 프로젝트 Github 배포

리액트 환경에서 생성한 SPA의 state JSX <Component> props 같은 문법들은 브라우저가 해석할 수
없어 그대로 배포할 수 없다.

이런 문법들을 CSS JS HTML 문법으로 바꿔주는 작업이 필요하다. 이러한 작업을 컴파일(comfile)
또는 빌드(build) 라고 한다. (웹팩의 기능이다. )

배포하고자 하는 react 앱의 root 에서 터미널을 통해 gh-pages 를 설치해준다.

$ npm i gh-pages

설치가 정상적으로 완료됐다면 package.json 의 dependencies 에 gh-pages 가 생성된다.

App() 에서 BrowserRouter 에 basename 프로퍼티 추가

    <BrowserRouter basename={process.env.PUBLIC_URL}>

Link 를 통해서 페이지에 접속한 것이 아니라 직접 URL 을 작성해서 접속 한 경우 컴포넌트가 불러와지
지 않는다. 이를 방지하기 위해 location.state 가 정의되어 있지 않으면 '/' 즉, 홈 으로 이동하는 리
다이렉트 기능을 추가한다.

const navigate = useNavigate();
/* location.state가 정의되어있지 않으면 홈으로 이동, 리다이렉트 기능 */
if (location.state === undefined) {
  navigate('/');
}

package.json 의 가장 밑에 homepage 를 추가해준다. 이 URL은 배포 된 사이트의 URL이 된다.

“https://깃허브닉네임.github.io/프로젝트명

package.json 의 scripts 에 predeploy 와 deploy 를 추가해준다.

“deploy” : gh-pages -d build npm run deploy 을 실행 했을 때 build directory 를 배포한다.
“predeploy” : “npm run build” npm run deploy 을 실행 했을 때 deploy 가 수행되기 전에
build 를 한다. predeploy 는 deploy 전에 먼저 실행한다는 뜻이다. 이를 통해 build 와
deploy 를 한 번에 실행 할 수 있다.