React #Movie App part_(3)

다 만들었으니 깃헙 페이지에 업로드해주자.

Publishing

✅ gh-pages 패키지 설치 및 사용

• 결과물을 github pages에 업로드할 수 있게 해주는 패키지
• 설치 npm i gh-pages
• 'package.json' > 'script' 에 있는 "build":"react-scripts build" 를 실행하면 내 웹사이트의 prduction ready code(코드 압축, 최적화)를 생성할 수 있다.
• 실행 : npm run build
• 그럼 압축, 최적화 과정이 진행되고 압축된 파일을 가지고있는 'build' 폴더가 생성된다.

✅ package.json 하단에 내 홈페이지 주소 추가

• build 파일을 github pages에 push 하기 전,
  먼저 'package.json'에 홈페이지를 추가해줘야한다.
• 'package.json' 제일 하단에
  "homepage" :"https://leesugyoung.github.io/React-Begin"
  추가.
  (https://"깃허브 유저네임"/github.io/"레퍼지토리 이름")
  (콘솔에 git remote -v라고 입력하면 레퍼지토리 이름을 확인할 수 있다.)
  

✅ srcipt 에 deploy 추가

• deploy는 방금 설치했던 gh-pages 를 실행시키고,
  'build' 디렉토리를 가져가는 것
• 먼저 bulid 를 하고난 다음에 deploy 를 해야 한다는 것을 기억하고 싶지 않으므로, predeploy 커맨드를 추가!

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject",
    "deploy" : "gh-pages -d build",   <<<----
    "predeploy" : "npm run build"   <<<----
  },

즉, 콘솔에 npm run deploy 를 입력하면
→ node.js가 predeploy 를 먼저 실행시킴
→ predeploy 는npm run build 를 실행
→ 그리고 npm run build는 react-scripts build 를 실행
→ 최적화 과정이 끝나면 predeploy의 gh-pages -d build 진행
→ 그럼 build 폴더가 제일 하단에 추가했던 "homepage" 웹사이트에 업로드된다.
(build 파일이 github pages에 push 된다.)

그런데 여기서 ...

• 아무리 기다려도 하얀 화면만 뜨기에 문제가 생겼단 것을 감지
• 콘솔에는 오류도 안뜨고.. 절규하며 검색해보니 route 경로에 문제가 있다고함?
• react router 6버전 이상으로 진행할 경우
  Route컴포넌트의 path경로 앞에 process.env.PUBLIC_URL을 추가해주어야 한다고함!
• App.js 수정!

function App() {
  return (
    <Router>
      <Routes>
        <Route path={process.env.PUBLIC_URL + '/'} element={<Home />} />
        <Route path="/movie/:id" element={<Detail />} />
      </Routes>
    </Router>
  );
}

• 완성!!!!!!!!!!!!!!!