1. react-router-dom 라이브러리가 설치 되어 있지 않다면 설치 한다.

 

npm install react-router-dom

 

설치하는 이유는 깃허브 서버 주소를 보면 다음과 같이 프로젝트명이 포함되어 있기 때문에  react-router-dom 라이브러리를 이용해서

basenmae 변경시켜 주기 위함이다.

 

https://{계정ID}.github.io/프로젝트명
 

 

index.js  파일에서  basename="프로젝트명"   여기서는   "react-cat-short-app" 깃 프로젝트 이름이다.

 

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";
import { BrowserRouter } from "react-router-dom";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <BrowserRouter basename="react-cat-short-app">
    <App />
  </BrowserRouter>
);

// If you want to start measuring perfoarmance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

npm run start 로  실행 시켜 보면 

http://localhost:3000/ 이 아니라  http://localhost:3000/react-cat-short-app   경로로 실행 되면 성공.

 

 

 

 

2.  gh-pages  라이브러리 설치 한다.

 

npm i gh-pages

 

 

 

 

 

3. package.json 설정

package.json 에 다음을 추가

"homepage": "https://계정ID.github.io/react-cat-short-app",



"deploy": "gh-pages -d build"

 

 

{
  "homepage": "https://계정ID.github.io/react-cat-short-app",
  "name": "cat-jjal-maker-cra",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.5",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "gh-pages": "^5.0.0",
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router-dom": "^6.8.2",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
  },

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

 

 

 

 

 

 

 

4. github  에서 프로젝트 생성후 프로젝트를 업로드 한다.

   여기서는 react-cat-short-app 로   생성하였다.

 

[Git] GitHub, 깃허브 repository에 파일 업로드(push)하는 방법 | Yoon's

 

 

 

 

 

5. 생성된 프로젝트 깃 저장소에서 설정 버튼 클릭

 

 

 

 

 

 

 

 

6. pages  메뉴를 클릭한 후   main  선택 한 후 save 버튼을 클릭한다.

 

 

 

 

 

 

 

7. 명령어로 배포

 

프로젝트 빌드후

$ npm run build 

 

다음 명령어를 실해하면 github 에 자동 배포 처리 된다.

$ npm run deploy  

 

 

 

 

8. npm run deploy   실행후 깃허브 사이트에 가보면  branch  에서 gh-pages  가 보이는데 ,  선택후

저장하면  완료.

 

 

 

 

 

 

 

 

 

9. 만약에, 깃허브 UI 를 통해 빌드및 배포 처리 하고 싶다면  Last deployed   를 클릭 후  Re-run all jons  버튼을 클릭하면 하면 된다.

 

 

 

 

 

 

 

 

https://braverokmc79.github.io/react-cat-short-app/